Changeset 5280532 in Klonkt for scripts

Timestamp:

08/16/2026 01:17:20 PM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

38d5e40

Parents:

daa8eb8

Message:

Beheer: admin-audio neemt de maten van de gedeelde romp over

Robin zag dat /admin/audio nog de oude knop had en /admin/playlists de
goede. De markup was al gelijk -- beide gebruiken de terugknop-partial --
maar admin-audio had een EIGEN .ax-btn in zijn style-blok, en die staat
na de include en wint dus.

Het bleek geen los geval. admin-audio droeg een oudere, systematisch
kleinere kopie van het hele systeem:

.ax-btn 40px / radius 6 / 0.9rem -> 44px / radius 8 / 0.95rem
.ax-track hoes 56px / radius 10 -> 64px / radius 12
.ax-track-title 0.95rem -> 1.05rem
.ax-track-sub 0.8rem -> 0.85rem
@media 480px hoes 48px -> 56px

De partial kwam van admin-playlists, en dat is precies de versie die er
"goed" uitzag. Alle tien de afwijkingen zijn nu weg; audio en playlists
hebben nul regels die van de partial verschillen.

TWEE DINGEN DIE ECHT VERANDEREN, en niet alleen in maat:

• Lange tracktitels op /admin/audio WRAPPEN nu in plaats van af te kappen met een ellipsis. De gedeelde .ax-track-title is een flex-regel (playlists zet er een pill in) en text-overflow werkt daar niet. De hele titel blijft zo zichtbaar; dat leek me de betere kant van de ruil, maar het is een keuze en geen bijvangst.
• Het ♫-teken in de lege toestand verliest zijn display-font en eigen kleur, en erft nu van .ax-empty.

object-fit: cover staat nu OP .ax-track-cover en niet alleen op een img
erbinnen: admin-audio zet die klasse rechtstreeks op een <img>,
admin-listeners op een omhulsel. Op een niet-vervangen element doet
object-fit niets, dus de tweede vorm merkt er niets van. Zonder dit had
het weghalen van audio's kopie de hoezen uitgerekt.

scripts/admin-css.mjs heeft er --forceer bij: die haalt OOK de afwijkende
regels weg, zodat de pagina de vorm van de partial overneemt. Apart van
--doen, want --doen verplaatst alleen en dit VERANDERT hoe een pagina
eruitziet -- dat hoort een expliciete keuze te zijn. Met --toon laat hij
per eigenschap zien wat er verschilt; zo zijn bovenstaande maten
gevonden.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• scripts/admin-css.mjs (modified) (3 diffs)

scripts/admin-css.mjs

@@ -99 +99 @@
 const PAGINAS = process.argv.filter((a) => a.endsWith('.ejs') && a !== PARTIAL);
 const doen = process.argv.includes('--doen');
+// --forceer haalt OOK de regels weg die dezelfde selector hebben maar een
+// andere waarde: de pagina neemt dan de vorm van de partial over. Apart van
+// --doen omdat het iets anders is -- --doen verplaatst, dit VERANDERT hoe de
+// pagina eruitziet, en dat hoort een expliciete keuze te zijn.
+const forceer = process.argv.includes('--forceer');
 
 const gedeeld = new Map();
@@ -120 +125 @@
   console.log(`  ${dubbel.length} identiek aan de partial  ->  weg`);
   console.log(`  ${anders.length} zelfde selector, ANDERE waarde  ->  blijft staan`);
-  for (const r of anders) console.log(`      ${r.context ? r.context + ' ' : ''}${r.selector}`);
+  for (const r of anders) {
+    console.log(`      ${r.context ? r.context + ' ' : ''}${r.selector}`);
+    if (process.argv.includes('--toon')) {
+      const g = gedeeld.get(`${r.context}||${r.selector}`);
+      // Alleen de eigenschappen die ECHT verschillen, anders verzuipt het
+      // verschil in twintig regels die identiek zijn.
+      const kaart = (v) => new Map(v.split('; ').map((d) => [d.split(':')[0].trim(), d]));
+      const [ga, ra] = [kaart(g), kaart(r.verklaringen)];
+      for (const k of new Set([...ga.keys(), ...ra.keys()])) {
+        if (ga.get(k) !== ra.get(k)) console.log(`          partial: ${ga.get(k) || '(niets)'}\n          pagina : ${ra.get(k) || '(niets)'}`);
+      }
+    }
+  }
   console.log(`  ${eigen.length} alleen op deze pagina  ->  blijft staan`);
 
-  if (doen && dubbel.length) {
+  const weg = forceer ? [...dubbel, ...anders] : dubbel;
+  if (doen && weg.length) {
     // Van achter naar voren knippen, anders schuiven de posities.
     let css = blok.css;
-    for (const r of [...dubbel].sort((a, b) => b.van - a.van)) {
+    for (const r of [...weg].sort((a, b) => b.van - a.van)) {
       css = css.slice(0, r.van) + css.slice(r.tot);
     }
@@ -132 +150 @@
     const nieuw = blok.tekst.slice(0, blok.van) + css + blok.tekst.slice(blok.van + blok.css.length);
     fs.writeFileSync(pad, nieuw);
-    console.log('  geschreven');
+    console.log(`  geschreven (${weg.length} regels weg${forceer ? ', waarvan ' + anders.length + ' afwijkend' : ''})`);
   }
   console.log();