Changeset 847775c in Klonkt for src/views/pages/read.ejs

Timestamp:

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

Author:

Bart <bart@…>

Branches:

main

Children:

03ff677

Parents:

87696ce

git-author:

Bart <bart@…> (08/18/2026 04:42:55 AM)

git-committer:

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

Message:

Leesweergave: tikken op een bericht opent het bericht

De stroom toont de tekst, maar het gesprek staat op de berichtpagina: ⭐,
🔁, reacties, en het antwoordveld voor bezoekers van elders. Een leesweergave
waar je niet uit kunt naar dat gesprek is een doodlopende weg.

Drie ingangen, met opzet:

• de titel is een echte <a>, dus toetsenbord, schermlezer en cmd-klik werken;
• een voetlink zegt waar je heen gaat ("Reacties en waarderingen"), want een tik die je niet ziet, bestaat niet;
• en een tik ergens op het bericht, voor een duim.

Die tik kent vier uitzonderingen, want een tik die je niet bedoelde is erger dan
geen tik: links, knoppen en velden houden hun eigen werking, een geselecteerde
tekst is geen tik, een verschoven vinger is scrollen, en cmd/ctrl-klik laat je
aan de browser. Alle vier nagemeten in de browser, plus dat een link ín een
bericht wint van de tik.

MOD_V naar 2: mod/read.js is gewijzigd.

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

File:

• src/views/pages/read.ejs (modified) (1 diff)

src/views/pages/read.ejs

@@ -80 +80 @@
 .on-read .read-post + .read-post { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
 
+/* De titel is een link, maar mag er niet als een link uitzien: dit is een
+   leesscherm, geen index. Onderstrepen pas als je hem aanwijst. */
+.on-read .read-title a { color: inherit; text-decoration: none; }
+.on-read .read-title a:hover,
+.on-read .read-title a:focus-visible { text-decoration: underline; }
+
+/* De aankondiging onderaan: waar de tik je heen brengt. */
+.on-read .read-foot { margin-top: 2rem; }
+.on-read .read-open {
+  display: inline-block; font-size: .9rem; opacity: .75;
+  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
+}
+.on-read .read-open:hover, .on-read .read-open:focus-visible { opacity: 1; }
+
 .on-read .read-head { padding-bottom: .5rem; }
 .on-read .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }