From b96e8c5747088fb7f8c3cbca4206b5fb9ad811da Mon Sep 17 00:00:00 2001 From: ddidderr Date: Thu, 21 May 2026 00:40:54 +0200 Subject: [PATCH] docs(design): trim peer count chip to icon + bare number MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The download progress "peers" chip previously rendered as `[icon] from N peers` — a full mini-sentence sitting between the speed and ETA stats. With four groups already separated by middots, the extra preposition and unit made the row read as prose rather than a stat strip, and the singular/plural switch added a second source of layout jitter on top of the digit-width change. Update the design reference (README, components.jsx, styles.css) so the chip shows just the users glyph and the count, matching the visual weight of the other stat groups. The full sentence ("Downloading from N peers on the LAN") moves to the `title` tooltip, which keeps the affordance discoverable without spending row width on it. The count adopts `var(--t-1)` + 600 + tabular-nums directly on `.dl-peers` (no inner `` needed), so the chip is a single span. Also tighten the container-query breakpoints. Removing the prose makes the chip much narrower, so the previous 300px cutoff for hiding peers and 380px cutoff for hiding ETA were over-eager — both stats now fit comfortably in narrower modals. Drop them to 240px (peers) and 320px (ETA). The pct/cancel column still never collapses. Test Plan - Visual review of the design reference HTML at component widths 240px / 320px / 380px to confirm peers and ETA drop at the new thresholds rather than the old ones. - Confirm the chip's tooltip still spells out the full sentence. --- design/README.md | 6 +++--- design/design_reference/components.jsx | 2 +- design/design_reference/styles.css | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/design/README.md b/design/README.md index 6d75ebf..6a9e5cf 100644 --- a/design/README.md +++ b/design/README.md @@ -254,7 +254,7 @@ grid-template-areas: - **Secondary row** (`.dl-lg-secondary`, bottom-left) — the live stats. 12px, four groups separated by `·` (0.45 opacity): 1. `11.4 GB / 35 GB` (`var(--t-1)` strong + `var(--t-2)` rest) 2. `47.6 MB/s` (`var(--t-1)`) - 3. `[users-icon] from 5 peers` — `.dl-peers`, inline-flex with 5px gap, icon at 0.7 opacity, count bold + tabular-nums in `var(--t-1)`, rest in `var(--t-2)`. Singular/plural switches on `peers === 1`. Hidden entirely when `game.peers` is falsy. Communicates that this is a LAN swarm transfer, not a single-source pull. + 3. `[users-icon] 5` — `.dl-peers`, inline-flex with 4px gap, icon at 0.7 opacity, count in `var(--t-1)` 600 tabular-nums. Hidden entirely when `game.peers` is falsy. Communicates this is a LAN swarm transfer; the full sentence lives in the `title` tooltip. 4. `8 min left` (`var(--t-2)`) - **pct column** — large percentage, 20px / 700, `letter-spacing: -0.01em`, `var(--t-1)`. `%` glyph at 12px / 600 / 0.55 opacity. - **cancel column** — 28×28 square, `1px solid var(--bd-2)`, `border-radius: 6px`, X icon. Hover: bg `rgba(239,68,68,0.12)`, border `rgba(239,68,68,0.40)`, text `#fca5a5`. Cancelling reverts the game to its prior state (`local` if any data was kept, `none` otherwise) — dev decides the underlying behavior. @@ -262,8 +262,8 @@ grid-template-areas: **Graceful degradation in narrow modals:** ```css -@container (max-width: 380px) { .dl-lg-secondary .dl-eta, .dl-lg-secondary .dl-sep-eta { display: none; } } -@container (max-width: 300px) { .dl-lg-secondary .dl-peers, .dl-lg-secondary .dl-sep-peers { display: none; } } +@container (max-width: 320px) { .dl-lg-secondary .dl-eta, .dl-lg-secondary .dl-sep-eta { display: none; } } +@container (max-width: 240px) { .dl-lg-secondary .dl-peers, .dl-lg-secondary .dl-sep-peers { display: none; } } ``` ETA drops first, then peers; bytes + speed always stay (they're the actionable numbers). The pct/cancel column never collapses. diff --git a/design/design_reference/components.jsx b/design/design_reference/components.jsx index 647426b..b09162f 100644 --- a/design/design_reference/components.jsx +++ b/design/design_reference/components.jsx @@ -164,7 +164,7 @@ function DownloadProgress({ game, accent, size = 'md', full = false }) { · - from {game.peers} {game.peers === 1 ? 'peer' : 'peers'} + {game.peers} )} diff --git a/design/design_reference/styles.css b/design/design_reference/styles.css index 059d97b..582910c 100644 --- a/design/design_reference/styles.css +++ b/design/design_reference/styles.css @@ -785,21 +785,21 @@ .dl-lg-secondary .dl-bytes .dl-of { color: var(--t-2); font-weight: 500; } .dl-lg-secondary .dl-speed { color: var(--t-1); font-weight: 600; white-space: nowrap; } .dl-lg-secondary .dl-peers { - display: inline-flex; align-items: center; gap: 5px; - color: var(--t-2); white-space: nowrap; + display: inline-flex; align-items: center; gap: 4px; + color: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; + white-space: nowrap; } -.dl-lg-secondary .dl-peers strong { color: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; } .dl-lg-secondary .dl-peers svg { opacity: 0.7; } .dl-lg-secondary .dl-eta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dl-sep { opacity: 0.45; } /* Gracefully drop the ETA when the modal is narrow */ -@container (max-width: 380px) { +@container (max-width: 320px) { .dl-lg-secondary .dl-eta, .dl-lg-secondary .dl-sep-eta { display: none; } } /* Even narrower: drop peers too, keep size + speed */ -@container (max-width: 300px) { +@container (max-width: 240px) { .dl-lg-secondary .dl-peers, .dl-lg-secondary .dl-sep-peers { display: none; } }