curo1305andClaude Sonnet 4.6
123ae5b29b
Moves phases 08–11 execution artifacts from .planning/phases/ to .planning/milestones/v0.2-phases/ to keep .planning/phases/ clean for the next milestone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
---
|
|
phase: 11-visual-design-responsive-layout-cleanup
|
|
plan: 3
|
|
type: execute
|
|
wave: 2
|
|
depends_on: [11-02]
|
|
requirements: [RESP-01, RESP-02, RESP-03, RESP-05]
|
|
files_modified:
|
|
- frontend/src/App.vue
|
|
- frontend/src/layouts/AdminLayout.vue
|
|
- frontend/src/components/layout/AppSidebar.vue
|
|
- frontend/src/components/admin/AdminSidebar.vue
|
|
- frontend/src/components/storage/StorageBrowser.vue
|
|
- frontend/src/__tests__/keyboard.test.js
|
|
- frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
|
|
autonomous: true
|
|
---
|
|
|
|
# Plan 11-03 — Responsive Shells & Storage Rows
|
|
|
|
## Objective
|
|
|
|
Make both user and admin layouts usable below `lg`, and make storage rows fit smaller viewports without losing core actions.
|
|
|
|
## Tasks
|
|
|
|
1. Use layout-local drawer refs, not a new Pinia store:
|
|
- `App.vue` owns user drawer state.
|
|
- `AdminLayout.vue` owns admin drawer state.
|
|
- Watch route changes in each layout root and close the drawer after navigation.
|
|
- Do not put drawer state in `AppSidebar.vue` or `AdminSidebar.vue`.
|
|
2. Add a mobile-only header with a hamburger button for the user layout.
|
|
3. Hide `AppSidebar` below `lg`; open it in a slide-in overlay drawer with backdrop tap, route-change close, and `translate-x-0` / `-translate-x-full` transition.
|
|
4. Apply the same responsive shell behavior to `AdminLayout` and `AdminSidebar`.
|
|
5. Update `StorageBrowser` row/grid classes so:
|
|
- Size column hides below `md`
|
|
- Modified column hides below `sm`
|
|
- icon, name, and actions remain visible
|
|
- grid templates do not reserve hidden column widths on mobile
|
|
6. Ensure inline icon action buttons have at least `36px` touch targets below `md`.
|
|
7. Add or update tests for drawer open/close, route-change close, admin drawer behavior, responsive column classes, and touch target classes.
|
|
8. Verify with browser screenshots or Playwright at 375px, 768px, 1024px, and desktop width.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- User sidebar is hidden below 1024px and accessible through a hamburger drawer.
|
|
- Admin sidebar has matching mobile behavior.
|
|
- Drawer closes on backdrop tap and navigation tap.
|
|
- Storage rows satisfy RESP-02 without horizontal overflow at 375px.
|
|
- Icon actions satisfy RESP-03.
|
|
- Drawer state is owned only by `App.vue` and `AdminLayout.vue`.
|
|
- Frontend tests and build pass.
|