Changeset 5280532 in Klonkt

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@…>

Files:

• scripts/admin-css.mjs (modified) (3 diffs)
• src/views/pages/admin-audio.ejs (modified) (2 diffs)
• src/views/pages/admin-playlists.ejs (modified) (1 diff)
• src/views/partials/admin-styles.ejs (modified) (2 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();

src/views/pages/admin-audio.ejs

@@ -254 +254 @@
 .ax-form-actions[hidden] { display: none; }
 
-/* ─── Buttons ──────────────────────────────────────────────────── */
-.ax-btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
-  padding: 0.55rem 1rem;
-  border: 1px solid var(--rule);
-  background: var(--paper-2);
-  color: var(--ink);
-  font-family: var(--font-ui, system-ui), sans-serif;
-  font-size: 0.9rem; font-weight: 500;
-  text-decoration: none;
-  border-radius: 6px;
-  cursor: pointer;
-  min-height: 40px;
-  transition: background 120ms, border-color 120ms;
-  -webkit-tap-highlight-color: transparent;
-}
-
 .ax-track-play.is-playing {
   border-color: var(--accent);
@@ -277 +260 @@
 }
 .ax-track-play-icon { font-size: 0.85rem; line-height: 1; }
-.ax-empty-icon {
-  font-size: 2.5rem;
-  font-family: var(--font-display, serif);
-  color: var(--ink-soft);
-  opacity: 0.4;
-  margin-bottom: 0.5rem;
-}
-.ax-track {
-  display: grid;
-  grid-template-columns: 56px 1fr auto;
-  gap: 0.85rem;
-  align-items: center;
-  padding: 0.75rem;
-  background: var(--paper-2);
-  border: 1px solid var(--rule);
-  border-radius: 10px;
-  transition: border-color 120ms;
-}
-.ax-track-cover {
-  width: 56px; height: 56px;
-  border-radius: 6px;
-  object-fit: cover;
-  background: var(--paper);
-  display: flex; align-items: center; justify-content: center;
-  font-family: var(--font-display, serif);
-  font-size: 1.5rem;
-  color: var(--accent);
-  flex-shrink: 0;
-}
 .ax-track-cover-empty { /* span variant */ }
-.ax-track-meta {
-  min-width: 0;  /* allow text-overflow on long titles */
-  display: flex; flex-direction: column; gap: 0.2rem;
-}
-.ax-track-title {
-  font-weight: 600;
-  font-size: 0.95rem;
-  color: var(--ink);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ax-track-sub {
-  font-size: 0.8rem;
-  color: var(--ink-muted, var(--ink-soft));
-  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
-}
-.ax-embed {
-  display: inline-block;
-  background: var(--paper);
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 0.75rem;
-  color: var(--ink-soft);
-  cursor: pointer;
-  user-select: all;
-  margin-top: 0.15rem;
-  word-break: break-all;
-  align-self: flex-start;
-  transition: background 120ms;
-}
 .ax-track-delete { display: inline; }
 
 /* ─── Mobile tweaks ───────────────────────────────────────────── */
 @media (max-width: 480px) {
-  .ax-track {
-    grid-template-columns: 48px 1fr;
-    grid-template-areas: "cover meta" "actions actions";
-    gap: 0.6rem;
-  }
-  .ax-track-cover { grid-area: cover; width: 48px; height: 48px; }
 }
 

src/views/pages/admin-playlists.ejs

@@ -87 +87 @@
 
 .ax-page { max-width: 880px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
-.ax-btn-primary:hover { opacity: 0.92; }
-.ax-track-cover {
-  width: 64px; height: 64px; border-radius: 8px;
-  background: var(--paper-2);
-  display: flex; align-items: center; justify-content: center;
-  font-family: var(--font-display, serif);
-  font-size: 1.5rem; color: var(--accent);
-  flex-shrink: 0;
-}
 
 /* ─── Mobile ──────────────────────────────────────────────────── */

src/views/partials/admin-styles.ejs

@@ -133 +133 @@
 }
 .ax-track:hover { border-color: var(--accent); }
+/* object-fit staat OOK op het element zelf, niet alleen op een img erbinnen:
+   admin-audio zet .ax-track-cover rechtstreeks op een <img>, admin-listeners
+   op een omhulsel met een img erin. Op een niet-vervangen element doet
+   object-fit niets, dus het kost de tweede vorm niets. */
 .ax-track-cover {
   width: 64px; height: 64px; border-radius: 8px;
@@ -141 +145 @@
   flex-shrink: 0;
   overflow: hidden;
+  object-fit: cover;
 }
 .ax-track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }