emil
1c38df7e74
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
48 lines
2.6 KiB
Markdown
48 lines
2.6 KiB
Markdown
# Mobile UX Observations
|
||
|
||
## Viewport Tested
|
||
375x812 (iPhone X) and 390x844 (iPhone 12/13/14)
|
||
|
||
## Tab Navigation
|
||
- 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.
|