Adrien
59 lines
2.6 KiB
Markdown
59 lines
2.6 KiB
Markdown
# Tasks: Mobile-Responsive UI
|
|
|
|
**Input**: Design documents from `/specs/006-mobile-responsive-ui/`
|
|
**Prerequisites**: plan.md ✅, spec.md ✅, research.md ✅, quickstart.md ✅
|
|
|
|
No foundational phase needed — all changes are isolated CSS additions within existing SFCs.
|
|
|
|
---
|
|
|
|
## Phase 1: User Story 1 - Sticky Navbar with Scrollable Links (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Navbar stays fixed at top; all links are reachable by horizontal scroll on mobile.
|
|
|
|
**Independent Test**: Open DevTools → iPhone SE (375px) → verify navbar is sticky and links scroll horizontally.
|
|
|
|
- [x] T001 [US1] Add `position: sticky; top: 0; z-index: 100` to `.navbar` in `frontend/src/App.vue`
|
|
- [x] T002 [US1] Add `@media (max-width: 768px)` block to `frontend/src/App.vue`: reduce navbar padding, make `.navbar-links` horizontally scrollable (`overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-shrink: 0`)
|
|
|
|
**Checkpoint**: Navbar is sticky and links are horizontally scrollable on 375px viewport.
|
|
|
|
---
|
|
|
|
## Phase 2: User Story 2 - Book Reader Fits Screen Width (Priority: P2)
|
|
|
|
**Goal**: Book reader content fills phone screen width without page-level horizontal overflow.
|
|
|
|
**Independent Test**: Open DevTools → iPhone SE → navigate to a book → verify no horizontal scrollbar, content fills width.
|
|
|
|
- [x] T003 [US2] Add `@media (max-width: 768px)` block to `frontend/src/views/BookReaderView.vue`: set `.chat-reader-split` to `flex-direction: column`, set `.reader-panel` to `width: 100%; min-width: unset; max-width: 100%`
|
|
|
|
**Checkpoint**: BookReaderView stacks vertically with no horizontal overflow on 375px viewport.
|
|
|
|
---
|
|
|
|
## Phase 3: User Story 3 - Login Form Near Top of Screen (Priority: P3)
|
|
|
|
**Goal**: Login card appears near top of viewport on mobile instead of vertically centered.
|
|
|
|
**Independent Test**: Open DevTools → iPhone SE → navigate to login → verify card top is within top 150px of viewport.
|
|
|
|
- [x] T004 [US3] Add `@media (max-width: 768px)` block to `frontend/src/views/LoginView.vue`: change `.login-wrapper` to `align-items: flex-start; padding-top: 2rem`
|
|
|
|
**Checkpoint**: Login card appears near top of screen on 375px viewport.
|
|
|
|
---
|
|
|
|
## Phase 4: Polish
|
|
|
|
- [x] T005 [P] Run `npm run lint` in `frontend/` and fix any lint errors (ESLint not configured — pre-existing, unrelated to this feature)
|
|
- [x] T006 [P] Verify `.main-content` padding is reduced on mobile in `frontend/src/App.vue` (covered in T002 media query block)
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order
|
|
|
|
- T001 → T002 (same file, sequential)
|
|
- T003, T004 independent of each other and of T001/T002 (different files)
|
|
- T005, T006 after all implementation tasks
|