Changeset 04a6b15 in Klonkt

Timestamp:

06/16/2026 08:22:12 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3f893bf

Parents:

8ea3d0d

Message:

Circle header scalable: max 6 chips + "+N more" pill + total count

With many circle sites, all chips wrapped into a wall that pushed the feed
down. Now: first 6 named chips + a "+N more" pill (with remaining names in
the tooltip) + "N sites in your circle" line. Compact regardless of count.

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

File:

• src/views/pages/circle-feed.ejs (modified) (3 diffs)

src/views/pages/circle-feed.ejs

@@ -13 +13 @@
   <p class="cirkel-sub">Wat er speelt bij de andere sites in mijn cirkel.</p>
   <% if (typeof sites !== 'undefined' && sites && sites.length) { %>
+    <% var _max = 6; var _more = sites.slice(_max); %>
     <div class="cirkel-members">
-      <% sites.forEach(function(s){ %>
+      <% sites.slice(0, _max).forEach(function(s){ %>
         <% if (s.url) { %><a class="cirkel-member" href="<%= s.url %>" target="_blank" rel="noopener" title="<%= s.name %>"><% } else { %><span class="cirkel-member" title="<%= s.name %>"><% } %>
           <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>')"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
@@ -20 +21 @@
         <% if (s.url) { %></a><% } else { %></span><% } %>
       <% }); %>
+      <% if (_more.length) { %>
+        <span class="cirkel-member cirkel-member--more" title="<%= _more.map(function(s){ return s.name; }).join(', ') %>">+<%= _more.length %> meer</span>
+      <% } %>
     </div>
+    <% if (sites.length > _max) { %>
+      <p class="cirkel-count"><%= sites.length %> sites in je cirkel</p>
+    <% } %>
   <% } %>
 </div>
@@ -73 +80 @@
   font-weight: 700; font-size: .82rem; }
 .cirkel-member-name { font-size: .9rem; font-weight: 600; }
+.cirkel-member--more { padding: .28rem .85rem; font-size: .85rem; font-weight: 700; color: var(--ink-muted); cursor: default; }
+.cirkel-member--more:hover { border-color: var(--rule); transform: none; }
+.cirkel-count { color: var(--ink-muted); font-size: .82rem; margin: .6rem 0 0; }
 .cirkel-empty { color: var(--ink-muted); text-align: center; margin: 2rem auto; }
 .cirkel-empty a { color: var(--accent); }