Adrien
76 lines
3.4 KiB
Markdown
76 lines
3.4 KiB
Markdown
# Implementation Plan: Mobile-Responsive UI
|
|
|
|
**Branch**: `006-mobile-responsive-ui` | **Date**: 2026-04-10 | **Spec**: [spec.md](spec.md)
|
|
**Input**: Feature specification from `/specs/006-mobile-responsive-ui/spec.md`
|
|
|
|
**Note**: This template is filled in by the `/speckit.plan` command. See `.specify/templates/plan-template.md` for the execution workflow.
|
|
|
|
## Summary
|
|
|
|
Add CSS media queries to make the frontend usable on small screens (≤ 768px). Three targeted fixes:
|
|
1. Make the navbar sticky and its link bar horizontally scrollable
|
|
2. Prevent horizontal overflow in the book reader view
|
|
3. Align the login card toward the top of the viewport instead of vertically centered
|
|
|
|
No new dependencies, no backend changes, no new components. Pure CSS additions scoped to existing Vue SFCs.
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: TypeScript / Node 20 (frontend only)
|
|
**Primary Dependencies**: Vue 3.4, Vue Router 4.3, Pinia 2.1 — no changes
|
|
**Storage**: N/A (frontend-only change)
|
|
**Testing**: Manual browser testing at 375px viewport; `npm run lint` for TypeScript
|
|
**Target Platform**: Modern mobile browsers (iOS Safari, Chrome Android); desktop unchanged
|
|
**Project Type**: Web application (frontend client only for this feature)
|
|
**Performance Goals**: No regression — changes are CSS-only, zero runtime cost
|
|
**Constraints**: No new dependencies; no changes to desktop layout; no hamburger menu
|
|
**Scale/Scope**: 5 files touched (App.vue, LoginView.vue, BookReaderView.vue, possibly UploadView.vue, BookCard.vue)
|
|
|
|
## Constitution Check
|
|
|
|
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
|
|
|
| Principle | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| I. KISS | ✅ PASS | Pure CSS media queries — simplest viable solution. No new abstractions. |
|
|
| II. Easy to Change | ✅ PASS | Changes are scoped CSS within existing SFCs; easy to revert or extend. |
|
|
| III. Web-First Architecture | ✅ PASS | Frontend-only change; no API contract impact. |
|
|
| IV. Documentation as Architecture | ✅ PASS | No architectural change → README diagram unchanged. |
|
|
| Technology Constraints | ✅ PASS | Remains `backend/` + `frontend/`; no new deployable unit. |
|
|
|
|
**Verdict**: No violations. Complexity Tracking table not required.
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
specs/006-mobile-responsive-ui/
|
|
├── plan.md # This file
|
|
├── research.md # Phase 0 output
|
|
├── data-model.md # N/A (no data model changes)
|
|
├── quickstart.md # Phase 1 output
|
|
├── contracts/ # N/A (no API contract changes)
|
|
└── tasks.md # Phase 2 output (/speckit.tasks command)
|
|
```
|
|
|
|
### Source Code (repository root)
|
|
|
|
```text
|
|
frontend/
|
|
├── src/
|
|
│ ├── App.vue # Navbar sticky + link bar scroll
|
|
│ ├── views/
|
|
│ │ ├── LoginView.vue # Login card top-aligned on mobile
|
|
│ │ ├── BookReaderView.vue # Reader fits screen width on mobile
|
|
│ │ └── UploadView.vue # Book grid min-width reduction (if needed)
|
|
│ └── components/
|
|
│ └── BookCard.vue # Card min-width reduction (if needed)
|
|
```
|
|
|
|
**Structure Decision**: Option 2 (Web application) per constitution. This feature touches only `frontend/`; `backend/` is untouched.
|
|
|
|
## Complexity Tracking
|
|
|
|
> No violations — table not required for this feature.
|