Changeset 600fbf3 in Klonkt

Timestamp:

06/28/2026 05:29:51 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

3038fc9

Parents:

a64d705

Message:

feat(images): accent-gradient placeholder also for timeline feed media

The News-feed media images now show the same accent-gradient placeholder while loading
(with reserved space via :has(), so no blank gap), and fade in once loaded.

• views/pages/news.ejs — .tl-media-img gradient placeholder + img fade + :has min-height
• views/shell.ejs — add .tl-media-img img to the cover fade-in scan

Location:

src/views

Files:

• pages/news.ejs (modified) (1 diff)
• shell.ejs (modified) (1 diff)

src/views/pages/news.ejs

@@ -185 +185 @@
   /* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
   .tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
-  .tl-media-img { display: block; border-radius: 12px; overflow: hidden; background: #fff; }
-  .tl-media-img img { width: 100%; height: auto; display: block; }
+  .tl-media-img { display: block; border-radius: 12px; overflow: hidden;
+    background-image: linear-gradient(135deg,
+      color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
+      color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%); }
+  .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; transition: opacity .4s ease; }
+  .tl-media-img img.is-loading { opacity: 0; }
+  /* Reserve placeholder space while the (natural-aspect) feed image loads. */
+  .tl-media-img:has(img.is-loading) { min-height: 220px; }
 
   .tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }

src/views/shell.ejs

@@ -743 +743 @@
   if (window.__coverFadeWired) return; window.__coverFadeWired = true;
   function scan(root) {
-    (root || document).querySelectorAll('.grid-tile-img, .post-list-cover img').forEach(function (img) {
+    (root || document).querySelectorAll('.grid-tile-img, .post-list-cover img, .tl-media-img img').forEach(function (img) {
       if (img.dataset.fade) return; img.dataset.fade = '1';
       if (img.complete && img.naturalWidth > 0) return;   // already loaded → leave visible