Changeset bec9001 in Klonkt for src/views


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

Location:
src/views
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/admin-listeners.ejs

    r19a9a1e rbec9001  
    1 <div class="container admin-listeners-page">
    2   <p><a href="/admin" class="btn">&larr; <%= t('aaud.back') %></a></p>
    3   <h1><%= t('alis.lis_title') %></h1>
     1<%# Beheer -> Media -> Luisteraars (shaer-0nh).
    42
     3    Deze pagina had zijn eigen <style>-blok met eigen klassen (.lis-*) en week
     4    daarmee af van de vier tabs ernaast -- andere breedte, andere kop, andere
     5    rij. Nu op dezelfde ax-*-romp; wat overblijft is een lijst zoals audio en
     6    playlists er ook een hebben. %>
     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>
    511  <%- include('../partials/media-tabs', { active: 'listeners', audioOn: audioOn }) %>
    6 
    7   <%# Waarom dit een eigen tab is en niet een lijstje bij de volgers: dit zijn
    8       accounts die aan de BIBLIOTHEEK hangen. Ze krijgen de muziek en met opzet
    9       niet de gewone posts, en dat verschil hoort zichtbaar te zijn -- ook voor
    10       wie later moet begrijpen waarom ze niet in de volgerslijst staan. %>
    11   <p class="admin-tagline"><%= t('alis.lis_intro') %></p>
     12  <header class="ax-header">
     13    <div>
     14      <h1><%= t('alis.lis_title') %></h1>
     15      <%# Waarom dit een eigen tab is en niet een lijstje bij de volgers: dit
     16          zijn accounts die aan de BIBLIOTHEEK hangen. Ze krijgen de muziek en
     17          met opzet niet de gewone posts, en dat verschil hoort zichtbaar te
     18          zijn -- ook voor wie later moet begrijpen waarom ze niet in de
     19          volgerslijst staan. %>
     20      <p class="ax-tagline"><%= t('alis.lis_intro') %></p>
     21    </div>
     22  </header>
    1223
    1324  <% if (!luisteraars.length) { %>
    14     <p class="lis-leeg"><%= t('alis.lis_empty') %></p>
     25    <div class="ax-empty">
     26      <div class="ax-empty-icon">&#127911;</div>
     27      <p><%= t('alis.lis_empty') %></p>
     28    </div>
    1529  <% } else { %>
    16     <p class="lis-telling"><strong><%= luisteraars.length %></strong> <%= t('alis.lis_count') %></p>
    17     <ul class="lis-lijst">
     30    <p class="ax-tagline" style="margin-bottom:.75rem;"><strong><%= luisteraars.length %></strong> <%= t('alis.lis_count') %></p>
     31    <ul class="ax-list">
    1832      <% luisteraars.forEach(function (l) { %>
    19         <li class="lis-rij">
    20           <span class="lis-naam"><%= l.name || l.handle || l.actor_uri %></span>
    21           <% if (l.handle) { %><span class="lis-handle"><%= l.handle %></span><% } %>
    22           <span class="lis-meta">
    23             <%= t('alis.lis_since') %> <%= formatDate(l.created_at) %>
    24             ·
    25             <%= t('alis.lis_last') %>:
    26             <%= l.last_delivery_at ? formatDate(l.last_delivery_at) : t('alis.lis_never') %>
    27           </span>
     33        <li class="ax-track">
     34          <div class="ax-track-cover">
     35            <% if (l.icon) { %><img src="<%= l.icon %>" alt="" loading="lazy" decoding="async"><% } else { %>&#9835;<% } %>
     36          </div>
     37          <div class="ax-track-meta">
     38            <div class="ax-track-title">
     39              <%= l.name || l.handle || l.actor_uri %>
     40              <% if (l.last_error_at) { %><span class="ax-pill"><%= t('alis.lis_error') %></span><% } %>
     41            </div>
     42            <div class="ax-track-sub">
     43              <% if (l.handle) { %><span><%= l.handle %></span><span class="ax-track-sep">&middot;</span><% } %>
     44              <span><%= t('alis.lis_since') %> <%= formatDate(l.created_at) %></span>
     45              <span class="ax-track-sep">&middot;</span>
     46              <span><%= t('alis.lis_last') %>: <%= l.last_delivery_at ? formatDate(l.last_delivery_at) : t('alis.lis_never') %></span>
     47            </div>
     48          </div>
    2849        </li>
    2950      <% }); %>
    … …  
    3152  <% } %>
    3253</div>
    33 
    34 <style>
    35 .admin-listeners-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
    36 .admin-listeners-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 0.4rem; }
    37 .admin-listeners-page .admin-tagline { color: var(--ink-muted); margin: 0 0 1.5rem; }
    38 .lis-telling { color: var(--ink-muted); font-size: 0.9rem; }
    39 .lis-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    40 .lis-rij {
    41   display: flex; flex-direction: column; gap: 0.15rem;
    42   border: 1px solid var(--rule); border-radius: 8px;
    43   padding: 0.7rem 0.85rem; background: var(--paper-2);
    44 }
    45 .lis-naam { font-weight: 600; }
    46 .lis-handle { font-size: 0.85rem; color: var(--ink); }
    47 .lis-meta { font-size: 0.78rem; color: var(--ink-muted); }
    48 .lis-leeg { color: var(--ink-muted); }
    49 </style>

  • src/views/pages/admin-media.ejs

    r19a9a1e rbec9001  
    1 <%# Beheer → Media: image library + cleanup (the Audio half links out to /admin/audio). %>
    2 <div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
    3   <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
    4   <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
     1<%# Beheer -> Media: de afbeeldingenbibliotheek met opruiming.
     2    De audio-helft zit onder /admin/audio, als eigen tab.
    53
     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>
    611  <%- 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>
    720
    8   <% 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><% } %>
     21  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
    922
    10   <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
    11     <p style="margin:0;opacity:.75;">
    12       <%= items.length %> <%= t('admin.media_count') %><% if (unusedCount) { %> · <strong><%= unusedCount %></strong> <%= t('admin.media_unused') %><% } %>
    13     </p>
    14     <% if (unusedCount) { %>
    15     <button type="button" id="media-cleanup" class="btn" style="background:#b4452e;color:#fff;border-color:#b4452e;">🗑 <%= t('admin.media_cleanup') %> (<%= unusedCount %>)</button>
    16     <% } %>
     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>
    1726  </div>
     27  <% } %>
    1828
    1929  <% if (!items.length) { %>
    20     <p style="opacity:.7;"><%= t('admin.media_empty') %></p>
     30    <div class="ax-empty">
     31      <div class="ax-empty-icon">&#128247;</div>
     32      <p><%= t('admin.media_empty') %></p>
     33    </div>
    2134  <% } else { %>
    22   <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;">
     35  <div class="ax-grid">
    2336    <% items.forEach(function(it){ %>
    24       <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));">
    25         <div style="position:relative;aspect-ratio:1;background:#0a0e1a;">
    26           <img src="<%= thumb(it.url, 320) %>" alt="" loading="lazy" decoding="async" style="width:100%;height:100%;object-fit:cover;display:block;">
    27           <% if (it.hasVideo) { %><span title="animated cover" style="position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);border-radius:6px;padding:0 6px;font-size:13px;">🎬</span><% } %>
    28           <% if (!it.usedCount) { %><span style="position:absolute;top:6px;left:6px;background:#b4452e;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;"><%= t('admin.media_unused') %></span><% } %>
     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><% } %>
    2942        </div>
    30         <div style="padding:.5rem .6rem;font-size:13px;">
    31           <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
    32           <div style="display:flex;gap:.4rem;margin-top:.45rem;">
    33             <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
    34             <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
     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>
    3548          </div>
    3649        </div>

  • src/views/pages/admin-videos.ejs

    r19a9a1e rbec9001  
    1 <%# Beheer → Media → Video's (Robins opdracht, 30-7): the videos C2S uploads
    2     brought in (Shaer's composer, the help buoy), with usage and cleanup.
    3     Same shape as the image page; the preview is the video itself with
    4     preload="metadata", so the browser shows the first frame as its
    5     thumbnail until real poster generation lands (bead: ffmpeg ontbreekt). %>
    6 <div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
    7   <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
    8   <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
     1<%# Beheer -> Media -> Video's (Robins opdracht, 30-7): de video's die via C2S
     2    binnenkwamen (Shaers composer, de reddingsboei), met gebruik en opruiming.
    93
     4    De voorvertoning is de video zelf met preload="metadata", zodat de browser
     5    het eerste beeld als miniatuur toont tot echte poster-generatie landt
     6    (bead: ffmpeg ontbreekt).
     7
     8    Zelfde romp als de andere mediapagina's; stond hiervoor op inline styles. %>
     9<%- include('../partials/admin-styles') %>
     10<div class="container ax-page">
     11
     12  <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
    1013  <%- include('../partials/media-tabs', { active: 'videos', audioOn: audioOn }) %>
     14  <header class="ax-header">
     15    <div>
     16      <h1><%= t('admin.t_media') %></h1>
     17      <p class="ax-tagline"><%= items.length %> <%= t('admin.videos_count') %></p>
     18    </div>
     19  </header>
    1120
    12   <% 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><% } %>
    13 
    14   <p style="margin:0 0 1rem;opacity:.75;"><%= items.length %> <%= t('admin.videos_count') %></p>
     21  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
    1522
    1623  <% if (!items.length) { %>
    17     <p style="opacity:.7;"><%= t('admin.videos_empty') %></p>
     24    <div class="ax-empty">
     25      <div class="ax-empty-icon">&#127916;</div>
     26      <p><%= t('admin.videos_empty') %></p>
     27    </div>
    1828  <% } else { %>
    19   <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;">
     29  <div class="ax-grid" style="--ax-tile:220px;">
    2030    <% items.forEach(function(it){ %>
    21       <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));">
    22         <div style="position:relative;aspect-ratio:16/10;background:#000;">
    23           <video src="<%= it.url %>" preload="metadata" controls playsinline style="width:100%;height:100%;object-fit:contain;display:block;"></video>
    24           <% 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><% } %>
     31      <div class="ax-tile media-card" data-file="<%= it.file %>">
     32        <div class="ax-tile-media" style="aspect-ratio:16/10;background:#000;">
     33          <video src="<%= it.url %>" preload="metadata" controls playsinline style="height:100%;object-fit:contain;"></video>
     34          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
    2535        </div>
    26         <div style="padding:.5rem .6rem;font-size:13px;">
    27           <div style="opacity:.7;word-break:break-all;"><%= it.file %></div>
    28           <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
    29           <div style="display:flex;gap:.4rem;margin-top:.45rem;">
    30             <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
     36        <div class="ax-tile-body">
     37          <div class="ax-tile-meta" style="word-break:break-all;"><%= it.file %></div>
     38          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
     39          <div class="ax-tile-actions">
     40            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
    3141            <% if (!it.usedCount) { %>
    32             <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
     42            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
    3343            <% } %>
    3444          </div>

  • src/views/partials/media-tabs.ejs

    r19a9a1e rbec9001  
    1 <%# Shared Media tab bar (Afbeeldingen / Audio / Playlists). Params: active = 'images'|'videos'|'audio'|'playlists'|'listeners'; audioOn (bool, default true). %>
     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. %>
    215<% var _a = (typeof audioOn === 'undefined') ? true : audioOn; %>
    3 <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;">
    4   <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>
    5   <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>
     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>
    619  <% if (_a) { %>
    7   <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>
    8   <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>
    9   <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>
     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>
    1023  <% } %>
    1124</nav>
Note: See TracChangeset for help on using the changeset viewer.