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>
2.4 KiB
2.4 KiB
id, title, status, date, parent
| id | title | status | date | parent |
|---|---|---|---|---|
| 9-9 | 9-9 Responsive Design Implementation | QA Review | 2026-09-27 | 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