feat(ui): align peer count chip with design reference
Mirror the design-doc update in the actual download progress component so the GUI matches the trimmed chip. Previously the large progress panel rendered `[icon] from N peer(s)` inline; now it renders just `[icon] N`, with the full "Downloading from N peers on the LAN" sentence retained as the `title` tooltip for discoverability. Changes: - `DownloadProgress.tsx` (lg variant): drop the "from" / unit text from the inline span, keeping only the count. `peerUnit` stays in scope because the tooltip still needs singular/plural. - `launcher.css`: collapse `.dl-peers` and `.dl-peers strong` into a single rule that puts the t-1 colour, 600 weight and tabular-nums directly on the chip (the inner `<strong>` no longer exists). Gap drops from 5px to 4px to match the tighter icon+number layout. - Container queries: peers drops at <=240px and ETA drops at <=320px, matching the new thresholds in the design reference. The narrower chip simply fits in smaller modals, so the old 300/380 cutoffs were hiding stats that would have rendered fine. Test Plan - `just frontend-test` (passes) - `just run`, start a download, confirm the chip reads `[icon] N`, hover shows the tooltip, and narrowing the window collapses ETA before peers at the new breakpoints.
This commit is contained in:
@@ -86,9 +86,7 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
|
|||||||
title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
|
title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
|
||||||
>
|
>
|
||||||
<Icon.users />
|
<Icon.users />
|
||||||
<span>
|
<span>{stats.activePeerCount}</span>
|
||||||
from <strong>{stats.activePeerCount}</strong> {peerUnit}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1048,14 +1048,11 @@
|
|||||||
.dl-lg-secondary .dl-peers {
|
.dl-lg-secondary .dl-peers {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 4px;
|
||||||
color: var(--t-2);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.dl-lg-secondary .dl-peers strong {
|
|
||||||
color: var(--t-1);
|
color: var(--t-1);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.dl-lg-secondary .dl-peers svg {
|
.dl-lg-secondary .dl-peers svg {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
@@ -1069,13 +1066,13 @@
|
|||||||
.dl-sep {
|
.dl-sep {
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
@container (max-width: 380px) {
|
@container (max-width: 320px) {
|
||||||
.dl-lg-secondary .dl-eta,
|
.dl-lg-secondary .dl-eta,
|
||||||
.dl-lg-secondary .dl-sep-eta {
|
.dl-lg-secondary .dl-sep-eta {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@container (max-width: 300px) {
|
@container (max-width: 240px) {
|
||||||
.dl-lg-secondary .dl-peers,
|
.dl-lg-secondary .dl-peers,
|
||||||
.dl-lg-secondary .dl-sep-peers {
|
.dl-lg-secondary .dl-sep-peers {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user