feat(ui): F8-09 — turn report sticky icon-popup section menu (#52)
- Replace the 14 rem sticky sidebar (and its mobile <select> twin)
with a single sticky icon-popup trigger pinned to the top-right
corner of the report column. Trigger shows `≡` followed by the
currently active section title (CSS-clamped with text-overflow:
ellipsis so long RU titles cannot bloat the button). Click opens
an anchored popover on desktop and a fixed bottom-sheet on
<768.98 px (mirrors lib/active-view/map-toggles.svelte).
- Each menuitem closes the popover and scrolls the matching
`<section id="report-<slug>">` into view. The scroll is deferred
one animation frame so the surface unmount + restoreFocus's
focus restoration on the (sticky) trigger commit first; otherwise
the focus call could cancel the just-started smooth/instant
scroll under desktop Chromium and WebKit.
- Drop the in-report "Back to map" button — the same affordance
lives in the app-shell view menu (tests/e2e/game-shell.spec.ts
covers it).
- Tighten the report grid to a single flex column so the section
body now occupies the full container width.
- i18n: remove game.report.back_to_map and
game.report.toc.mobile_label; add game.report.toc.open and
game.report.toc.close (mirrors game.map.toggles.open/close).
- Tests: Vitest report-toc.test.ts rewritten for the new icon-popup
contract; Playwright report-sections.spec.ts switches the anchor
loop to trigger → menuitem and adds a mobile bottom-sheet
assertion; game-shell-stubs.test.ts no longer asserts the
back-to-map button on the report orchestrator.
- Docs: ui/docs/report-view.md (TOC + i18n + test seams) and
docs/FUNCTIONAL{,_ru}.md §6.4 updated. The stale SvelteKit
Snapshot reference (the route file was removed by the single-URL
app-shell) is dropped at the same time.
Refs: #52 (#43 umbrella).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+9
-4
@@ -694,10 +694,15 @@ The web client renders the report as one section per FBS array
|
||||
foreign ship classes, battles, bombings, approaching groups, my /
|
||||
foreign / uninhabited / unknown planets, ships in production,
|
||||
cargo routes, my fleets, my / foreign / unidentified ship groups).
|
||||
Empty sections render explicit empty-state copy. Section anchors
|
||||
are exposed in a sticky table of contents (a `<select>` on mobile)
|
||||
and the scroll position is preserved across active-view switches
|
||||
via SvelteKit's `Snapshot` API.
|
||||
Empty sections render explicit empty-state copy. Section
|
||||
navigation is exposed through a sticky icon-popup menu pinned to
|
||||
the top-right of the report column (an anchored popover on desktop
|
||||
and a fixed bottom-sheet on mobile); the trigger label tracks the
|
||||
section currently in view, and picking a menuitem scrolls the
|
||||
matching section into view. Re-entering the report active view
|
||||
remounts the component and resets the scroll position; the active
|
||||
highlight is re-derived from the IntersectionObserver as the user
|
||||
scrolls.
|
||||
|
||||
The Bombings section is a flat read-only table — one row per
|
||||
bombing event, columns for `attacker`, `attack_power`, `wiped`
|
||||
|
||||
Reference in New Issue
Block a user