feat(ui): landscape iteration — reorder left panel, enable board zoom
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 45s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m13s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 45s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m13s
Left panel order is now score / history / status / rack / controls (the history fills the middle and scrolls). Board zoom is re-enabled in landscape with the same gestures as portrait, but height-driven: the viewport is the full right pane, the board fits by height as a centred square when zoomed out, and on zoom-in it magnifies past the pane and pans within it (focus-centred scroll that rides the magnify transition), occupying the full width up to the left panel. Board.svelte gains a landscape prop; portrait stays width-driven and unchanged. landscape.spec.ts now asserts zoom works (the zoomed board overflows the pane).
This commit is contained in:
+12
-8
@@ -134,14 +134,18 @@ Login uses `Screen`.
|
||||
keyboard-aware (they size to the area above the keyboard).
|
||||
- **Landscape (wide) layout** (`Game.svelte`): when the viewport is wider than tall
|
||||
(`matchMedia('(orientation: landscape)')`) the game switches from the portrait stack to a
|
||||
**two-column** layout. The board fills the **right** column, fitted to the available height as
|
||||
the largest square that still fits (`min(100cqw, 100cqh)` inside a `container-type: size` pane),
|
||||
shrinking by width when the column is narrow — the board has the **lowest priority**, so the
|
||||
left panel is never squeezed. The **left panel** stacks the rack (+ the ✅ make control), the
|
||||
status line (bag · turn · score preview), the score plaques, the **always-open** history (docked
|
||||
and scrolling with its header sticky — no slide-down drawer, no score-bar toggle) and, pinned at
|
||||
the bottom, the controls tab bar. Board **zoom is disabled** (the whole board is already visible)
|
||||
along with the history open/close swipes, and the nav bar does not grow (`growNav` off). The
|
||||
**two-column** layout. The board fills the **right** column; it fits by **height** as a square
|
||||
(`min(100cqw, 100cqh)`, height-driven in `Board.svelte`'s `.scaler.land`) inside a
|
||||
`container-type: size` pane, shrinking by width when the column is narrow — the board has the
|
||||
**lowest priority**, so the left panel is never squeezed. The **left panel** stacks, top to
|
||||
bottom: the score plaques, the **always-open** history (docked and scrolling with its header
|
||||
sticky — no slide-down drawer, no score-bar toggle), the status line (bag · turn · score
|
||||
preview), the rack (+ the ✅ make control) and, pinned at the bottom, the controls tab bar. Board
|
||||
**zoom works as in portrait** (double-tap / pinch / placement auto-zoom), but the viewport is the
|
||||
full pane: zoom-out shows the height-fitted square centred, and zoom-in magnifies the board past
|
||||
the pane and pans within it, occupying the full width up to the left panel (the focus-centred
|
||||
scroll is set directly, without the portrait width-progress tween). Only the history open/close
|
||||
swipes are dropped (it is always open) and the nav bar does not grow (`growNav` off). The
|
||||
portrait layout is byte-for-byte unchanged; both layouts render from the same snippets, so the
|
||||
behaviour and markup stay single-sourced. The rack tiles size to the (fixed-width) panel rather
|
||||
than the viewport width so seven tiles never overflow the column.
|
||||
|
||||
Reference in New Issue
Block a user