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

Match Ombi's Show more button to the request pill height

Browse source 
The button used the default 38px .show-more height, shorter than the
68px (--row-h) request pills above it, so it read as a smaller
tacked-on control rather than one more row in the list. Scoped to a
new .show-more-row modifier rather than changing .show-more globally —
the Discover cards' Show more buttons sit under much taller RT items
and are correctly compact at 38px.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-27 06:19:41 -07:00
parent 4b56f1fba9
commit 5045316fa5
2 changed files with 75 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

33
static/css/dashboard.css
View file

@ -433,6 +433,9 @@ dd.is-accent { color: var(--accent); }
width: 100%;
min-height: 38px;
}
/* Sits below the request pills, which use --row-h — match it so the
button reads as one more row rather than a shorter tacked-on control. */
.show-more.show-more-row { min-height: var(--row-h); }
/* ── Indexers ───────────────────────────────────────── */
/* One indexer per line, built to the same rhythm as the Ombi request rows
@ -529,6 +532,36 @@ dd.is-accent { color: var(--accent); }
}
.req-sub { font-size: var(--fs-xs); color: var(--text-3); }
/* ── Storage — per-disk breakdown ──────────────────────── */
/* Same row anatomy as indexer/request rows: name/sub on the left, a status
badge on the right. Data + cache disks get a usage meter; parity disks
(no filesystem) are rendered compact — name and temp only. */
.disk-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.85rem; }
.disk-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);
min-width: 0;
}
.disk-info { min-width: 0; flex: 1; }
.disk-name {
font-size: var(--fs-sm); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disk-sub { font-size: var(--fs-xs); color: var(--text-3); }
.disk-meter.meter { margin-top: 0.4rem; height: 4px; }
.disk-list-compact { margin-top: 0.5rem; }
.disk-item-compact { justify-content: space-between; padding: 0.5rem 0.7rem; min-height: auto; }
.disk-item-compact .disk-name { flex: 1; }
.badge.temp-ok { background: var(--ok-dim); color: var(--ok); }
.badge.temp-warn { background: var(--warn-dim); color: var(--warn); }
.badge.temp-danger { background: var(--danger-dim); color: var(--danger); }
/* ── Insights top lists ─────────────────────────────── */
.top-list { display: flex; flex-direction: column; gap: 0.4rem; }
.top-item {

43
templates/dashboard.html
View file

@ -170,6 +170,47 @@
{% if unraid.source == "local" %}
<p class="empty" style="margin-bottom:0;">Container disk usage ({{ unraid.mount }}). Set <code>UNRAID_API_KEY</code> for full array stats.</p>
{% endif %}
{% if unraid.disks or unraid.caches %}
<div class="disk-list">
{% for dk in unraid.disks + unraid.caches %}
{% set dpct = dk.used_pct %}
<div class="disk-item">
<div class="disk-info">
<div class="disk-name" title="{{ dk.device }}">{{ dk.name }}</div>
<div class="disk-sub">{{ dk.used }} of {{ dk.total }}</div>
<div class="meter disk-meter">
<div class="meter-fill {% if dpct > 85 %}danger{% elif dpct > 70 %}warn{% endif %}"
style="width: {{ dpct }}%;"
role="progressbar" aria-valuenow="{{ dpct }}" aria-valuemin="0" aria-valuemax="100"
aria-label="{{ dk.name }} usage"></div>
</div>
</div>
{% if dk.spinning == false %}
<span class="badge idle">Standby</span>
{% elif dk.temp is not none %}
<span class="badge temp-{% if dk.temp >= 55 %}danger{% elif dk.temp >= 45 %}warn{% else %}ok{% endif %}">{{ dk.temp }}&deg;C</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if unraid.parities %}
<div class="disk-list disk-list-compact">
{% for dk in unraid.parities %}
<div class="disk-item disk-item-compact">
<div class="disk-name" title="{{ dk.device }}">{{ dk.name }}</div>
{% if dk.spinning == false %}
<span class="badge idle">Standby</span>
{% elif dk.temp is not none %}
<span class="badge temp-{% if dk.temp >= 55 %}danger{% elif dk.temp >= 45 %}warn{% else %}ok{% endif %}">{{ dk.temp }}&deg;C</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% else %}
{{ service_error("Unraid", unraid.error) }}
{% endif %}
@ -362,7 +403,7 @@
{% endfor %}
</div>
{% if ombi.recent | length > 5 %}
<button class="btn btn-quiet show-more" onclick="toggleMore(this, 'req-list')"
<button class="btn btn-quiet show-more show-more-row" onclick="toggleMore(this, 'req-list')"
aria-expanded="false">Show {{ ombi.recent | length - 5 }} more</button>
{% endif %}
{% else %}