Changeset 1f0c85b in Klonkt

Timestamp:

06/20/2026 01:28:36 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d188736

Parents:

dfc5379

Message:

ui(grid): show source site on hover on circle feed tiles

Grid tiles now show "from <site>" (post.source_name) in the hover overlay
(and on gradient tiles below the title), so in the circle feed it is clear
which site a post comes from. style.css?v=14.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/post-tile.ejs (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2182 +2182 @@
     padding: .6rem;
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
     background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 50%);
     opacity: 0;
     transition: opacity .2s;
     pointer-events: none; /* klik moet naar de <a> eronder gaan, niet naar de overlay */
+}
+/* Bron-site (cirkel-feed): toont bij hover "van <site>" onder de titel. */
+.grid-tile-overlay-src {
+    color: #fff; opacity: .85;
+    font-size: .72rem; margin-top: .2rem;
+    display: inline-flex; align-items: center;
+}
+.grid-tile-overlay-src::before { content: "⛓"; margin-right: .25rem; font-size: .9em; }
+.grid-tile-gradient-src {
+    margin-top: .3rem; font-size: .72rem; opacity: .8;
 }
 .grid-tile-overlay strong {

src/views/partials/post-tile.ejs

@@ -7 +7 @@
 const _hasCover = !!post.cover_image_url;
 const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
+const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
 const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
 const _external = post.external_url || null;
@@ -27 +28 @@
     <div class="grid-tile-overlay">
       <strong><%= post.title || '(untitled)' %></strong>
+      <% if (_src) { %><span class="grid-tile-overlay-src">van <%= _src %></span><% } %>
     </div>
   <% } else { %>
     <span class="grid-tile-title"><%= post.title || '(untitled)' %></span>
+    <% if (_src) { %><span class="grid-tile-gradient-src">van <%= _src %></span><% } %>
   <% } %>
 </a>

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=13">
+<link rel="stylesheet" href="/assets/css/style.css?v=14">
 
 <!-- Audio player styles: loaded on every page so the mini-player works