peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(design): C3 + C5 as built, and its log row (E28 S3f2)

Browse Source
This commit is contained in:
peter
2026-09-27 02:12:54 +02:00
parent 89e65ca331
commit dc5206f9d3
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+10 -5
View File
@@ -129,7 +129,7 @@ The chosen rendering of each rule is in the lab under "Decided". The primitives
picture, a round, dark translucent button, readable on any thumbnail. Round means "floats over something":
on media, or the one floating button over the page (back to top, a 48 glass circle, the FAB); a button
inside a pill field is round too, so the radii nest. A text
button on a picture is a pill (the card's Resume in the accent, From the start dark translucent, C5), and
button on a picture is a pill (the card's Continue in the accent, Restart dark translucent, C5), and
the one 48px glyph is the Play in the middle of a not-started card (C5).
- **Touch (A3):** on a coarse pointer every control primitive (`Button`, `SegmentedToggle`, `FilterSelect`,
`Tabs`, `Switch`, chips, the nav rail) grows to 2.75rem (44px) through one token, as a real box. Mouse
@@ -417,7 +417,7 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
- **Motion:** 150–300ms micro-interactions, transform/opacity only; `prefers-reduced-motion` is respected.
[WCAG 2.3.3]
## Players — _Decided_ (C3, C5)
## Players — _Decided_ (C3, C5, built in S3f)
- **A tap on the Plex video only shows or hides the controls** (C3); play/pause is the button. The mouse keeps
click-to-pause. Measured live: before this, a tap with the bar hidden both revealed it and paused. [Nielsen #3]
@@ -439,9 +439,13 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
- **±10 s:** the keyboard keeps ← / →; on touch a double-tap on the left or right third of the picture skips
∓10 s, while a single tap still only shows the controls. Touch never loses a function. [WCAG 2.5.1]
- The row: play/pause, Back, Next, mute, the time, audio & subtitles, a fixed **⋯** (player settings, media
info, stats, keyboard shortcuts, download the original file), fullscreen.
- **Restarting lives on the media card** (C5): not started → Play; started → **Resume** (primary) + **From
the start**. On touch a tap resumes and the card's "…" menu has From the start.
info, stats, keyboard shortcuts, download the original file), fullscreen. The volume slider is
mouse only: a tablet's volume is its buttons.
- **Restarting lives on the media card** (C5): not started → Play; started → **Continue** (primary) +
**Restart**, the video card's own pair and words (`MediaResumeButtons`, one component for every card and
Home's hero). A poster stacks the pair; a landscape picture sets it side by side, icon-only on a small one.
On touch a tap continues and the card's "…" has "Play from the beginning" under its Play row. The restart
applies to the item the player opened on (`fromStart`); every item it moves on to resumes.
- **The YouTube modal:** its chrome uses the `Button` rungs (44 on touch), the side arrows stay inside the
screen, and the description opens from an ⓘ button, because a hover popover never opens on a tap (measured
live). [WCAG 1.4.13]
@@ -548,3 +552,4 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
| 2026-09-24 | Chip family | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/" | Five chip geometries in five files | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide |
| 2026-09-24 | Button families | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5) | Every button hand-painted | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it |
| 2026-09-27 | C4 as built | `initialFocus` required on every `Modal`; the commit row in `ModalFooter`, portalled under the body from any depth; the fades driven by the body's scroll timeline; `interactive-widget=resizes-content` | An optional prop defaulting to the ✕; a `footer` prop (the issue composer's buttons live three components down); always-on fades | A default is how 21 dialogs came to open on the ✕; lifting the composer's state to reach a prop is the larger change; a resting fade dimmed the first line |
| 2026-09-27 | C3 + C5 as built | A tap toggles the bar through `pointerType` from `pointerdown`; a double-tap takes back its first tap's toggle; the card's pair is the video card's `MediaResumeButtons` (Continue / Restart), a sibling over the picture; the YT description is an ⓘ click popover | A delayed single tap (wait out the double-tap window); new "Resume / From the start" words for Plex; the pair inside the picture's button | A delayed tap feels dead; one media card says one pair of words; a button inside a button is invalid and the hover row already sits beside the picture |