Giorgio Gilestro
4c1793e4e9
Captures the decisions from the brainstorm: phones-only (≤480px), all views in scope, right-side hamburger drawer, per-file @media blocks, hide secondary indicator columns. User opted to iterate on the coded product rather than running through writing-plans; spec exists so the rationale survives the session.
88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# Mobile responsiveness — design
|
|
|
|
**Status:** approved 2026-05-28 (user opted to skip the implementation-plan
|
|
ceremony and iterate on the coded product instead).
|
|
**Scope:** all views, single ≤480px breakpoint, incremental media-query approach.
|
|
|
|
## Decisions captured
|
|
|
|
1. **Target device:** phones only. Single `@media (max-width: 480px)` breakpoint.
|
|
Tablets and small laptops keep the existing desktop layout.
|
|
2. **Scope:** every template (auth, public, app, dashboard, log, news, settings).
|
|
3. **Mobile topbar pattern:** hamburger drawer, **side-slide from the right**.
|
|
4. **Indicator table:** hide secondary columns on phones (`ccy`, `1y`, `anchor`,
|
|
`as_of`); keep symbol, price, 1d, 1m.
|
|
5. **CSS organisation:** per-file `@media` block at the bottom of each CSS file —
|
|
extends the pattern already in `layout.css`, `log-chat.css`, `news.css`,
|
|
`portfolio.css`, `public.css`. No central `mobile.css`.
|
|
|
|
## Architecture
|
|
|
|
```
|
|
tokens.css — no mobile rules
|
|
layout.css — drawer geometry + topbar mobile layout
|
|
panels.css — header padding tightens
|
|
dashboard.css — group tabs scroll, indicator table column-hiding
|
|
portfolio.css — overall grid 2-col, composer textarea full-width, action wrap
|
|
log-chat.css — body padding, bubble width
|
|
auth.css — card padding
|
|
settings.css — form rows stack
|
|
news.css — pill wrap, source under headline
|
|
public.css — tighten existing 520/560 rules, hero typography clamp
|
|
```
|
|
|
|
Two small additions to `base.html`:
|
|
- A hamburger button in `.app-header` (hidden on desktop via `display: none`,
|
|
shown at ≤480px).
|
|
- ~20 lines of vanilla JS to toggle `body.drawer-open` plus a backdrop element.
|
|
Tap-backdrop, ESC, and swipe-right-on-drawer all close.
|
|
|
|
## Hamburger drawer (right-side)
|
|
|
|
- `position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 320px)`
|
|
- Transform animation: `translateX(100%) → translateX(0)`, `180ms ease-out`
|
|
- Backdrop: `rgba(0,0,0,0.4)`, fades in over `120ms`
|
|
- Existing nav + `.header-right` widgets get wrapped in `.mobile-drawer` which
|
|
is `display: contents` on desktop (zero layout effect) and the fixed slide-out
|
|
panel on mobile.
|
|
- The existing `.user-menu` dropdown chip hides on mobile; its links surface
|
|
flat inside the drawer.
|
|
|
|
## Per-view rules
|
|
|
|
**Dashboard.** Group-tabs `overflow-x: auto`, no-wrap. Indicator table hides
|
|
`Ccy / 1y / anchor / as_of` columns. Aggregate-read summary header tightens.
|
|
|
|
**Portfolio.** `.pf-overall__grid` collapses to 2 columns. Composer textarea
|
|
becomes full-width. `.pf-actions` buttons wrap to two rows instead of squishing.
|
|
|
|
**Log + chat.** Body padding `16px → 10px`. Chat bubbles `max-width: 100%`,
|
|
user bubble loses right margin so it reaches the screen edge.
|
|
|
|
**News.** Tag pills flex-wrap. Source + timestamp move under headline.
|
|
Shift-click hint hides (touch users get long-press equivalent).
|
|
|
|
**Settings.** Form rows stack — label above input. Two-column import picker
|
|
becomes single column. Digest preferences keep their layout.
|
|
|
|
**Auth.** Card padding `28px 26px → 20px 18px`. Width already fluid.
|
|
|
|
**Public pages.** Audit existing 520/560 breakpoints; tighten hero typography
|
|
with `clamp()` so it scales down for small phones.
|
|
|
|
## Testing
|
|
|
|
- No Python tests affected — this is pure CSS + a single template tweak.
|
|
Existing 336-pass suite stays green.
|
|
- Manual verification on the user's phone post-deploy. (User cannot reach
|
|
localhost on the dev host, so visual companion was abandoned mid-brainstorm
|
|
in favour of ASCII previews; same constraint means no local browser smoke
|
|
test from the assistant side either — user iterates on the deployed site.)
|
|
|
|
## Out of scope
|
|
|
|
- Tablet / small-laptop breakpoints. Single ≤480 only.
|
|
- Touch gestures beyond drawer swipe-right-to-close.
|
|
- Mobile-specific reordering of dashboard panels (existing collapse order
|
|
is preserved).
|
|
- Visual companion server work (host unreachable from user's browser).
|