Changeset bec9001 in Klonkt for src/views/pages/admin-videos.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/pages/admin-videos.ejs (modified) (1 diff)

src/views/pages/admin-videos.ejs

@@ -1 @@
-<%# Beheer → Media → Video's (Robins opdracht, 30-7): the videos C2S uploads
-    brought in (Shaer's composer, the help buoy), with usage and cleanup.
-    Same shape as the image page; the preview is the video itself with
-    preload="metadata", so the browser shows the first frame as its
-    thumbnail until real poster generation lands (bead: ffmpeg ontbreekt). %>
-<div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
-  <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
-  <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
+<%# Beheer -> Media -> Video's (Robins opdracht, 30-7): de video's die via C2S
+    binnenkwamen (Shaers composer, de reddingsboei), met gebruik en opruiming.
 
+    De voorvertoning is de video zelf met preload="metadata", zodat de browser
+    het eerste beeld als miniatuur toont tot echte poster-generatie landt
+    (bead: ffmpeg ontbreekt).
+
+    Zelfde romp als de andere mediapagina's; stond hiervoor op inline styles. %>
+<%- include('../partials/admin-styles') %>
+<div class="container ax-page">
+
+  <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
   <%- include('../partials/media-tabs', { active: 'videos', audioOn: audioOn }) %>
+  <header class="ax-header">
+    <div>
+      <h1><%= t('admin.t_media') %></h1>
+      <p class="ax-tagline"><%= items.length %> <%= t('admin.videos_count') %></p>
+    </div>
+  </header>
 
-  <% if (success) { %><p style="background:rgba(60,160,90,.15);border:1px solid rgba(60,160,90,.4);padding:.5rem .8rem;border-radius:8px;"><%= success %></p><% } %>
-
-  <p style="margin:0 0 1rem;opacity:.75;"><%= items.length %> <%= t('admin.videos_count') %></p>
+  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
 
   <% if (!items.length) { %>
-    <p style="opacity:.7;"><%= t('admin.videos_empty') %></p>
+    <div class="ax-empty">
+      <div class="ax-empty-icon">&#127916;</div>
+      <p><%= t('admin.videos_empty') %></p>
+    </div>
   <% } else { %>
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;">
+  <div class="ax-grid" style="--ax-tile:220px;">
     <% items.forEach(function(it){ %>
-      <div class="media-card" data-file="<%= it.file %>" style="border:1px solid var(--rule,rgba(128,128,128,.25));border-radius:10px;overflow:hidden;background:var(--paper-2,rgba(128,128,128,.06));">
-        <div style="position:relative;aspect-ratio:16/10;background:#000;">
-          <video src="<%= it.url %>" preload="metadata" controls playsinline style="width:100%;height:100%;object-fit:contain;display:block;"></video>
-          <% if (!it.usedCount) { %><span style="position:absolute;top:6px;left:6px;background:#b4452e;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;z-index:1;"><%= t('admin.media_unused') %></span><% } %>
+      <div class="ax-tile media-card" data-file="<%= it.file %>">
+        <div class="ax-tile-media" style="aspect-ratio:16/10;background:#000;">
+          <video src="<%= it.url %>" preload="metadata" controls playsinline style="height:100%;object-fit:contain;"></video>
+          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
         </div>
-        <div style="padding:.5rem .6rem;font-size:13px;">
-          <div style="opacity:.7;word-break:break-all;"><%= it.file %></div>
-          <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
-          <div style="display:flex;gap:.4rem;margin-top:.45rem;">
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
+        <div class="ax-tile-body">
+          <div class="ax-tile-meta" style="word-break:break-all;"><%= it.file %></div>
+          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
+          <div class="ax-tile-actions">
+            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
             <% if (!it.usedCount) { %>
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
+            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
             <% } %>
           </div>