ninja_hippo/arr-summary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rebuild request rows to match indexer rows

Browse source 
The Requests and Indexers cards sit side by side but read as two
unrelated lists: requests led with a type badge, indexers with a status
dot, and the rows drifted out of alignment once the share bar landed.

Give a request row the same anatomy as an indexer row — status dot,
title over a dimmed detail line, badge on the right — folding the type
into the detail line and mapping request status onto the existing
dot colours (a new .warn light covers pending). Both row types now
share a --row-h floor so the two cards line up row for row; the share
bar's top margin is trimmed so an indexer row reaches that height
without overshooting it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-26 23:02:36 -07:00
parent 909a0b568c
commit bd292fbe32
3 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
static/css/base.css
View file

@ -48,6 +48,7 @@
--radius: 10px;
--radius-sm: 7px;
--tap: 44px; /* minimum touch target */
--row-h: 4.25rem; /* paired Requests / Indexers row height */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

15
static/css/dashboard.css
View file

@ -71,6 +71,7 @@ header {
}
.status-light.up { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); }
.status-light.down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.status-light.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.header-right {
order: 2;
@ -442,6 +443,7 @@ dd.is-accent { color: var(--accent); }
display: flex;
align-items: center;
gap: 0.7rem;
min-height: var(--row-h);
padding: 0.6rem 0.7rem;
background: var(--surface-2);
border: 1px solid var(--border);
@ -458,9 +460,11 @@ dd.is-accent { color: var(--accent); }
.indexer-sub { font-size: var(--fs-xs); color: var(--text-3); }
.indexer-sub .proto { text-transform: capitalize; }
.indexer-sub:empty::before { content: "Indexer"; }
/* Share of grabs, scaled to the busiest indexer (see dashboard.html) */
/* Share of grabs, scaled to the busiest indexer (see dashboard.html).
The margin is trimmed so a bar-carrying row still fits inside --row-h
and stays flush with the request rows beside it. */
.share-bar {
margin-top: 0.35rem;
margin-top: 0.3rem;
height: 4px;
border-radius: 100px;
background: var(--surface);
@ -482,17 +486,24 @@ dd.is-accent { color: var(--accent); }
}
/* ── Requests (Ombi) ────────────────────────────────── */
/* Request rows are the same object as an indexer row — same geometry and
the same dot/title/sub/badge anatomy — so the two cards read across as
one pair. --row-h keeps them aligned line-for-line; the indexer rows
reach it naturally once their share bar is in. */
.req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.req-item.is-hidden { display: none; }
.req-item {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: var(--row-h);
padding: 0.6rem 0.7rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.req-item .status-light { width: 9px; height: 9px; flex-shrink: 0; }
.req-type { text-transform: capitalize; }
.badge {
font-size: var(--fs-xs);
font-weight: 600;