Changeset 2d2fd8c in Klonkt for src/assets/css/style.css

Timestamp:

08/18/2026 06:47:58 PM (3 weeks ago)

Author:

Bart <bart@…>

Branches:

main

Children:

7cf8144

Parents:

03ff677

git-author:

Bart <bart@…> (08/18/2026 05:13:14 AM)

git-committer:

Bart <bart@…> (08/18/2026 06:47:58 PM)

Message:

Tijdlijn | Grid | Lezen: de leesweergave krijgt een ingang

De leesweergave bestond wel maar was alleen te bereiken door /read in te tikken.
Nu staat ze als derde optie in dezelfde pil.

Een <a>, geen <button>, en met opzet NIET de klasse view-switch-btn: de
gedelegeerde klik in shell.ejs pakt alles met die klasse op, zet
body[data-feed-view] erop en springt op niet-feedpagina's terug naar home. Die
had deze link opgegeten.

Door er een link naartoe te leggen kwamen twee fouten boven die er al zaten:

1. De route gaf ELKE htmx-aanvraag één kaal artikel terug, want de leesmodule had ?partial=1 geleend -- en dat betekent op deze site al iets anders: "de pagina zonder de schil". Een gebooste link naar /read schoof dus één artikel in #pcms-main: geen stroom, geen script. De module vraagt nu ?fragment=1, en al het andere gaat naar pages/read waar renderPage zelf over de schil beslist.

2. PAGE_CLASSES in shell.ejs is een witte lijst, en 'on-read' stond er niet in. Bij een htmx-navigatie werd de class dus weggefilterd en sloeg ELKE regel van de leesweergave (.on-read ...) niet aan: geen schermhoge berichten, geen snappen, geen wegschuivende balken. Bij intikken ging het goed, want dan zet de shell de class zelf -- vandaar dat het onzichtbaar bleef.

Beide nagelopen in de browser: de pil navigeert, on-read staat er, min-height is
de schermhoogte, snappen staat aan, en de opgeslagen feed-view blijft ongemoeid.

MOD_V naar 3 (read.js) en style.css naar v68 (nieuwe selector).

Co-Authored-By: Claude Opus 5 <claude@…>

File:

• src/assets/css/style.css (modified) (2 diffs)

src/assets/css/style.css

@@ -2353 +2353 @@
     padding: .35rem 0;
 }
-.view-switch-btn {
+.view-switch-btn,
+.view-switch-link {
     display: inline-flex;
     align-items: center;
@@ -2368 +2369 @@
     transition: all .15s;
 }
-.view-switch-btn:hover {
+.view-switch-btn:hover,
+.view-switch-link:hover {
     color: var(--ink);
     border-color: var(--ink-muted);