On touch, a tap on a post opens its thread
On a phone the only way into a post's thread was a small Expand button (and now an entry in More), while a tap on the post pinned it to a globe that is usually hidden there, outlining the card. Where the pointer can't hover, a tap on a post that isn't on its links, controls or menus and doesn't end a text selection opens its thread through the card's own thread link (main.js, data-thread on the card); cards are pinned to the globe with a mouse only. The globe's corner stats have 12px text on touch. Phone flow: a tap in a post's margin opens its thread and pins nothing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
1 parent
da8f4ffcab
commit
7b1bfa71c0
5 files changed
+39
-5
No files matched your search
+4
-2
@@ -21,6 +21,8 @@ const vendor = new URL("../vendor/globe/", import.meta.url).href
|
||||
const textures = { day: vendor + "earth-blue-marble.jpg", night: vendor + "earth-night.jpg" }
|
||||
const countriesUrl = vendor + "countries.json"
|
||||
const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)")
|
||||
// a touch screen: a tap on a card opens its thread there (main.js), so cards are pinned with a mouse only
|
||||
const canHover = matchMedia("(hover: hover)")
|
||||
|
||||
let loading = null
|
||||
let state = null
|
||||
@@ -597,10 +599,10 @@ function watchCards() {
|
||||
hover(null)
|
||||
})
|
||||
// a click on a card (not on its links or controls) pins it: the globe keeps its moment and place until it is
|
||||
// clicked again or another card is pinned
|
||||
// clicked again or another card is pinned. With a mouse only: on a touch screen the tap opens the post's thread
|
||||
listen(scroller, "click", event => {
|
||||
const card = event.target.closest?.("[data-post-id]")
|
||||
if (!card || event.target.closest("a, button, input, textarea, select, label, summary, video, audio, [role=button]"))
|
||||
if (!canHover.matches || !card || event.target.closest("a, button, input, textarea, select, label, summary, video, audio, [role=button]"))
|
||||
return
|
||||
const key = card.dataset.postId
|
||||
scroller.querySelectorAll("[data-globe-pinned]").forEach(c => c.removeAttribute("data-globe-pinned"))
|
||||
|
||||
Reference in new issue
Block a user