Changeset bec9001 in Klonkt for src/views/partials/media-tabs.ejs

Timestamp:

08/16/2026 12:07:48 PM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

abd2093

Parents:

19a9a1e

Message:

Beheer: de vijf mediapagina's op een gedeelde ax-romp

admin/media, media/videos en admin/listeners vielen buiten het
ax-*-systeem waar audio en playlists al op zaten. Media en video's
stonden volledig op inline styles, listeners had eigen .lis-*-klassen in
een eigen style-blok. Drie ontwerpen achter vijf tabs.

Nu alle vijf dezelfde romp: dezelfde breedte, dezelfde kop met tagline,
tabs op dezelfde plek (na de terugknop, voor de kop) en dezelfde
terugknop-sleutel -- listeners gebruikte aaud.back waar de rest
nav.admin heeft.

De primitieven staan in partials/admin-styles.ejs. Ze stonden vijf keer
los: .ax-header, .ax-header h1, .ax-back en .ax-back:hover byte voor byte
gelijk in vijf bestanden, .ax-flash-ok/-err in vier. Gelijktrekken zonder
een gedeelde plek is eenmalig -- de volgende die een knop aanpast raakt
een van de kopieen. admin-playlists schreef zelf al boven zijn blok
waarom het misging: "both pages get refreshed independently".

De tabbalk droeg zijn eigen opmaak inline mee en kon daardoor niet
meebewegen; die zit nu ook in de partial. De actieve tab is
aria-current="page" in plaats van een klasse: dat is wat een schermlezer
nodig heeft, en de opmaak haakt er net zo goed op.

audio en playlists zijn NIET aangeraakt. Hun blokken bevatten @media- en
paginaeigen regels door elkaar, en die mechanisch scheiden met een regex
is precies het soort ingreep dat niet faalt maar liegt. Aparte bead.

scripts/render-admin-views.mjs rendert de drie views gevuld en leeg. De
suite stond op 1040 groen terwijl de nieuwe partial niet eens kon parsen
-- hij raakt geen enkele view, dus faalt hij nooit op opmaak.

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

File:

• src/views/partials/media-tabs.ejs (modified) (1 diff)

src/views/partials/media-tabs.ejs

@@ -1 @@
-<%# Shared Media tab bar (Afbeeldingen / Audio / Playlists). Params: active = 'images'|'videos'|'audio'|'playlists'|'listeners'; audioOn (bool, default true). %>
+<%# Gedeelde tabbalk voor Media (Afbeeldingen / Video's / Audio / Playlists /
+    Luisteraars).
+
+    Params: active = 'images'|'videos'|'audio'|'playlists'|'listeners';
+            audioOn (bool, standaard true).
+
+    De opmaak stond hier volledig inline en zit nu in partials/admin-styles.ejs
+    bij de rest van de ax-*-primitieven. Een gedeeld element dat zijn eigen
+    opmaak meedroeg kon niet meebewegen met de pagina's eromheen -- en dat was
+    zichtbaar: de balk zag er hetzelfde uit op vijf pagina's die verder van
+    twee verschillende ontwerpen waren.
+
+    De actieve tab is `aria-current="page"` en niet een klasse: dat is wat een
+    schermlezer nodig heeft, en de opmaak kan er net zo goed op haken. %>
 <% var _a = (typeof audioOn === 'undefined') ? true : audioOn; %>
-<nav class="media-tabs" aria-label="Media" style="display:flex;gap:.4rem;margin:0 0 1.25rem;border-bottom:1px solid var(--rule,rgba(128,128,128,.3));flex-wrap:wrap;">
-  <a href="/admin/media" class="btn" style="border-radius:8px 8px 0 0;<%= active === 'images' ? 'border-bottom:2px solid var(--accent,#e8b04b);font-weight:600;' : 'opacity:.8;' %>"><%= t('admin.media_images') %></a>
-  <a href="/admin/media/videos" class="btn" style="border-radius:8px 8px 0 0;<%= active === 'videos' ? 'border-bottom:2px solid var(--accent,#e8b04b);font-weight:600;' : 'opacity:.8;' %>"><%= t('admin.media_videos') %></a>
+<nav class="ax-tabs" aria-label="Media">
+  <a href="/admin/media" class="ax-tab"<%- active === 'images' ? ' aria-current="page"' : '' %>><%= t('admin.media_images') %></a>
+  <a href="/admin/media/videos" class="ax-tab"<%- active === 'videos' ? ' aria-current="page"' : '' %>><%= t('admin.media_videos') %></a>
   <% if (_a) { %>
-  <a href="/admin/audio" class="btn" style="border-radius:8px 8px 0 0;<%= active === 'audio' ? 'border-bottom:2px solid var(--accent,#e8b04b);font-weight:600;' : 'opacity:.8;' %>"><%= t('admin.b_audio') %></a>
-  <a href="/admin/playlists" class="btn" style="border-radius:8px 8px 0 0;<%= active === 'playlists' ? 'border-bottom:2px solid var(--accent,#e8b04b);font-weight:600;' : 'opacity:.8;' %>"><%= t('admin.b_playlists') %></a>
-  <a href="/admin/listeners" class="btn" style="border-radius:8px 8px 0 0;<%= active === 'listeners' ? 'border-bottom:2px solid var(--accent,#e8b04b);font-weight:600;' : 'opacity:.8;' %>"><%= t('admin.b_listeners') %></a>
+  <a href="/admin/audio" class="ax-tab"<%- active === 'audio' ? ' aria-current="page"' : '' %>><%= t('admin.b_audio') %></a>
+  <a href="/admin/playlists" class="ax-tab"<%- active === 'playlists' ? ' aria-current="page"' : '' %>><%= t('admin.b_playlists') %></a>
+  <a href="/admin/listeners" class="ax-tab"<%- active === 'listeners' ? ' aria-current="page"' : '' %>><%= t('admin.b_listeners') %></a>
   <% } %>
 </nav>