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
4.9 KiB
4.9 KiB
Touch Target Size Report (Mobile)
Viewport: 375x812. WCAG 2.1 recommends minimum 44x44px touch targets.
Found 9 elements smaller than 44px:
BUTTON" d4 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d6 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d8 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d10 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d12 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d20 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])BUTTON" d100 " — 66x38px (class: quick-dice-btn rounded-full border border-[var(--gold)] bg-[var(--bg-secondary)] px-2 py-2 text-sm font-semibold text-[var(--gold)] transition-all duration-[var(--transition-base)] hover:bg-[var(--gold)]/10 hover:shadow-lg hover:shadow-[var(--gold)]/20 active:scale-[0.97] active:bg-[var(--accent)] active:text-white active:border-[var(--accent)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)])INPUT"" — 163x42px (class: w-full bg-[var(--bg-input)] border border-[var(--border-color)] rounded-lg px-3 py-2 text-[var(--text-primary)] text-base placeholder:text-[var(--text-secondary)] hover:border-[var(--text-secondary)] focus:outline-none focus:border-[var(--gold)] focus:ring-1 focus:ring-[var(--gold)] focus-visible:ring-2 focus-visible:ring-[var(--gold)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)] transition-all duration-[var(--transition-base)] flex-1)BUTTON"Очистить" — 100x34px (class: inline-flex items-center justify-center font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)] transition-all duration-[var(--transition-base)] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.97] bg-[var(--bg-card)] text-[var(--text-primary)] border border-[var(--border-color)] hover:border-[var(--gold)] hover:text-[var(--gold)] px-4 py-1.5 text-sm rounded-lg clear-history-btn)