quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten Pi dashboard layout

Browse Source 
Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 18:25:30 -04:00
co-authored by Copilot
parent f6de658a88
commit a7302229d1
2 changed files with 80 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+71 -5
View File
@@ -4,6 +4,72 @@
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}">
<style>
.dashboard-primary-row {
align-items: flex-start;
}
.dashboard-fit-card {
height: auto;
}
.dashboard-map-card #map {
height: 15rem;
}
.dashboard-map-card .card-footer {
padding-top: .65rem;
padding-bottom: .65rem;
}
.dashboard-overview-card .card-body {
padding-top: 1rem;
padding-bottom: 1rem;
}
.dashboard-overview-card .row {
row-gap: 1rem !important;
}
.dashboard-speed-card .card-body {
padding-top: .85rem;
padding-bottom: .5rem;
}
.dashboard-speed-card canvas {
height: 10rem !important;
}
@media (max-width: 1399.98px) {
.dashboard-map-card #map {
height: 13.5rem;
}
.dashboard-speed-card canvas {
height: 9rem !important;
}
}
@media (max-width: 991.98px) {
.dashboard-map-card #map {
height: 14rem;
}
.dashboard-speed-card canvas {
height: 8rem !important;
}
}
@media (max-height: 800px) and (min-width: 992px) {
.dashboard-map-card #map {
height: 12.5rem;
}
.dashboard-speed-card canvas {
height: 7.5rem !important;
}
}
</style>
{% endblock %}
{% block content %}
@@ -97,9 +163,9 @@
</div>
{# ── GPS map + Stats + Speed history ──────────────────────────────────── #}
<div class="row g-3 mb-3">
<div class="row g-3 mb-3 dashboard-primary-row">
<div class="col-lg-4 col-xl-3">
<div class="card shadow-sm h-100">
<div class="card shadow-sm dashboard-fit-card dashboard-map-card">
<div class="card-header py-2 d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Live GPS</h6>
<div class="d-flex align-items-center gap-2">
@@ -129,7 +195,7 @@
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="card shadow-sm h-100">
<div class="card shadow-sm dashboard-fit-card dashboard-overview-card">
<div class="card-header py-2">
<h6 class="text-primary fw-bold m-0">Overview</h6>
</div>
@@ -168,7 +234,7 @@
</div>
</div>
<div class="col-lg-5 col-xl-7">
<div class="card shadow-sm h-100">
<div class="card shadow-sm h-100 dashboard-speed-card">
<div class="card-header py-2 d-flex align-items-center gap-2">
<h6 class="text-primary fw-bold m-0 me-auto">Speed history</h6>
<span class="text-xs text-muted fw-bold text-uppercase">Now</span>
@@ -182,7 +248,7 @@
</div>
<div class="collapse" id="speed-graph-body">
<div class="card-body pb-2 pt-3 px-3">
<canvas id="speedGraph" style="height:13rem;"></canvas>
<canvas id="speedGraph" style="height:10rem;"></canvas>
</div>
<div class="card-footer py-2 d-flex gap-4 bg-white border-top small text-muted">
<div><span class="fw-bold text-uppercase" style="font-size:.65rem;">Avg (session)</span> <span id="speed-avg-badge" class="text-dark fw-semibold">—</span></div>