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

(ui) Relax dashboard host card layout

Browse Source 
Split each dashboard host card into a timeline area and a compact stats area
so snapshot, run, and schedule details have more room to scan.

Keep the same operational information visible while reducing cramped
column-like wrapping on desktop and mobile layouts.
This commit is contained in:
Peter van Arkel
2026-05-19 23:52:54 +02:00
parent f3dcb8a3b9
commit f41e59e695
2 changed files with 88 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,14 +151,14 @@
.host-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
padding: 16px;
}
.host-card-header {
align-items: start;
display: flex;
gap: 12px;
justify-content: space-between;
margin-bottom: 12px;
margin-bottom: 14px;
}
.host-card-title {
display: grid;
@@ -173,10 +173,21 @@
.host-card-status {
flex: 0 0 auto;
}
.host-card-grid {
.host-card-layout {
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}
.host-card-timeline {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.host-card-stats {
align-content: start;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.host-card-item {
display: grid;
@@ -192,6 +203,29 @@
.host-card-item .value {
overflow-wrap: anywhere;
}
.host-card-stat {
background: #f8fafc;
border: 1px solid #e6edf4;
border-radius: 6px;
display: grid;
gap: 3px;
min-width: 0;
padding: 10px;
}
.host-card-stat .label {
color: var(--muted);
font-size: 11px;
font-weight: 650;
text-transform: uppercase;
}
.host-card-stat .value {
font-size: 16px;
font-weight: 650;
overflow-wrap: anywhere;
}
.host-card-stat.wide {
grid-column: 1 / -1;
}
.messages { display: grid; gap: 8px; margin-bottom: 18px; }
.message {
background: var(--panel);
@@ -236,6 +270,7 @@
main { padding: 16px; }
nav { padding: 0; }
.two-col { grid-template-columns: 1fr; }
.host-card-layout { grid-template-columns: 1fr; }
}
</style>
</head>

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

@@ -64,7 +64,8 @@
<span class="status {% if host.enabled %}ok{% else %}skipped{% endif %}">{{ host.enabled|yesno:"enabled,disabled" }}</span>
</div>
</div>
<div class="host-card-grid">
<div class="host-card-layout">
<div class="host-card-timeline">
<div class="host-card-item">
<div class="label">Latest Snapshot</div>
<div class="value">
@@ -98,23 +99,26 @@
{% endif %}
</div>
</div>
<div class="host-card-item">
</div>
<div class="host-card-stats">
<div class="host-card-stat">
<div class="label">Snapshots</div>
<div class="value">{{ host.snapshot_count }}</div>
</div>
<div class="host-card-item">
<div class="host-card-stat">
<div class="label">Runs</div>
<div class="value">{{ host.run_count }}</div>
</div>
<div class="host-card-item">
<div class="host-card-stat">
<div class="label">New Data</div>
<div class="value">{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</div>
</div>
<div class="host-card-item">
<div class="host-card-stat">
<div class="label">Retention</div>
<div class="value">d{{ host.retention_daily }} w{{ host.retention_weekly }} m{{ host.retention_monthly }} y{{ host.retention_yearly }}</div>
</div>
</div>
</div>
</article>
{% empty %}
<p class="muted">No hosts configured yet.</p>