From dc5206f9d33e3a410cb5f0954b85a68a59526912 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 27 Sep 2026 02:12:54 +0200 Subject: [PATCH] docs(design): C3 + C5 as built, and its log row (E28 S3f2) --- docs/DESIGN.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/DESIGN.md b/docs/DESIGN.md index bc6e28c6..4fb1e656 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -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 `