Changeset 1eff06a in Klonkt

Timestamp:

06/20/2026 07:57:56 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

6eeb459

Parents:

da4387b

Message:

refactor(nav): Agenda as its own pill (separate from Timeline/Grid)

Agenda was INSIDE the view-switcher pill → the grey/white neutralisation clashed
with the feed toggle (Timeline/Grid stayed grey after htmx nav). Now Agenda is
its own pill (same look), visible in all modes, white on the calendar page. My
neutralisation CSS removed so Timeline/Grid have 100% their normal behaviour.

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

Location:

src/views/partials

Files:

• shared-styles.ejs (modified) (3 diffs)
• view-switcher.ejs (modified) (2 diffs)

src/views/partials/shared-styles.ejs

@@ -38 +38 @@
 .view-switch-btn[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
 
-/* Agenda-link (evenementen) als eerste item IN de Tijdlijn/Grid-pill —
-   exact dezelfde maatvoering als .view-switch-btn, maar het is een nav-link. */
+/* Agenda = een EIGEN pill (los van Tijdlijn/Grid, zodat de feed-toggle nooit
+   verstoord raakt). Zelfde look als de view-switcher-pill. Zichtbaar in alle modi. */
+.agenda-pill { display: inline-flex; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem; }
 .vs-agenda {
   display: inline-flex; align-items: center; gap: 0.35rem;
@@ -50 +51 @@
 }
 .vs-agenda:hover { color: var(--ink); }
-/* Agenda actief op de agendapagina = wit pilletje (zelfde look als de andere
-   actieve pill-knoppen: lichte achtergrond, donkere tekst). */
-.vs-agenda.is-active { background: var(--ink); color: var(--paper); }
+/* Op de agendapagina = wit pilletje (zelfde actieve look als Tijdlijn/Grid). */
+body.on-shows .vs-agenda { background: var(--ink); color: var(--paper); }
 
 .grid-cols-picker {
@@ -92 +92 @@
 body.on-post[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
 body.on-post[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
-body.on-post[data-grid-cols="4"] .grid-cols-btn[data-cols="4"],
-/* Op de agenda- én downloads-pagina is er geen actieve feed-weergave → Tijdlijn/
-   Grid (+cols) grijs. (Agenda blijft via .vs-agenda.is-active wél gemarkeerd.) */
-body.on-shows[data-feed-view="timeline"] .view-switch-btn[data-view="timeline"],
-body.on-shows[data-feed-view="grid"] .view-switch-btn[data-view="grid"],
-body.on-shows[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
-body.on-shows[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
-body.on-shows[data-grid-cols="4"] .grid-cols-btn[data-cols="4"],
-body.on-downloads[data-feed-view="timeline"] .view-switch-btn[data-view="timeline"],
-body.on-downloads[data-feed-view="grid"] .view-switch-btn[data-view="grid"],
-body.on-downloads[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
-body.on-downloads[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
-body.on-downloads[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
+body.on-post[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
   background: transparent;
   color: var(--ink-muted, var(--ink-soft));
   border-color: var(--rule);
-}
-/* Solo/Cirkel ook neutraal op agenda/downloads (base-regel gebruikt !important). */
-body.on-shows .view-switcher-wrap .feed-scope-btn.is-active,
-body.on-downloads .view-switcher-wrap .feed-scope-btn.is-active {
-  background: transparent !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
 }
 

src/views/partials/view-switcher.ejs

@@ -5 +5 @@
 <div class="view-switcher-wrap">
   <div class="container">
+    <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked && typeof agendaEnabled !== 'undefined' && agendaEnabled) {
+         var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
+    %>
+    <div class="agenda-pill">
+      <a class="vs-agenda" 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>
+      </a>
+    </div>
+    <% } %>
     <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') {
          var _onCirkel = (typeof bodyClass === 'string' && bodyClass.indexOf('on-cirkel') >= 0);
@@ -17 +27 @@
     <% } %>
     <div class="view-switcher" role="tablist" aria-label="Weergave">
-      <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked && typeof agendaEnabled !== 'undefined' && agendaEnabled) {
-           var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
-           var _agActive = (typeof bodyClass === 'string' && bodyClass.indexOf('on-shows') >= 0);
-      %>
-      <a class="vs-agenda<%= _agActive ? ' 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>
-      </a>
-      <% } %>
       <button type="button" class="view-switch-btn" data-view="timeline" role="tab"
               aria-selected="<%= (typeof site !== 'undefined' && site && site.feed_view_default === 'grid') ? 'false' : 'true' %>">