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

issue-38-dashboard-responsive-layout #41

Merged
parkel merged 3 commits from issue-38-dashboard-responsive-layout into master 2026-05-21 14:51:34 +02:00
Conversation 0 Commits 3 Files Changed 3 +52 -9
3 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b55950e24a - Show all commits

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

@@ -179,10 +179,19 @@
box-shadow: var(--shadow); box-shadow: var(--shadow);
transform: translateY(-1px); transform: translateY(-1px);
} }
.metric-link:focus-visible { .metric-link:focus-visible {
outline: 3px solid #93c5fd; outline: 3px solid #93c5fd;
outline-offset: 2px; 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 { .panel {
margin-bottom: 18px; margin-bottom: 18px;
overflow: auto; overflow: auto;
@@ -622,8 +631,8 @@
} }
.host-card-layout { .host-card-layout {
display: grid; display: grid;
gap: 24px; gap: 18px;
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr);
} }
.host-card-section { .host-card-section {
align-content: start; align-content: start;
@@ -700,6 +709,9 @@
margin-top: 14px; margin-top: 14px;
padding: 10px; padding: 10px;
} }
.host-card-warning > * {
min-width: 0;
}
.messages { display: grid; gap: 8px; margin-bottom: 18px; } .messages { display: grid; gap: 8px; margin-bottom: 18px; }
.message { .message {
background: var(--panel); background: var(--panel);
@@ -803,6 +815,16 @@
.dashboard-priority-grid { .dashboard-priority-grid {
grid-template-columns: 1fr; 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 { .schedule-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -811,6 +833,24 @@
text-align: left; 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> </style>
</head> </head>
<body> <body>

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

@@ -163,7 +163,7 @@
</article> </article>
</section> </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="#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 '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> <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> <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>
<section class="panel"> <section class="panel dashboard-trends-panel">
<h2>Backup Trends</h2> <h2>Backup Trends</h2>
{% if stats_summary.runs_sampled %} {% if stats_summary.runs_sampled %}
<div class="insight-grid" aria-label="Backup trends"> <div class="insight-grid" aria-label="Backup trends">
@@ -216,7 +216,7 @@
{% endif %} {% endif %}
</section> </section>
<section class="panel" id="hosts"> <section class="panel dashboard-hosts-panel" id="hosts">
<h2>Hosts</h2> <h2>Hosts</h2>
<div class="host-list"> <div class="host-list">
{% for host in hosts %} {% 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-schedules")
self.assertContains(response, "dashboard-panel-activity") self.assertContains(response, "dashboard-panel-activity")
self.assertContains(response, "dashboard-panel-storage") 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, "Dashboard")
self.assertContains(response, "web-01") self.assertContains(response, "web-01")
self.assertContains(response, "20260519-021500Z__ABCDEFGH") self.assertContains(response, "20260519-021500Z__ABCDEFGH")