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

Move the service pills out of the header into a Status section
All checks were successful
Deploy / deploy (push) Successful in 22s
Details

Browse source 
The pills occupied a second full-width row of the header at every width,
which is a lot of permanent chrome for something you glance at. They now
open <main> as their own "Status" section, directly above Right now —
where you'd look for them, and consistent with every other band on the
page carrying a heading.

The header drops to a single row (brand left, clock and settings right),
so it no longer needs flex-wrap or the order: 1/2/3 shuffle that kept
the pill row beneath the brand. Pills go to var(--tap) height now
they're content rather than header furniture, and left-align with every
other section instead of centring.

Behaviour is unchanged: the pills keep their svc-<key> ids, so the
polling in dashboard.js needed no edit, and they still wrap rather than
scroll so no service is ever hidden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-27 07:59:26 -07:00
parent f572d95bd0
commit 377524c037
2 changed files with 35 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

37
templates/dashboard.html
View file

@ -58,21 +58,6 @@
<h1>Media Centre</h1>
</div>
<nav class="svc-strip" aria-label="Service status">
{{ svc_pill('sonarr', 'Sonarr', service_urls.sonarr, sonarr.status == 'ok',
(sonarr.total_series ~ ' series') if sonarr.status == 'ok' else 'offline') }}
{{ svc_pill('radarr', 'Radarr', service_urls.radarr, radarr.status == 'ok',
(radarr.total_movies ~ ' movies') if radarr.status == 'ok' else 'offline') }}
{{ svc_pill('prowlarr', 'Prowlarr', service_urls.prowlarr, prowlarr.status == 'ok',
(prowlarr.up_count ~ '/' ~ prowlarr.total ~ ' up') if prowlarr.status == 'ok' else 'offline') }}
{{ svc_pill('sabnzbd', 'SABnzbd', service_urls.sabnzbd, sabnzbd.status == 'ok',
sabnzbd.speed if sabnzbd.status == 'ok' else 'offline') }}
{{ svc_pill('tautulli', 'Tautulli', service_urls.tautulli, tautulli.status == 'ok',
((tautulli.active_streams ~ ' streaming') if tautulli.active_streams > 0 else '0 streams') if tautulli.status == 'ok' else 'offline') }}
{{ svc_pill('ombi', 'Ombi', service_urls.ombi, ombi.status == 'ok',
(ombi.total_pending ~ ' pending') if ombi.status == 'ok' else 'offline') }}
</nav>
<div class="header-right">
<div class="header-clock" id="header-clock">—</div>
<a href="{{ url_for('settings_page') }}" class="icon-btn" aria-label="Settings">
@ -83,6 +68,28 @@
<main>
<!-- ══ Status — is everything reachable? ══ -->
<section class="section" aria-labelledby="h-status">
<h2 id="h-status">Status</h2>
{# Every service stays visible at every width — these wrap onto more
rows rather than scrolling or truncating. A hidden pill is a service
whose status you can't see. #}
<nav class="svc-strip" aria-label="Service status">
{{ svc_pill('sonarr', 'Sonarr', service_urls.sonarr, sonarr.status == 'ok',
(sonarr.total_series ~ ' series') if sonarr.status == 'ok' else 'offline') }}
{{ svc_pill('radarr', 'Radarr', service_urls.radarr, radarr.status == 'ok',
(radarr.total_movies ~ ' movies') if radarr.status == 'ok' else 'offline') }}
{{ svc_pill('prowlarr', 'Prowlarr', service_urls.prowlarr, prowlarr.status == 'ok',
(prowlarr.up_count ~ '/' ~ prowlarr.total ~ ' up') if prowlarr.status == 'ok' else 'offline') }}
{{ svc_pill('sabnzbd', 'SABnzbd', service_urls.sabnzbd, sabnzbd.status == 'ok',
sabnzbd.speed if sabnzbd.status == 'ok' else 'offline') }}
{{ svc_pill('tautulli', 'Tautulli', service_urls.tautulli, tautulli.status == 'ok',
((tautulli.active_streams ~ ' streaming') if tautulli.active_streams > 0 else '0 streams') if tautulli.status == 'ok' else 'offline') }}
{{ svc_pill('ombi', 'Ombi', service_urls.ombi, ombi.status == 'ok',
(ombi.total_pending ~ ' pending') if ombi.status == 'ok' else 'offline') }}
</nav>
</section>
<!-- ══ Right now — the time-sensitive row, above the fold ══ -->
<section class="section hero" aria-labelledby="h-now">
<h2 id="h-now">Right now</h2>