source: Klonkt/src/views/partials/media-tabs.ejs@ d68ee3a

main
Last change on this file since d68ee3a was bec9001, checked in by Robin <roboburr@…>, 3 weeks ago

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@…>
  • Property mode set to 100644
File size: 1.5 KB
Line 
1<%# Gedeelde tabbalk voor Media (Afbeeldingen / Video's / Audio / Playlists /
2 Luisteraars).
3
4 Params: active = 'images'|'videos'|'audio'|'playlists'|'listeners';
5 audioOn (bool, standaard true).
6
7 De opmaak stond hier volledig inline en zit nu in partials/admin-styles.ejs
8 bij de rest van de ax-*-primitieven. Een gedeeld element dat zijn eigen
9 opmaak meedroeg kon niet meebewegen met de pagina's eromheen -- en dat was
10 zichtbaar: de balk zag er hetzelfde uit op vijf pagina's die verder van
11 twee verschillende ontwerpen waren.
12
13 De actieve tab is `aria-current="page"` en niet een klasse: dat is wat een
14 schermlezer nodig heeft, en de opmaak kan er net zo goed op haken. %>
15<% var _a = (typeof audioOn === 'undefined') ? true : audioOn; %>
16<nav class="ax-tabs" aria-label="Media">
17 <a href="/admin/media" class="ax-tab"<%- active === 'images' ? ' aria-current="page"' : '' %>><%= t('admin.media_images') %></a>
18 <a href="/admin/media/videos" class="ax-tab"<%- active === 'videos' ? ' aria-current="page"' : '' %>><%= t('admin.media_videos') %></a>
19 <% if (_a) { %>
20 <a href="/admin/audio" class="ax-tab"<%- active === 'audio' ? ' aria-current="page"' : '' %>><%= t('admin.b_audio') %></a>
21 <a href="/admin/playlists" class="ax-tab"<%- active === 'playlists' ? ' aria-current="page"' : '' %>><%= t('admin.b_playlists') %></a>
22 <a href="/admin/listeners" class="ax-tab"<%- active === 'listeners' ? ' aria-current="page"' : '' %>><%= t('admin.b_listeners') %></a>
23 <% } %>
24</nav>
Note: See TracBrowser for help on using the repository browser.