Changeset 5280532 in Klonkt for src

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

Location:

src/views

Files:

• pages/admin-audio.ejs (modified) (2 diffs)
• pages/admin-playlists.ejs (modified) (1 diff)
• partials/admin-styles.ejs (modified) (2 diffs)

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