feat(examples): polish workout phone UI
Give the workout exemplar a durable gym-floor command-slate direction, serve focused CSS, keep the first viewport centered on one action, and extend the HTTP E2E to verify stylesheet delivery. req: examples/001 req: local/001 req: local/003 req: host/002
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
# Workout exemplar design
|
||||
|
||||
Direction: gym-floor command slate — one heavy next action, thumb-safe command rail, and an inspectable private ledger. req: examples/001
|
||||
|
||||
Preserve:
|
||||
- First viewport shows one obvious action path before logs or host details.
|
||||
- Controls stay large enough for sweaty one-handed use; forms remain secondary to tap actions.
|
||||
- Local truth is visible as a ledger/export, not hidden behind dashboard metrics. req: local/001 req: local/003
|
||||
- Host capabilities read as a boundary surface, not as app state or a native framework. req: host/002
|
||||
|
||||
Avoid:
|
||||
- Dashboard/KPI cards, fake charts, bottom-nav app chrome, glass/gradient hero filler, and hidden client state.
|
||||
- Equal-weight action grids that make “what now?” ambiguous.
|
||||
- Styling that requires handwritten selector UI JavaScript.
|
||||
|
||||
Accessibility and responsive boundaries:
|
||||
- Keep semantic buttons/forms/labels and visible focus rings.
|
||||
- Minimum tap target is defined by `--tap`; do not reduce it for density.
|
||||
- Narrow screens are the primary material; wide screens may split the command slate and ledger but must not hide the current action.
|
||||
Reference in New Issue
Block a user