Changeset 9f81a09 in Klonkt

Timestamp:

06/16/2026 01:56:56 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d2c43f9

Parents:

43dbf9c

Message:

Circles: Solo/Circle scope toggle in the switcher bar (left) + Circle nav link removed

• view-switcher: Solo/Circle segmented toggle on the left (circle mode only), full navigation (body-class/grid-CSS guaranteed correct).
• style.css: feed-scope buttons + on-cirkel added to grid-toggle rules (grid/timeline now also switches on /cirkel).
• topnav + bottom-tab: the standalone Circle nav link removed (replaced by the toggle).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (3 diffs)
• views/partials/bottom-tab.ejs (modified) (1 diff)
• views/partials/topnav.ejs (modified) (1 diff)
• views/partials/view-switcher.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2075 +2075 @@
 body.on-home[data-feed-view="grid"]    .article-footer,
 body.on-archive[data-feed-view="grid"] .feed-timeline,
-body.on-archive[data-feed-view="grid"] .pagination {
+body.on-archive[data-feed-view="grid"] .pagination,
+body.on-cirkel[data-feed-view="grid"]  .feed-timeline {
     display: none !important;
 }
@@ -2081 +2082 @@
 .feed-grid { display: none; }
 body.on-home[data-feed-view="grid"]    .feed-grid,
-body.on-archive[data-feed-view="grid"] .feed-grid { display: block; }
+body.on-archive[data-feed-view="grid"] .feed-grid,
+body.on-cirkel[data-feed-view="grid"]  .feed-grid { display: block; }
 
 /* -------- GRID VIEW TILES (Instagram-stijl) -------- */
@@ -2363 +2365 @@
     flex-wrap: wrap;
 }
+
+/* Solo / Cirkel scope-toggle (alleen in circle-modus) — links in de bar */
+.feed-scope { display: inline-flex; gap: .35rem; }
+.view-switcher-wrap .feed-scope { margin-right: auto; }
+.feed-scope-btn {
+    display: inline-flex; align-items: center;
+    padding: .35rem .85rem; min-height: 32px;
+    background: transparent; border: 1px solid var(--rule); border-radius: 999px;
+    color: var(--ink-muted); font-family: var(--font-ui); font-size: .82rem;
+    text-decoration: none; cursor: pointer; transition: all .15s;
+}
+.feed-scope-btn:hover { color: var(--ink); border-color: var(--ink-muted); }
+.feed-scope-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
 
 .grid-cols-picker {

src/views/partials/bottom-tab.ejs

@@ -56 +56 @@
     <span class="bottom-tab-label">Zoek</span>
   </button>
-
-  <!-- Cirkel (alleen in circle-modus) -->
-  <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') { %>
-    <a class="bottom-tab-item<%= _active === 'cirkel' ? ' is-active' : '' %>"
-       href="<%= _siteUrlBase %>/cirkel"
-       hx-get="<%= _siteUrlBase %>/cirkel?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
-       hx-push-url="<%= _siteUrlBase %>/cirkel" hx-indicator="#pcms-loading">
-      <svg class="bottom-tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="3.2"/><circle cx="16.5" cy="15" r="3.2"/><path d="M10.6 10.9l3.3 2.4"/></svg>
-      <span class="bottom-tab-label">Cirkel</span>
-    </a>
-  <% } %>
 
   <!-- Plus (FAB-style, only when user can post) -->

src/views/partials/topnav.ejs

@@ -64 +64 @@
           <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8v13H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
           <span class="nav-label">Archief</span>
-        </a>
-      <% } %>
-
-      <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') { %>
-        <a class="nav-link" href="<%= _siteUrlBase %>/cirkel"
-           hx-get="<%= _siteUrlBase %>/cirkel?partial=1" hx-target="#pcms-main"
-           hx-swap="innerHTML" hx-push-url="<%= _siteUrlBase %>/cirkel"
-           hx-indicator="#pcms-loading">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="3.2"/><circle cx="16.5" cy="15" r="3.2"/><path d="M10.6 10.9l3.3 2.4"/></svg>
-          <span class="nav-label">Cirkel</span>
         </a>
       <% } %>

src/views/partials/view-switcher.ejs

@@ -5 +5 @@
 <div class="view-switcher-wrap">
   <div class="container">
+    <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') {
+         var _onCirkel = (typeof bodyClass === 'string' && bodyClass.indexOf('on-cirkel') >= 0);
+         var _sb = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
+    %>
+    <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>
+    </div>
+    <% } %>
     <div class="view-switcher" role="tablist" aria-label="Weergave">
       <button type="button" class="view-switch-btn" data-view="timeline" role="tab"