source: Klonkt/src/views/pages/admin-media.ejs@ bec9001

main
Last change on this file since bec9001 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: 2.6 KB
Line 
1<%# Beheer -> Media: de afbeeldingenbibliotheek met opruiming.
2 De audio-helft zit onder /admin/audio, als eigen tab.
3
4 Deze pagina stond volledig op inline styles en viel daarmee buiten het
5 ax-*-systeem waar audio en playlists al op zaten. Nu op dezelfde romp:
6 zelfde breedte, zelfde kop, tabs op dezelfde plek. %>
7<%- include('../partials/admin-styles') %>
8<div class="container ax-page">
9
10 <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
11 <%- include('../partials/media-tabs', { active: 'images', audioOn: audioOn }) %>
12 <header class="ax-header">
13 <div>
14 <h1><%= t('admin.t_media') %></h1>
15 <p class="ax-tagline">
16 <%= items.length %> <%= t('admin.media_count') %><% if (unusedCount) { %> &middot; <strong><%= unusedCount %></strong> <%= t('admin.media_unused') %><% } %>
17 </p>
18 </div>
19 </header>
20
21 <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
22
23 <% if (unusedCount) { %>
24 <div class="ax-actions-bar">
25 <button type="button" id="media-cleanup" class="ax-btn ax-btn-danger">&#128465; <%= t('admin.media_cleanup') %> (<%= unusedCount %>)</button>
26 </div>
27 <% } %>
28
29 <% if (!items.length) { %>
30 <div class="ax-empty">
31 <div class="ax-empty-icon">&#128247;</div>
32 <p><%= t('admin.media_empty') %></p>
33 </div>
34 <% } else { %>
35 <div class="ax-grid">
36 <% items.forEach(function(it){ %>
37 <div class="ax-tile media-card" data-file="<%= it.file %>">
38 <div class="ax-tile-media" style="aspect-ratio:1;">
39 <img src="<%= thumb(it.url, 320) %>" alt="" loading="lazy" decoding="async" style="object-fit:cover;height:100%;">
40 <% if (it.hasVideo) { %><span class="ax-tile-badge ax-tile-badge-r" title="animated cover">&#127916;</span><% } %>
41 <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
42 </div>
43 <div class="ax-tile-body">
44 <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
45 <div class="ax-tile-actions">
46 <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
47 <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
48 </div>
49 </div>
50 </div>
51 <% }) %>
52 </div>
53 <% } %>
54</div>
55
56<%# Het script staat in assets/js/mod/admin-media.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
57<%- include('../partials/page-data', { pageData: { copy: t('admin.media_copy'), delC: t('admin.media_del_confirm'), cleanC: t('admin.media_cleanup_confirm') } }) %>
Note: See TracBrowser for help on using the repository browser.