Changeset 5280532 in Klonkt for src/views/partials/admin-styles.ejs

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:

• src/views/partials/admin-styles.ejs (modified) (2 diffs)

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; }