Naser Mansour
0f9d12c3cf
Adds docs/tasks/ (16 epics + 102 stories converted to task/subtask files with statuses.md as the new status source of truth) and docs/ux-design.md (retrospective design-system reference), and points CLAUDE.md at them. docs/prd.md and docs/architecture.md are kept as BMAD wrote them; the legacy docs/stories/, docs/epics/, docs/qa/gates/ and .bmad-core/ stay in place as historical/traceability records, superseded but not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
44 lines
2.4 KiB
Markdown
44 lines
2.4 KiB
Markdown
---
|
|
id: 9-9
|
|
title: 9-9 Responsive Design Implementation
|
|
status: QA Review
|
|
date: 2026-09-27
|
|
parent: 9
|
|
---
|
|
|
|
## Description
|
|
|
|
As a user, I want the platform to work perfectly on all device sizes, So that I can use it on my phone, tablet, or desktop. - **Tailwind CSS 4:** Using CSS-first configuration with @theme directive - **Flux UI Free:** Leverage built-in responsive behavior for available components - **Alpine.js:** For mobile menu toggles and collapsible sections (included with Livewire). Full implementation history: docs/stories/story-9.9-responsive-design-implementation.md
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] Mobile: < 576px (single column, stacked layouts)
|
|
- [ ] Tablet: 576px - 991px (two columns where appropriate)
|
|
- [ ] Desktop: 992px - 1199px (full layouts with sidebars)
|
|
- [ ] Large Desktop: >= 1200px (max-width container: 1200px)
|
|
- [ ] Touch-friendly targets minimum 44px height/width for all interactive elements
|
|
- [ ] Font sizes remain readable (minimum 16px for body text to prevent iOS zoom)
|
|
- [ ] Single column layouts for all content sections
|
|
- [ ] Collapsible/accordion sections for long content
|
|
- [ ] Navigation collapses to hamburger menu
|
|
- [ ] Forms stack labels above inputs
|
|
- [ ] Cards display full-width
|
|
- [ ] Two-column grid layouts where appropriate (dashboard stats, post listings)
|
|
- [ ] Sidebar collapsible via toggle (not permanently visible)
|
|
- [ ] Tables may show reduced columns or scroll horizontally
|
|
- [ ] Calendar shows week view or scrollable month
|
|
- [ ] Full layouts with persistent sidebars
|
|
- [ ] Multi-column grids (3-4 columns for dashboard stats)
|
|
- [ ] Tables show all columns
|
|
- [ ] Calendar shows full month view
|
|
- [ ] Max container width: 1200px centered
|
|
- [ ] **Forms:** All forms (booking, login, user management) fully usable on mobile with proper input sizing
|
|
- [ ] **Calendar:** Booking calendar functional on mobile (touch-friendly date selection, scrollable)
|
|
- [ ] **Tables:** All data tables have horizontal scroll wrapper, pinned first column if needed
|
|
- [ ] **No horizontal scroll:** Page-level horizontal scroll must never occur on any viewport
|
|
- [ ] **Modals:** Modal dialogs responsive (full-screen on mobile, centered on desktop)
|
|
- [ ] **Charts:** Dashboard charts resize appropriately or stack on mobile
|
|
- [ ] All responsive layouts tested in both LTR (English) and RTL (Arabic)
|
|
- [ ] Sidebar collapses from correct side (start-0 not left-0)
|
|
- [ ] Horizontal scroll direction correct for RTL
|