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:
@@ -713,9 +713,13 @@ Web-клиент рендерит отчёт как одну секцию на
|
||||
группы, мои / чужие / необитаемые / неопознанные планеты, корабли в
|
||||
производстве, грузовые маршруты, мои флоты, мои / чужие /
|
||||
неопознанные группы кораблей). Пустые секции получают явную копию
|
||||
empty-state. Якоря секций отображены в sticky-TOC (на мобильном —
|
||||
`<select>`); позиция скролла сохраняется при переключении активного
|
||||
представления через SvelteKit `Snapshot` API.
|
||||
empty-state. Навигация по секциям — sticky icon-popup в правом
|
||||
верхнем углу колонки отчёта (анкорный popover на десктопе и фикс.
|
||||
bottom-sheet на мобильном); подпись на кнопке отслеживает раздел,
|
||||
который сейчас в зоне видимости, выбор пункта меню — скролл к
|
||||
нужной секции. При возврате в активный вью отчёт перемонтируется,
|
||||
позиция скролла сбрасывается к началу, а IntersectionObserver
|
||||
заново рассчитывает подсветку при прокрутке.
|
||||
|
||||
Секция бомбардировок — это плоская read-only-таблица: одна строка на
|
||||
событие, колонки `attacker`, `attack_power`, признак `wiped` и
|
||||
|
||||
Reference in New Issue
Block a user