From 8f80948eb174a273f3b1dea963bb91745bcf323b Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 13 Oct 2026 06:17:39 +0000 Subject: Media pager: up and down go from post to post, left and right along a post's pictures. Adam: swipes and arrows up/down should go to the next post's media, left/right to the next within a post. The pager is now posts stacked top to bottom, each a row of its pictures or clips side by side — a quoted post's join the post that quotes it — with dots along the top when a post has more than one, saying how many and which. Up and down (swipe, arrows, j/k, Page) move a post at a time and land on a post where its row was left; left and right (swipe, arrows, h/l) move within the post and stop at its ends. A post's pictures all load as it comes near (those along its row too); a clip's head start goes to the next post's (where its row rests), the next along this one, and the post after next, at half; the look-ahead (the feed paging on, the media crawl) counts posts. Pictures pan sideways as well as up and down at 1×. Tests find the slide on screen by where it sits (the pager's children are posts now); feed-picture-pager walks right within a post, down past one with none, back up to where a post was left, left to its first, and a sideways swipe next to a swipe up; quote-pager walks the quoting post's row (its own picture, then the quote's). MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt --- src/style.css | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index e03ff14..f908a05 100644 --- a/src/style.css +++ b/src/style.css @@ -1482,14 +1482,31 @@ body::after { overflow-anchor: none; } .mp-scroll::-webkit-scrollbar { display: none; } -.mp-slide { +/* a post: a screen tall, its pictures or clips in a row side by side */ +.mp-group { position: relative; height: 100vh; height: 100dvh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; +} +.mp-row { + display: flex; height: 100%; width: 100%; overflow-x: auto; overflow-y: hidden; + scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; +} +.mp-row::-webkit-scrollbar { display: none; } +.mp-slide { + position: relative; flex: 0 0 100%; height: 100%; width: 100%; + scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; } +/* how many in this post, and which: dots along the top */ +.mp-dots { + position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 16px); + display: flex; gap: 6px; z-index: 2; pointer-events: none; +} +.mp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: background .15s, transform .15s; } +.mp-dots i.on { background: #fff; transform: scale(1.15); } .mp-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; } /* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe */ -.mp-slide img.mp-media { touch-action: pan-y; transform-origin: center center; will-change: transform; } +.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; will-change: transform; } /* nothing but the picture until a tap */ .mp-meta, .mp-top { opacity: 0; pointer-events: none; transition: opacity .18s; } .media-pager.show .mp-meta, .media-pager.show .mp-top { opacity: 1; pointer-events: auto; } -- cgit v1.2.3