Adrien
29 lines
1.4 KiB
Markdown
29 lines
1.4 KiB
Markdown
# Quickstart: Mobile-Responsive UI
|
||
|
||
**Feature**: 006-mobile-responsive-ui
|
||
|
||
## What this feature does
|
||
|
||
Adds CSS media queries to 2–3 Vue SFCs so the app is usable on phone screens (≤ 768px):
|
||
- Navbar sticks to top; link bar scrolls horizontally
|
||
- Book reader stacks vertically (no horizontal overflow)
|
||
- Login card appears near the top of the screen
|
||
|
||
## Files to change
|
||
|
||
| File | Change |
|
||
|------|--------|
|
||
| `frontend/src/App.vue` | Add `position: sticky; top: 0; z-index: 100` to `.navbar`. Add `@media (max-width: 768px)` block: make `.navbar-links` horizontally scrollable, reduce `.navbar` padding |
|
||
| `frontend/src/views/LoginView.vue` | Add `@media (max-width: 768px)`: change `.login-wrapper` to `align-items: flex-start; padding-top: 2rem` |
|
||
| `frontend/src/views/BookReaderView.vue` | Add `@media (max-width: 768px)`: set `.chat-reader-split` to `flex-direction: column`, remove fixed width on `.reader-panel`, set `.reader-panel` to `width: 100%` |
|
||
|
||
## How to test
|
||
|
||
1. Open browser DevTools → toggle device toolbar → select "iPhone SE" (375 × 667)
|
||
2. Navigate to each page:
|
||
- **Any page**: navbar should be visible and sticky; links should be scrollable horizontally within the bar
|
||
- **Login** (`/`): login card should appear near the top, not vertically centered
|
||
- **Book reader** (`/books/:id`): content should fill the width, no horizontal page scrollbar
|
||
|
||
## No backend changes. No new dependencies. No new files.
|