Changeset d7b5a6c in Klonkt

Timestamp:

06/20/2026 07:22:21 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

68b27a4

Parents:

cf7c2d9

Message:

feat(nav): Agenda IN the Timeline/Grid pill (Agenda · Timeline · Grid)

Agenda link moved to the first item inside the view-switcher pill, with
exactly the same sizing as the Timeline/Grid buttons. Own class (.vs-agenda),
so the view-toggle handler doesn't touch it — navigation via the global
link-boost.

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

Location:

src/views/partials

Files:

• shared-styles.ejs (modified) (1 diff)
• 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) links in de switcher-balk. */
+/* Agenda-link (evenementen) als eerste item IN de Tijdlijn/Grid-pill —
+   exact dezelfde maatvoering als .view-switch-btn, maar het is een nav-link. */
 .vs-agenda {
-  display: inline-flex; align-items: center; gap: 0.4rem;
-  margin-right: auto;            /* naar links; Tijdlijn/Grid blijven rechts */
+  display: inline-flex; align-items: center; gap: 0.35rem;
   padding: 0.35rem 0.85rem;
-  border: 1px solid var(--rule); border-radius: 999px;
-  background: var(--paper-2); color: var(--ink-muted, var(--ink-soft));
-  text-decoration: none; font-size: 0.85rem; font-weight: 600;
-  transition: background 120ms, color 120ms, border-color 120ms;
+  border-radius: 999px;
+  color: var(--ink-muted, var(--ink-soft));
+  text-decoration: none;
+  font-size: 0.85rem; font-family: inherit;
+  transition: background 120ms, color 120ms;
 }
-.vs-agenda:hover { color: var(--ink); border-color: var(--accent); }
-.vs-agenda svg { opacity: .85; }
-@media (max-width: 560px) { .vs-agenda { margin-right: 0; } }
+.vs-agenda:hover { color: var(--ink); }
 
 .grid-cols-picker {

src/views/partials/view-switcher.ejs

@@ -5 +5 @@
 <div class="view-switcher-wrap">
   <div class="container">
-    <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked) {
-         var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
-    %>
-    <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>
-    <% } %>
     <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') {
          var _onCirkel = (typeof bodyClass === 'string' && bodyClass.indexOf('on-cirkel') >= 0);
@@ -25 +17 @@
     <% } %>
     <div class="view-switcher" role="tablist" aria-label="Weergave">
+      <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked) {
+           var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
+      %>
+      <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>
+      <% } %>
       <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' %>">