Changeset 7b04d3b in Klonkt for src/views/partials

Timestamp:

07/20/2026 07:35:55 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

1485933

Parents:

162c7a7

git-author:

Robin <roboburr@…> (07/20/2026 07:08:50 AM)

git-committer:

Robin <roboburr@…> (07/20/2026 07:35:55 AM)

Message:

Feature: Load more on News feed, page 72 (klonkt-demo-r9u, slice 1/4)

News (Krant) now pages in blocks of 72 (divisible by 2/3/4 so grid
columns stay full) with an htmx "Load more" button instead of a hard
60-item cap. getTimeline gains an offset arg; the route fetches 72+1 to
know whether the button belongs, and serves an append fragment
(partials/news-append) that swaps the next items beforeend into #tl-feed
and OOB-replaces the button with the next offset (or drops it on the
last page).

Reusable pieces for the other three views (Solo, Cirkel, Messages):

• partials/load-more.ejs (the button + OOB wrapper)
• partials/tl-item.ejs (extracted the timeline item so full page and append render identically)
• .load-more-* CSS in shared-styles, i18n feed.load_more (NL/EN/DE)

Tests: feed-pagination.test.js (offset paging, no overlap, probe of
PAGE+1, past-end empty). Browser-verified: 72 -> 144 -> 150 then the
button disappears.

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

Location:

src/views/partials

Files:

• load-more.ejs (added)
• news-append.ejs (added)
• shared-styles.ejs (modified) (1 diff)
• tl-item.ejs (added)

src/views/partials/shared-styles.ejs

@@ -183 +183 @@
 .htmx-request .pcms-loading { display: block; }
 @keyframes spin { to { transform: rotate(360deg); } }
+
+/* Load more (Solo, Cirkel, News, Messages) — page size 72, htmx append. */
+.load-more-wrap { display: flex; justify-content: center; margin: 1.5rem 0 .5rem; }
+.load-more-wrap:empty { margin: 0; }
+.load-more-btn { padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer;
+  font: inherit; font-weight: 600; color: var(--ink, inherit);
+  background: color-mix(in srgb, var(--ink, #000) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); }
+.load-more-btn:hover { background: color-mix(in srgb, var(--ink, #000) 9%, transparent); }
+.load-more-btn.htmx-request { opacity: .6; pointer-events: none; }
 </style>