hippogrief/pobsync
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

(ui) Add dashboard section responsive hooks

Browse Source 
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
This commit is contained in:
Peter van Arkel
2026-05-21 14:46:23 +02:00
parent 025cd0336c
commit b55950e24a
3 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/pobsync_backend/templates/pobsync_backend/base.html
View File

@@ -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;
}
}
</style>
</head>
<body>

6
src/pobsync_backend/templates/pobsync_backend/dashboard.html
View File

@@ -163,7 +163,7 @@
</article>
</section>
<section class="grid" aria-label="Summary">
<section class="grid dashboard-summary-grid" aria-label="Summary">
<a class="metric metric-link" href="#hosts"><div class="label">Hosts</div><div class="value">{{ counts.enabled_hosts }}/{{ counts.hosts }}</div></a>
<a class="metric metric-link" href="{% url 'schedules_list' %}"><div class="label">Schedules</div><div class="value">{{ counts.enabled_schedules }}/{{ counts.schedules }}</div></a>
<a class="metric metric-link" href="{% url 'snapshots_list' %}"><div class="label">Snapshots</div><div class="value">{{ counts.snapshots }}</div></a>
@@ -172,7 +172,7 @@
<a class="metric metric-link {% if counts.failed_runs %}failed{% endif %}" href="{% url 'runs_list' %}?status=failed&amp;review=needed"><div class="label">Failed</div><div class="value">{{ counts.failed_runs }}</div></a>
</section>
<section class="panel">
<section class="panel dashboard-trends-panel">
<h2>Backup Trends</h2>
{% if stats_summary.runs_sampled %}
<div class="insight-grid" aria-label="Backup trends">
@@ -216,7 +216,7 @@
{% endif %}
</section>
<section class="panel" id="hosts">
<section class="panel dashboard-hosts-panel" id="hosts">
<h2>Hosts</h2>
<div class="host-list">
{% for host in hosts %}

3
src/pobsync_backend/tests/test_views.py
View File

@@ -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")