Changeset a78e051 in Klonkt

Timestamp:

06/27/2026 01:03:36 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

196e1be

Parents:

0a7ba90

Message:

fix(ui): avatar placeholder opens popup + smaller wrapping source label on tiles

• views/partials/profile-header.ejs — the no-photo avatar (music-note/initial placeholder) is now a button that opens the profile-summary modal, like the photo case; the modal renders even without a photo (placeholder shown inside) + CSS for the placeholder.
• assets/css/style.css — the cirkel-feed 'van <site>' source label on grid tiles was 1.44rem (bigger than the post title) and overflowed on mobile; now .72rem, wraps to 2 lines, chain icon kept large (1.3rem) beside it. Same for the no-cover gradient variant.
• views/shell.ejs — bump style.css cache-buster v56->v57.

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/profile-header.ejs (modified) (4 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2396 +2396 @@
 }
 /* Bron-site (cirkel-feed): toont bij hover "van <site>" onder de titel. */
+/* Source label: small text that wraps to 2 lines if needed, with a big chain icon
+   beside it (the text was 1.44rem — bigger than the title — and overflowed on mobile). */
 .grid-tile-overlay-src {
     color: #fff; opacity: .85;
-    font-size: 1.44rem; margin-top: .2rem;
-    display: inline-flex; align-items: center;
-}
-.grid-tile-overlay-src::before { content: "⛓"; margin-right: .25rem; font-size: .9em; }
+    font-size: .72rem; line-height: 1.2; margin-top: .25rem;
+    display: flex; align-items: center; gap: .3rem; width: 100%;
+}
+.grid-tile-overlay-src::before { content: "⛓"; font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
 .grid-tile-gradient-src {
-    margin-top: .35rem; font-size: 1.44rem; opacity: .85;
+    margin-top: .35rem; font-size: .72rem; line-height: 1.2; opacity: .85;
     color: var(--ink-soft);
-    display: inline-flex; align-items: center;
-}
-.grid-tile-gradient-src::before { content: "⛓"; margin-right: .25rem; font-size: .9em; }
+    display: flex; align-items: center; gap: .3rem; width: 100%;
+}
+.grid-tile-gradient-src::before { content: "⛓"; font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
 .grid-tile-overlay strong {
     color: #fff;

src/views/partials/profile-header.ejs

@@ -41 +41 @@
   <div class="container profile-header-inner">
 
-    <% if (_avatarUrl) { %>
-      <%# With a real photo: clicking opens the profile-summary modal (photo + details). %>
-      <button type="button" class="profile-photo" data-pf-summary aria-label="<%= _displayName || 'Profile' %>">
+    <%# Clicking the avatar — photo OR placeholder — opens the profile-summary modal. %>
+    <button type="button" class="profile-photo" data-pf-summary aria-label="<%= _displayName || 'Profile' %>">
+      <% if (_avatarUrl) { %>
         <img src="<%= _avatarUrl %>" alt="">
-      </button>
-    <% } else { %>
-      <a class="profile-photo" href="<%= _base %>/"
-         hx-get="<%= _base %>/?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
-         hx-push-url="<%= _base %>/" hx-indicator="#pcms-loading" aria-label="Home">
-        <% if (site.enable_audio_player && (typeof audioEnabled === 'undefined' || audioEnabled)) { %>
-          <span class="profile-photo-fallback profile-photo-fallback--music" aria-hidden="true">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 17V5l12-2v12"/>
-              <circle cx="6" cy="17" r="3"/>
-              <circle cx="18" cy="15" r="3"/>
-            </svg>
-          </span>
-        <% } else { %>
-          <span class="profile-photo-fallback" aria-hidden="true"><%= (_displayName || '?').charAt(0).toUpperCase() %></span>
-        <% } %>
-      </a>
-    <% } %>
+      <% } else if (site.enable_audio_player && (typeof audioEnabled === 'undefined' || audioEnabled)) { %>
+        <span class="profile-photo-fallback profile-photo-fallback--music" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 17V5l12-2v12"/>
+            <circle cx="6" cy="17" r="3"/>
+            <circle cx="18" cy="15" r="3"/>
+          </svg>
+        </span>
+      <% } else { %>
+        <span class="profile-photo-fallback" aria-hidden="true"><%= (_displayName || '?').charAt(0).toUpperCase() %></span>
+      <% } %>
+    </button>
 
     <div class="profile-info">
@@ -114 +108 @@
 <%# Profile-summary modal — opened by clicking the avatar. Shows photo + title + subtitle
     + contact details + start date + premium status. %>
-<% if (_avatarUrl) { %>
 <div class="pf-summary">
   <div class="pf-summary-card" role="dialog" aria-label="<%= _displayName %>">
     <button type="button" class="pf-summary-close" aria-label="Sluiten">&times;</button>
-    <img class="pf-summary-photo" src="<%= _avatarUrl %>" alt="">
+    <% if (_avatarUrl) { %>
+      <img class="pf-summary-photo" src="<%= _avatarUrl %>" alt="">
+    <% } else { %>
+      <div class="pf-summary-photo pf-summary-photo--ph" aria-hidden="true">
+        <% if (site.enable_audio_player && (typeof audioEnabled === 'undefined' || audioEnabled)) { %>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17V5l12-2v12"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="15" r="3"/></svg>
+        <% } else { %><span><%= (_displayName || '?').charAt(0).toUpperCase() %></span><% } %>
+      </div>
+    <% } %>
     <h3 class="pf-summary-name"><%= _displayName %></h3>
     <span class="pf-summary-prem<%= _isPrem ? ' is-prem' : '' %>"><%= _isPrem ? '★ Premium' : t('profile.free') %></span>
@@ -143 +144 @@
   </div>
 </div>
-<% } %>
 <% if (_showFollow) { %>
 <%# Follow-via-fediverse modal — replaces the native prompt() (which looked ugly). %>
@@ -403 +403 @@
 .pf-summary-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto .9rem;
   display: block; border: 3px solid var(--paper-2); background: #fff; }
+.pf-summary-photo--ph { display: flex; align-items: center; justify-content: center; background: var(--paper-2); }
+.pf-summary-photo--ph svg { width: 46px; height: 46px; color: var(--accent); }
+.pf-summary-photo--ph span { font-family: var(--font-display, serif); font-size: 2.6rem; font-weight: 700; color: var(--ink-soft); }
 .pf-summary-name { font-family: var(--font-display, serif); font-size: 1.4rem; margin: 0 0 .35rem; }
 .pf-summary-prem { display: inline-block; margin: 0 0 .7rem; padding: .15rem .6rem; border-radius: 999px;

src/views/shell.ejs

@@ -198 +198 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=56">
+<link rel="stylesheet" href="/assets/css/style.css?v=57">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in