Files

T

emil 1c38df7e74 style(dm): redesign dashboard with purple-gold theme

Redesign DM Dashboard (/dm/, /ru/dm/) with purple-gold theme (#534AB7 + #c8a84b):

Design System:
- Update dm-theme.css with 49 purple-gold tokens (transitions, shadows, hover states)
- Create DmTabs.astro with ARIA, keyboard nav, URL hash sync, localStorage persistence
- Create DmSidebar.astro for desktop navigation
- Redesign DmHeader with gold accent
- Update DmButton, DmCard, DmInput primitives
- Expand i18n to 47 strings

Layout:
- Redesign DmLayout with 3-column dashboard grid (sidebar|main|context)
- Update /dm/index.astro and /ru/dm/index.astro with named slots

Feature Components:
- DiceRoller: empty state, ARIA live, color-coded history, storage key fallback
- InitiativeTracker: HP editing, active highlighting, storage key fallback
- Open5eReference: skeletons, debounce, error retry, gold tabs
- NotesPanel: cross-tab sync, copy-to-clipboard, auto-save
- AuthPanel: VK/Yandex brand colors, pill buttons

Tests:
- Add 50 Playwright E2E tests (smoke, dice, initiative, reference, notes, data-migration)

Fixes:
- Document Open5e client.ts URL bugfix
- Add backward-compatible storage key fallback for dice/initiative
- Preserve legacy sessionStorage data on load

2026-05-15 17:49:32 +03:00

2.6 KiB

Raw Blame History

Mobile UX Observations

Viewport Tested

375x812 (iPhone X) and 390x844 (iPhone 12/13/14)

Mobile tabs are sticky below the header (sticky top-[64px]) and use overflow-x-auto
All 4 tabs (Кубики, Инициатива, Справочник, Заметки) are reachable via horizontal swipe
Tab pill buttons have min-h-[44px] min-w-[80px] which satisfies touch target intent, though quick-dice buttons fall slightly short (38px height)

Thumb Reachability

Top tabs: On 375px width, tabs span full width and sit near top of screen. The rightmost tab (Заметки) may be harder to reach with right-thumb one-handed use.
Suggestion: Consider moving primary navigation to bottom sheet or bottom tab bar for mobile. This would place controls within natural thumb reach zone (lower 2/3 of screen).

Content Density

Dice roller quick-buttons (d4–d100) are horizontally scrollable on mobile
Initiative tracker list items are tall enough for comfortable tapping
Open5e reference search + filter stack vertically; cards use 1-column grid on mobile which is appropriate
Notes textarea fills available width; comfortable for typing

Touch Target Gaps

9 elements measured below 44px on mobile (see touch-targets.md):
- Quick-dice buttons (d4–d100) are 66x38px — width is good, height is 6px short
- Clear history button (Очистить) is 100x34px — needs height increase
- One input field is 163x42px — 2px short on height
Recommendation: Increase py-2 to py-2.5 or min-h-[44px] on quick-dice buttons and ghost buttons

Swipe Gestures / Bottom Sheet

Current tab switching requires precise tap on top tabs
Bottom sheet opportunity: A swipe-up bottom sheet for dice roll history or initiative details could reduce top-screen interaction
Swipe-between-tabs: Horizontal swipe on content area to switch tabs would feel native on mobile

Scroll Behavior

No horizontal overflow detected on mobile (body scrollWidth 360px within 375px viewport)
Vertical scrolling is smooth; sticky tabs remain accessible while scrolling

Visual Hierarchy

Purple accent (#534AB7) on dark background is highly visible
Gold headings (#c8a84b) stand out well against dark surfaces
Cards have adequate padding and border contrast on mobile

Keyboard UX

No on-screen keyboard overlap issues detected in screenshots
Input fields have visible focus rings (gold) on mobile

Overall Assessment

Mobile layout is functional and readable. Primary UX improvement would be bottom-navigation or swipe gestures to reduce thumb travel to top tabs.

2.6 KiB Raw Blame History Unescape Escape