Changeset 4dcefa1 in Klonkt

Timestamp:

06/20/2026 08:11:45 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1c6d61c

Parents:

6eeb459

Message:

fix(agenda): robust grey-on-calendar (htmx-proof) via source rule + element classes

The body.class-override CSS didn't take effect after htmx nav. Now:

• Timeline/Grid: style.css active rule excluded on .on-shows/.on-downloads (same rule that does react to htmx) → grey there, normal on the feed.
• Solo/Circle + grid-cols: not rendered as 'active' on non-feed pages in the template (server-rendered in the OOB chrome → htmx-proof).
• Calendar active via element class .vs-agenda.is-active (not body class).

style.css?v=19.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/shared-styles.ejs (modified) (2 diffs)
• views/partials/view-switcher.ejs (modified) (5 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2133 +2133 @@
    Niet op de Archive-pagina: daar is geen "huidige" timeline/grid-keuze, dus beide
    knoppen blijven neutraal (grijs). */
-body[data-feed-view="timeline"]:not(.on-archive) .view-switch-btn[data-view="timeline"],
-body[data-feed-view="grid"]:not(.on-archive) .view-switch-btn[data-view="grid"] {
+body[data-feed-view="timeline"]:not(.on-archive):not(.on-shows):not(.on-downloads) .view-switch-btn[data-view="timeline"],
+body[data-feed-view="grid"]:not(.on-archive):not(.on-shows):not(.on-downloads) .view-switch-btn[data-view="grid"] {
     background: var(--ink);
     color: var(--paper);

src/views/partials/shared-styles.ejs

@@ -50 +50 @@
 }
 .vs-agenda:hover { color: var(--ink); }
-/* Op de agendapagina = helder/wit (geen pilletje, past bij de losse-link-look). */
-body.on-shows .vs-agenda { color: var(--ink); font-weight: 600; }
+/* Actief (op de agendapagina) = helder/wit. Element-class (in de OOB-gerenderde
+   chrome) i.p.v. body-class-CSS → werkt betrouwbaar ook na htmx-navigatie. */
+.vs-agenda.is-active { color: var(--ink); font-weight: 600; }
 
 .grid-cols-picker {
@@ -97 +98 @@
 }
 
-/* Op de agenda- én downloads-pagina is ALLES behalve de Agenda-pill neutraal/grijs
-   (je bent daar niet in een feed-weergave). !important + body.on-X (betrouwbaar
-   gezet/gestript via PAGE_CLASSES) → overrult de feed-active-regel ZONDER naar de
-   feed te lekken (de selector matcht alleen op die pagina's). */
-body.on-shows .view-switch-btn,
-body.on-downloads .view-switch-btn {
-  background: transparent !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-  border-color: var(--rule) !important;
-}
-body.on-shows .feed-scope-btn.is-active,
-body.on-downloads .feed-scope-btn.is-active {
-  background: transparent !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-}
-body.on-shows .grid-cols-btn.is-active,
-body.on-downloads .grid-cols-btn.is-active {
-  background: var(--paper-2) !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-  border-color: var(--rule) !important;
-}
 
 /* Spacing between switcher-bar and the page content below.

src/views/partials/view-switcher.ejs

@@ -3 +3 @@
     handlers are wired in shell.ejs via event-delegation on document so
     HTMX-swapped content keeps working without rebinding. %>
+<%
+  var _bc = (typeof bodyClass === 'string') ? bodyClass : '';
+  var _onShows = _bc.indexOf('on-shows') >= 0;
+  // Pagina's zonder actieve feed-weergave → niets in de pill is 'actief' (Solo/Cirkel
+  // + Tijdlijn/Grid grijs). Alleen Agenda krijgt z'n eigen is-active op de agenda.
+  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive']
+                   .some(function(c){ return _bc.indexOf(c) >= 0; });
+%>
 <div class="view-switcher-wrap">
   <div class="container">
@@ -9 +17 @@
     %>
     <div class="agenda-pill">
-      <a class="vs-agenda" href="<%= _sbA %>/shows" aria-label="Agenda — evenementen">
+      <a class="vs-agenda<%= _onShows ? ' is-active' : '' %>" href="<%= _sbA %>/shows" aria-label="Agenda — evenementen">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
         <span>Agenda</span>
@@ -20 +28 @@
     %>
     <div class="feed-scope" role="tablist" aria-label="Solo of cirkel">
-      <a class="feed-scope-btn<%= _onCirkel ? '' : ' is-active' %>" href="<%= _sb %>/"
-         role="tab" aria-selected="<%= _onCirkel ? 'false' : 'true' %>">Solo</a>
-      <a class="feed-scope-btn<%= _onCirkel ? ' is-active' : '' %>" href="<%= _sb %>/cirkel"
-         role="tab" aria-selected="<%= _onCirkel ? 'true' : 'false' %>">Cirkel</a>
+      <a class="feed-scope-btn<%= (!_neutral && !_onCirkel) ? ' is-active' : '' %>" href="<%= _sb %>/"
+         role="tab" aria-selected="<%= (!_neutral && !_onCirkel) ? 'true' : 'false' %>">Solo</a>
+      <a class="feed-scope-btn<%= (!_neutral && _onCirkel) ? ' is-active' : '' %>" href="<%= _sb %>/cirkel"
+         role="tab" aria-selected="<%= (!_neutral && _onCirkel) ? 'true' : 'false' %>">Cirkel</a>
     </div>
     <% } %>
@@ -38 +46 @@
       </button>
     </div>
+    <% if (!_neutral) { %>
     <div class="grid-cols-picker" aria-label="Aantal kolommen">
       <button type="button" class="grid-cols-btn" data-cols="2" title="2 kolommen">2</button>
@@ -43 +52 @@
       <button type="button" class="grid-cols-btn" data-cols="4" title="4 kolommen">4</button>
     </div>
+    <% } %>
   </div>
 </div>

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=18">
+<link rel="stylesheet" href="/assets/css/style.css?v=19">
 
 <!-- Audio player styles: loaded on every page so the mini-player works