source: Klonkt/src/views/pages/read.ejs@ 87696ce

main
Last change on this file since 87696ce was 85b51bf, checked in by Bart <bart@…>, 3 weeks ago

Leesweergave: de hand weg, de balken zijn de uitgang

De zwevende 👋 was er voor het geval de balken weg waren. Maar ze komen terug
zodra je omhoog scrolt -- gemeten: klasse eraf binnen een seconde na de eerste
veeg omhoog -- en bovenaan staan ze sowieso. Twee uitgangen die hetzelfde doen
is er één te veel. De zes read.exit-sleutels zijn mee weg.

En dezelfde fout als in de vorige commit zat nog in het reduced-motion-blok:
scroll-snap-type: none stond daar op .read-stream, die niet scrollt. Nu op
<html>, waar het snappen ook staat.

Co-Authored-By: Claude Opus 5 <claude@…>
  • Property mode set to 100644
File size: 4.6 KB
Line 
1<%
2// De leesweergave: berichten achter elkaar, één per beeld, en de balken gaan weg.
3//
4// Barts idee, naar bartoverkamp.nl -- maar NIET met de truc die daar staat.
5// Daar wordt bij de rand naar de andere kant gesprongen en het artikel
6// "vloeiend" in beeld gezet; dat is een naad die je verbergt. Hier groeit de
7// stroom gewoon: bij de onderrand hangt de client de oudere buur eronder, bij de
8// bovenrand de nieuwere erboven, en de browser snapt naar de berichtgrenzen.
9// Dan is er geen naad om te verbergen.
10//
11// Zonder JavaScript blijft dit één leesbaar bericht met twee gewone links. Een
12// leesweergave die alleen met script bestaat, bestaat niet voor wie het uitzet.
13var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
14%>
15
16<%# De teksten die het script zelf plaatst, komen van hier -- zoals de
17 zoekteksten van de topnav (zie mod/chrome.js). Een zin die in het
18 script staat, staat in één taal, en dat is nooit de taal van de lezer. %>
19<div class="read-stream" id="read-stream" data-base="<%= _b %>"
20 data-i18n="<%= JSON.stringify({ end: t('read.end'), load_error: t('read.load_error') }) %>">
21 <%- include('../partials/read-article', {
22 post: post, entry: entry, newerPost: newerPost, olderPost: olderPost,
23 }) %>
24</div>
25
26<%# Geen eigen uitgangsknop. De balken schuiven terug zodra je omhoog scrolt
27 (en staan er sowieso bovenaan), dus de weg terug is altijd één veeg weg. Een
28 zwevende knop erbij zou een tweede uitgang zijn die hetzelfde doet. %>
29
30<noscript>
31 <nav class="read-fallback">
32 <% if (newerPost) { %><a href="<%= _b %>/read/<%= newerPost.slug %>">← <%= newerPost.title %></a><% } %>
33 <% if (olderPost) { %><a href="<%= _b %>/read/<%= olderPost.slug %>"><%= olderPost.title %> →</a><% } %>
34 </nav>
35</noscript>
36
37<style>
38/* Alles onder .on-read: dit is een nieuw scherm op een LIVE site, dus niets
39 hiervan mag daarbuiten iets aanraken. */
40
41/* De balken schuiven weg zodra je leest. Transform en niet display: een
42 schuivende balk laat zien dat hij terugkomt, een verdwijnende niet. */
43.on-read #pcms-chrome,
44.on-read .bottom-tab {
45 transition: transform .28s ease, opacity .28s ease;
46 will-change: transform;
47}
48.on-read.read-chrome-hidden #pcms-chrome { transform: translateY(-100%); opacity: 0; }
49.on-read.read-chrome-hidden .bottom-tab { transform: translateY(100%); opacity: 0; }
50
51/* De vrije ruimte onder de laatste post moet weg: anders eindigt het document
52 ver onder het laatste bericht en klopt "bij de rand" niet meer. */
53.on-read #pcms-main { padding-bottom: 0; }
54
55/* PROXIMITY, geen mandatory. Een bericht dat langer is dan het scherm moet je
56 rustig kunnen doorlezen; mandatory zou je bij elke pauze terugtrekken naar
57 een grens. Zo snapt hij alleen als je in de buurt van een grens bent.
58
59 OP <html>, en dat is geen smaakkwestie: snappen doet de SCROLLCONTAINER, en
60 dat is hier het document -- .read-stream heeft overflow: visible en scrollt
61 zelf niet. Op .read-stream stond de regel er wel, maar deed hij niets. */
62html:has(body.on-read) { scroll-snap-type: y proximity; }
63
64/* De browser NIET ook laten compenseren. Chrome en Firefox schuiven bij
65 invoegen bóven het beeld de scrollpositie zelf mee (scroll anchoring); samen
66 met onze eigen correctie in mod/read.js is dat twee keer, en dan springt de
67 tekst precies één bericht weg. Onze eigen correctie moet blijven, want Safari
68 (en dus iOS) kent scroll anchoring helemaal niet. */
69html:has(body.on-read), .on-read .read-stream, .on-read .read-post { overflow-anchor: none; }
70.on-read .read-post {
71 scroll-snap-align: start;
72 scroll-snap-stop: normal;
73 min-height: 100svh;
74 max-width: 46rem;
75 margin: 0 auto;
76 padding: 2rem 1.2rem 4rem;
77 box-sizing: border-box;
78}
79/* Een lijn tussen twee berichten: zonder grens is een stroom een lange brij. */
80.on-read .read-post + .read-post { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
81
82.on-read .read-head { padding-bottom: .5rem; }
83.on-read .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }
84.on-read .read-when { font-size: .85rem; opacity: .6; margin: 0; }
85
86/* Bezig / mislukt: de lezer hoort te merken dat er iets gebeurt, en vooral dat
87 er NIETS gebeurde als het misging. */
88.on-read .read-loading { text-align: center; padding: 1.2rem; opacity: .6; font-size: .9rem; }
89.on-read .read-end { text-align: center; padding: 2rem 1rem 3rem; opacity: .5; font-size: .9rem; }
90
91.on-read .read-fallback { display: flex; gap: 1rem; padding: 1rem 1.2rem; }
92
93@media (prefers-reduced-motion: reduce) {
94 .on-read #pcms-chrome, .on-read .bottom-tab { transition: none; }
95 html:has(body.on-read) { scroll-snap-type: none; }
96}
97</style>
Note: See TracBrowser for help on using the repository browser.