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

Keep the status pills on exactly one row at every width
All checks were successful
Deploy / deploy (push) Successful in 21s
Details

Browse source 
The strip wrapped to two or three rows on narrow screens. It's now
nowrap with flex: 1 1 0 pills, so all six share the row equally and
shrink together instead of spilling onto a second line.

Six pills can't hold full detail in 375px, so detail degrades inside
the pill rather than the strip breaking: the stat drops at 1024px (the
dot already carries up/down), then below 560px the name swaps to a
short label — Son, Rad, Prow, SAB, Taut, Ombi. Without that swap the
names ellipsised to ~23px, about two characters, which identifies
nothing. The full name stays in the DOM at font-size: 0 so screen
readers still announce it, and it's on the pill's title attribute.

The dot and the pill itself never go, so no service is ever hidden —
which was the point of the old wrapping rule.

Verified one row with nothing clipped and no page overflow at 320, 375,
430, 560, 620, 700, 820, 1024, 1100 and 1400px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-27 08:06:31 -07:00
parent 41205be83c
commit 3c931873b1
2 changed files with 59 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

23
templates/dashboard.html
View file

@ -38,12 +38,15 @@
{%- endif -%}
{% endmacro %}
{#- One service status pill in the header strip. -#}
{% macro svc_pill(key, label, url, up, stat) %}
{#- One service status pill in the Status strip. `short` is swapped in for
`label` on phones, where six full names can't share one row without
ellipsising down to two characters — see the .svc-name rules. The full
name stays in the DOM for screen readers either way. -#}
{% macro svc_pill(key, label, short, url, up, stat) %}
<a class="svc-pill {{ 'up' if up else 'down' }}" id="svc-{{ key }}"
href="{{ url }}" target="_blank" rel="noopener">
href="{{ url }}" target="_blank" rel="noopener" title="{{ label }}">
<span class="status-light {{ 'up' if up else 'down' }}" id="svc-light-{{ key }}"></span>
<span class="svc-name">{{ label }}</span>
<span class="svc-name" data-short="{{ short }}">{{ label }}</span>
<span class="svc-stat" id="svc-stat-{{ key }}">{{ stat }}</span>
</a>
{% endmacro %}
@ -75,17 +78,17 @@
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',
{{ svc_pill('sonarr', 'Sonarr', 'Son', 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',
{{ svc_pill('radarr', 'Radarr', 'Rad', 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',
{{ svc_pill('prowlarr', 'Prowlarr', 'Prow', 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',
{{ svc_pill('sabnzbd', 'SABnzbd', 'SAB', service_urls.sabnzbd, sabnzbd.status == 'ok',
sabnzbd.speed if sabnzbd.status == 'ok' else 'offline') }}
{{ svc_pill('tautulli', 'Tautulli', service_urls.tautulli, tautulli.status == 'ok',
{{ svc_pill('tautulli', 'Tautulli', 'Taut', 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',
{{ svc_pill('ombi', 'Ombi', 'Ombi', service_urls.ombi, ombi.status == 'ok',
(ombi.total_pending ~ ' pending') if ombi.status == 'ok' else 'offline') }}
</nav>
</section>