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

docs(design): tablet columns, glyph pager, match switch, missing picture, Copy

Browse Source
This commit is contained in:
peter
2026-09-27 07:12:51 +02:00
parent 098b8dbe43
commit 3411265dc1
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+18
View File
@@ -93,6 +93,10 @@ style guide.
window: the same list sits beside a rail, in a split-screen tablet and in a zoomed-in browser. A window: the same list sits beside a rail, in a split-screen tablet and in a zoomed-in browser. A
line of facts (the download row's "Ready · MP4 · 18.9 MB · 1:11 · 1w ago") is one line cut at its line of facts (the download row's "Ready · MP4 · 18.9 MB · 1:11 · 1w ago") is one line cut at its
end, never a flex row that breaks its pieces apart. end, never a flex row that breaks its pieces apart.
- **A table gives its secondary columns back.** By the table's own width, as a row does: below 42rem
a column marked `narrowHidden` steps aside, below 64rem (a 1024 window) one marked `tabletHidden`
does, so the name keeps its room. The Channels table drops Prio, About and Length there (at 1024 the
name had 60 px); the row's "…" still sets the priority.
- **Players on touch (C3):** see [Players](#players). - **Players on touch (C3):** see [Players](#players).
## Tokens ## Tokens
@@ -213,6 +217,11 @@ Also in force:
Never a native `<select>` (lint-enforced). Its rung is the toolbar's, 28 with `text-xs`, so it lines up Never a native `<select>` (lint-enforced). Its rung is the toolbar's, 28 with `text-xs`, so it lines up
with the triggers and the pager's buttons; the 24 rung with the smallest type is only a side panel's with the triggers and the pager's buttons; the 24 rung with the smallest type is only a side panel's
captioned match toggle (S3g: the old small default had put a pager and a toolbar count on 10px type). captioned match toggle (S3g: the old small default had put a pager and a toolbar count on 10px type).
- **A multi-value filter's any/all switch** (tags, topics, languages, genres, collections, actors) is
`ui/MatchToggle`, on the panel right above its picker, from two picks on — never in the picker's
popover, where a closed picker hid that "all" was on. One wording: Match · Any / All. [Nielsen #1]
- **The pager** is four glyphs — first, previous, next, last — round the page box (`IconButton`s, their
names as the tooltip); no words, at any width.
- A single-select row of filter chips goes through `FilterChipGroup` (its options are `Chip`s). - A single-select row of filter chips goes through `FilterChipGroup` (its options are `Chip`s).
- A button that starts slow work shows `loading` (a spinner, `aria-busy`) and can't be pressed twice. - A button that starts slow work shows `loading` (a spinner, `aria-busy`) and can't be pressed twice.
[Nielsen #1] [Nielsen #1]
@@ -419,6 +428,10 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
text, spaced by the gap, no "·". text, spaced by the gap, no "·".
- **Browse tiles** (genres, playlists, collections) answer the pointer as a card does: the edge takes - **Browse tiles** (genres, playlists, collections) answer the pointer as a card does: the edge takes
the accent, the shadow lifts and the art zooms. the accent, the shadow lifts and the art zooms.
- **A missing picture says what the item is.** No picture at all (a link that failed before its
details, a poster that never came) shows a quiet glyph — a film, a note, a file — never an empty box,
which reads as "still loading". A download with no name yet is titled by its short link, once: no
channel line, no second link line.
- **Reading measure.** Prose (a synopsis, a biography, a channel's description) is capped at ~65 - **Reading measure.** Prose (a synopsis, a biography, a channel's description) is capped at ~65
characters a line (the `measure` utility) wherever its container can be wider. [WCAG 1.4.8] characters a line (the `measure` utility) wherever its container can be wider. [WCAG 1.4.8]
@@ -618,3 +631,8 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen #
| 2026-09-27 | Copy rule (S3g) | One name per feature (the rail may shorten it); four verbs for four meanings; sentence case with the app's places capitalised; "…" when a command asks first; one-sentence messages without a stop; curly quotes; dates relative in lists with the exact minute on hover, three absolute forms; units from Intl, short | Word-for-word names everywhere; the verbs as they were; all lower case; no "…"; always a stop; always absolute dates; long or compact units | The copy survey found 7 EN and 6 HU double names, 22 Delete against 27 Remove, five date shapes and three spellings of a minute; the owner picked every recommended option | | 2026-09-27 | Copy rule (S3g) | One name per feature (the rail may shorten it); four verbs for four meanings; sentence case with the app's places capitalised; "…" when a command asks first; one-sentence messages without a stop; curly quotes; dates relative in lists with the exact minute on hover, three absolute forms; units from Intl, short | Word-for-word names everywhere; the verbs as they were; all lower case; no "…"; always a stop; always absolute dates; long or compact units | The copy survey found 7 EN and 6 HU double names, 22 Delete against 27 Remove, five date shapes and three spellings of a minute; the owner picked every recommended option |
| 2026-09-27 | One glyph, one meaning (S4) | Play only for playback or resuming a paused transfer; Retry = `RefreshCw`; reset / revert = `RotateCcw` | Retry drawn with Play | The first UI-review run (Downloads) found a failed row whose Retry showed ▷ in the row and its menu | | 2026-09-27 | One glyph, one meaning (S4) | Play only for playback or resuming a paused transfer; Retry = `RefreshCw`; reset / revert = `RotateCcw` | Retry drawn with Play | The first UI-review run (Downloads) found a failed row whose Retry showed ▷ in the row and its menu |
| 2026-09-27 | Fjord kept | Fjord stays a fifth scheme beside Midnight; the trial wording goes | Fold it into Midnight; remove it | The owner lived with it and likes it; the vivid Midnight stays for those who want it. B2's own-hue rule still binds any new scheme | | 2026-09-27 | Fjord kept | Fjord stays a fifth scheme beside Midnight; the trial wording goes | Fold it into Midnight; remove it | The owner lived with it and likes it; the vivid Midnight stays for those who want it. B2's own-hue rule still binds any new scheme |
| 2026-09-27 | Tablet columns | A table hides `tabletHidden` columns below 64rem of its own width; Channels drops Prio, About, Length | Hide About only; give the name a bigger share | At 1024 the channel name had 60 px; the owner chose to drop all three there |
| 2026-09-27 | Glyph pager | First / previous / next / last as glyph buttons round the page box, names as tooltips | Words beside the arrows (hidden only on a phone) | The owner's call: the words widened the row; four arrows are the shared convention |
| 2026-09-27 | Match switch on the panel | `ui/MatchToggle` above the picker from two picks, everywhere; one wording (Any / All) | The picker's popover footer (Feed, Plex collection) | A closed picker hid an active "all"; six pickers had drawn it two ways |
| 2026-09-27 | Missing picture, bare link | A glyph of the kind for no picture; a download with no name is titled by its short link, once | An empty box; the URL as title, channel and link | The owner's picks 4A and 3A: an empty box read as loading, the URL showed three times |
| 2026-09-27 | Copy on a selection | Right-click on selected words keeps the browser's menu; no app Copy row | An app menu with Copy first | A real browser's menu has copy, search and translate; only the desktop pane's is thin |