From b55950e24a3a61864c51da82e11b12913decf408 Mon Sep 17 00:00:00 2001 From: Peter van Arkel Date: Thu, 21 May 2026 14:46:23 +0200 Subject: [PATCH] (ui) Add dashboard section responsive hooks Give dashboard summary, trends, and host sections dedicated layout hooks and tighten their responsive behavior so metrics and host cards remain readable on narrower screens. Refs #38 --- .../templates/pobsync_backend/base.html | 52 ++++++++++++++++--- .../templates/pobsync_backend/dashboard.html | 6 +-- src/pobsync_backend/tests/test_views.py | 3 ++ 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/src/pobsync_backend/templates/pobsync_backend/base.html b/src/pobsync_backend/templates/pobsync_backend/base.html index 7764651..9fd7f44 100644 --- a/src/pobsync_backend/templates/pobsync_backend/base.html +++ b/src/pobsync_backend/templates/pobsync_backend/base.html @@ -179,10 +179,19 @@ box-shadow: var(--shadow); transform: translateY(-1px); } - .metric-link:focus-visible { - outline: 3px solid #93c5fd; - outline-offset: 2px; - } + .metric-link:focus-visible { + outline: 3px solid #93c5fd; + outline-offset: 2px; + } + .dashboard-summary-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + .dashboard-summary-grid .metric { + min-height: 78px; + } + .dashboard-summary-grid .metric .value { + font-size: 25px; + } .panel { margin-bottom: 18px; overflow: auto; @@ -622,8 +631,8 @@ } .host-card-layout { display: grid; - gap: 24px; - grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); + gap: 18px; + grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr); } .host-card-section { align-content: start; @@ -700,6 +709,9 @@ margin-top: 14px; padding: 10px; } + .host-card-warning > * { + min-width: 0; + } .messages { display: grid; gap: 8px; margin-bottom: 18px; } .message { background: var(--panel); @@ -803,6 +815,16 @@ .dashboard-priority-grid { grid-template-columns: 1fr; } + .dashboard-summary-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .host-card-layout { + grid-template-columns: 1fr; + } + .host-card-status { + justify-content: flex-start; + max-width: none; + } .schedule-row { grid-template-columns: 1fr; } @@ -811,6 +833,24 @@ text-align: left; } } + @media (max-width: 560px) { + .dashboard-summary-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .metric { + min-height: 76px; + padding: 12px; + } + .metric .value { + font-size: 24px; + } + .host-card { + padding: 13px; + } + .host-card-stats { + grid-template-columns: 1fr; + } + } diff --git a/src/pobsync_backend/templates/pobsync_backend/dashboard.html b/src/pobsync_backend/templates/pobsync_backend/dashboard.html index 830b0ad..cefa769 100644 --- a/src/pobsync_backend/templates/pobsync_backend/dashboard.html +++ b/src/pobsync_backend/templates/pobsync_backend/dashboard.html @@ -163,7 +163,7 @@ -
+
Hosts
{{ counts.enabled_hosts }}/{{ counts.hosts }}
Schedules
{{ counts.enabled_schedules }}/{{ counts.schedules }}
Snapshots
{{ counts.snapshots }}
 @@ -172,7 +172,7 @@
Failed
{{ counts.failed_runs }}
-
+

Backup Trends

{% if stats_summary.runs_sampled %}
@@ -216,7 +216,7 @@ {% endif %}
-
+

Hosts

{% for host in hosts %} diff --git a/src/pobsync_backend/tests/test_views.py b/src/pobsync_backend/tests/test_views.py index 227e602..68c64d2 100644 --- a/src/pobsync_backend/tests/test_views.py +++ b/src/pobsync_backend/tests/test_views.py @@ -107,6 +107,9 @@ class ViewTests(TestCase): self.assertContains(response, "dashboard-panel-schedules") self.assertContains(response, "dashboard-panel-activity") self.assertContains(response, "dashboard-panel-storage") + self.assertContains(response, "dashboard-summary-grid") + self.assertContains(response, "dashboard-trends-panel") + self.assertContains(response, "dashboard-hosts-panel") self.assertContains(response, "Dashboard") self.assertContains(response, "web-01") self.assertContains(response, "20260519-021500Z__ABCDEFGH")