Changeset 3f893bf in Klonkt

Timestamp:

06/16/2026 08:52:51 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d549549

Parents:

04a6b15

Message:

Circle header: >5 sites = count only (pill), no chips; <=5 = chips

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); %>
+    <% if (sites.length <= 5) { %>
     <div class="cirkel-members">
-      <% sites.slice(0, _max).forEach(function(s){ %>
+      <% sites.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>
@@ -21 +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>
+    <% } else { %>
+      <%# Meer dan 5: geen chips (zou een muur worden) — alleen het aantal. %>
+      <span class="cirkel-count"><%= sites.length %> sites in je cirkel</span>
     <% } %>
   <% } %>
@@ -80 +78 @@
   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-count { display: inline-block; color: var(--ink-muted); font-size: .92rem; font-weight: 600;
+  padding: .35rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); }
 .cirkel-empty { color: var(--ink-muted); text-align: center; margin: 2rem auto; }
 .cirkel-empty a { color: var(--accent); }