UI: interactive back-swipe (left-band, snapshot backdrop)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 41s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 57s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 41s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 57s
Replace the 24px edge-swipe with a router-level interactive back gesture: a rightward drag in the left ~38% band tracks the finger while a cheap themed backdrop parallaxes in, and on release commits the back-navigation (past ~40% of the width or a rightward flick) or snaps back. The live parent mounts only on commit, which suppresses that one route slide for a seamless hand-off. Pure decision logic (shouldArm/lockAxis/decideCommit + the per-gesture controller) lives in lib/backswipe.ts with unit tests; the DOM wiring, hit-test and settle animation in lib/backswipe.svelte.ts. The gesture yields to native vertical scroll, skips the rack / draggable pending tiles / text inputs / the board while zoomed-in, and is disabled inside Telegram (native BackButton owns it). parentPath in App.svelte is now the single source for both the Telegram button and the swipe. Tests: backswipe unit (13) + e2e (3; Chromium+WebKit: commit, zoomed-in skip, vertical scroll). Docs: UI_DESIGN.md Back bullet.
This commit is contained in:
+11
-1
@@ -22,7 +22,17 @@ Login uses `Screen`.
|
||||
## Navigation
|
||||
|
||||
- **Back**: a thin, compact `<` drawn from two rotated CSS borders (`Header.svelte`
|
||||
`.chev`) — lighter than a glyph.
|
||||
`.chev`) — lighter than a glyph. Outside Telegram a screen also returns with an
|
||||
**interactive back-swipe** (`lib/backswipe.ts` pure logic + `lib/backswipe.svelte.ts`
|
||||
wiring, rendered by `App.svelte`): a rightward drag begun in the **left ~38 % band**
|
||||
(touch/pen only) tracks the finger — the current pane slides right while a cheap themed
|
||||
**backdrop** parallaxes in under a lightening scrim — and on release the screen the swipe
|
||||
ends toward wins (commit past ~40 % of the width or a rightward flick, otherwise snap
|
||||
back). The live parent mounts only on commit, which suppresses that one route slide so the
|
||||
hand-off is seamless. The gesture yields to native **vertical scroll** on a vertical move
|
||||
and skips the rack, a draggable pending tile, text inputs and the board **while zoomed-in**
|
||||
(so it never fights the board pan); it stays disabled inside Telegram, whose native
|
||||
BackButton owns this.
|
||||
- **No hamburger**: navigation is entirely bottom tab bars (the former `Menu.svelte`
|
||||
dropdown is gone — it fought the Telegram-fullscreen layout, where it had to be re-centred).
|
||||
Destinations beyond the lobby live behind **hub screens** reached from a tab: a ⚙️
|
||||
|
||||
Reference in New Issue
Block a user