(ui) Relax dashboard host card layout
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:
@@ -151,14 +151,14 @@
|
|||||||
.host-card {
|
.host-card {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 14px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
.host-card-header {
|
.host-card-header {
|
||||||
align-items: start;
|
align-items: start;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
.host-card-title {
|
.host-card-title {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -173,10 +173,21 @@
|
|||||||
.host-card-status {
|
.host-card-status {
|
||||||
flex: 0 0 auto;
|
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;
|
display: grid;
|
||||||
gap: 12px;
|
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 {
|
.host-card-item {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -192,6 +203,29 @@
|
|||||||
.host-card-item .value {
|
.host-card-item .value {
|
||||||
overflow-wrap: anywhere;
|
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; }
|
.messages { display: grid; gap: 8px; margin-bottom: 18px; }
|
||||||
.message {
|
.message {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
@@ -236,6 +270,7 @@
|
|||||||
main { padding: 16px; }
|
main { padding: 16px; }
|
||||||
nav { padding: 0; }
|
nav { padding: 0; }
|
||||||
.two-col { grid-template-columns: 1fr; }
|
.two-col { grid-template-columns: 1fr; }
|
||||||
|
.host-card-layout { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -64,55 +64,59 @@
|
|||||||
<span class="status {% if host.enabled %}ok{% else %}skipped{% endif %}">{{ host.enabled|yesno:"enabled,disabled" }}</span>
|
<span class="status {% if host.enabled %}ok{% else %}skipped{% endif %}">{{ host.enabled|yesno:"enabled,disabled" }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="host-card-grid">
|
<div class="host-card-layout">
|
||||||
<div class="host-card-item">
|
<div class="host-card-timeline">
|
||||||
<div class="label">Latest Snapshot</div>
|
<div class="host-card-item">
|
||||||
<div class="value">
|
<div class="label">Latest Snapshot</div>
|
||||||
{% if host.latest_snapshot %}
|
<div class="value">
|
||||||
<a href="{% url 'snapshot_detail' host.latest_snapshot.id %}">{{ host.latest_snapshot.dirname }}</a>
|
{% if host.latest_snapshot %}
|
||||||
<div class="muted">{{ host.latest_snapshot.kind }} {{ host.latest_snapshot.status }}</div>
|
<a href="{% url 'snapshot_detail' host.latest_snapshot.id %}">{{ host.latest_snapshot.dirname }}</a>
|
||||||
{% else %}
|
<div class="muted">{{ host.latest_snapshot.kind }} {{ host.latest_snapshot.status }}</div>
|
||||||
<span class="muted">none</span>
|
{% else %}
|
||||||
{% endif %}
|
<span class="muted">none</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="host-card-item">
|
||||||
|
<div class="label">Latest Run</div>
|
||||||
|
<div class="value">
|
||||||
|
{% if host.stats_summary.latest_run.id %}
|
||||||
|
<a href="{% url 'run_detail' host.stats_summary.latest_run.id %}">Run {{ host.stats_summary.latest_run.id }}</a>
|
||||||
|
<div class="muted">{{ host.stats_summary.latest_run.run_type }} {{ host.stats_summary.latest_run.duration_seconds|default:"" }}{% if host.stats_summary.latest_run.duration_seconds is not None %}s{% endif %}</div>
|
||||||
|
{% else %}
|
||||||
|
<span class="muted">none</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="host-card-item">
|
||||||
|
<div class="label">Next Run</div>
|
||||||
|
<div class="value">
|
||||||
|
{% if host.next_run_at %}
|
||||||
|
{{ host.next_run_at|date:"Y-m-d H:i T" }}
|
||||||
|
<div class="muted">{{ scheduler_timezone }}</div>
|
||||||
|
{% else %}
|
||||||
|
<span class="muted">none</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="host-card-item">
|
<div class="host-card-stats">
|
||||||
<div class="label">Latest Run</div>
|
<div class="host-card-stat">
|
||||||
<div class="value">
|
<div class="label">Snapshots</div>
|
||||||
{% if host.stats_summary.latest_run.id %}
|
<div class="value">{{ host.snapshot_count }}</div>
|
||||||
<a href="{% url 'run_detail' host.stats_summary.latest_run.id %}">Run {{ host.stats_summary.latest_run.id }}</a>
|
|
||||||
<div class="muted">{{ host.stats_summary.latest_run.run_type }} {{ host.stats_summary.latest_run.duration_seconds|default:"" }}{% if host.stats_summary.latest_run.duration_seconds is not None %}s{% endif %}</div>
|
|
||||||
{% else %}
|
|
||||||
<span class="muted">none</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="host-card-stat">
|
||||||
<div class="host-card-item">
|
<div class="label">Runs</div>
|
||||||
<div class="label">Next Run</div>
|
<div class="value">{{ host.run_count }}</div>
|
||||||
<div class="value">
|
</div>
|
||||||
{% if host.next_run_at %}
|
<div class="host-card-stat">
|
||||||
{{ host.next_run_at|date:"Y-m-d H:i T" }}
|
<div class="label">New Data</div>
|
||||||
<div class="muted">{{ scheduler_timezone }}</div>
|
<div class="value">{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</div>
|
||||||
{% else %}
|
</div>
|
||||||
<span class="muted">none</span>
|
<div class="host-card-stat">
|
||||||
{% endif %}
|
<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>
|
|
||||||
<div class="host-card-item">
|
|
||||||
<div class="label">Snapshots</div>
|
|
||||||
<div class="value">{{ host.snapshot_count }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="host-card-item">
|
|
||||||
<div class="label">Runs</div>
|
|
||||||
<div class="value">{{ host.run_count }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="host-card-item">
|
|
||||||
<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="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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
Reference in New Issue
Block a user