[Perl] DAQ system for the FAPG.
style unify chart card appearance across all pages
Remove probe-grid square aspect ratio; use col-12 col-xl-6 like insights/weather. Standardise card-body padding (p-2 p-sm-3) on probes, insights, and weather.
Changed files
roles/dashboard/public/css/app.css
@@ -352,11 +352,7 @@
352
352
min-height: 0;
353
353
}
354
354
355
Removed:
/* Probes grid — square aspect ratio cards with flex charts */
356
Removed:
.probes-grid .card {
357
Removed:
aspect-ratio: 1 / 1;
358
Removed:
}
359
Removed:
355
Added:
/* Probes grid — flex charts within cards */
360
356
.probes-grid .card-body {
361
357
display: flex;
362
358
flex: 1;
@@ -374,8 +370,6 @@
374
370
.probes-grid .chart-wrap {
375
371
flex: 1;
376
372
min-height: 0;
377
Removed:
max-height: none;
378
Removed:
aspect-ratio: auto;
379
373
}
380
374
381
375
/* ----------------------------------------------------------------
roles/dashboard/templates/dashboard/insights.html.ep
@@ -11,7 +11,7 @@
11
11
<div class="col-12 col-xl-6" id="stability">
12
12
<div class="card">
13
13
%= include 'dashboard/chart-card-header', title => 'System Stability', info_id => 'info-stability', info_text => 'A <strong>lower score means more stable</strong>. Rolling standard deviation (σ) of all probe values over a 6-hour window, normalised to each optimal range. Spikes indicate rapid or large deviations from normal conditions.'
14
Removed:
<div class="card-body">
14
Added:
<div class="card-body p-2 p-sm-3">
15
15
<div class="chart-wrap">
16
16
<canvas id="chart-stability" role="img" aria-label="System stability score — lower is better"></canvas>
17
17
</div>
@@ -22,7 +22,7 @@
22
22
<div class="col-12 col-xl-6" id="rate-of-change">
23
23
<div class="card">
24
24
%= include 'dashboard/chart-card-header', title => 'Rate of Change', info_id => 'info-derivatives', info_text => 'Normalised rate of change per probe (% of optimal range per hour). Values near zero mean the parameter is steady.'
25
Removed:
<div class="card-body">
25
Added:
<div class="card-body p-2 p-sm-3">
26
26
<div class="chart-wrap">
27
27
<canvas id="chart-derivatives" role="img" aria-label="Normalised rate of change per probe"></canvas>
28
28
</div>
@@ -33,7 +33,7 @@
33
33
<div class="col-12 col-xl-6" id="diurnal">
34
34
<div class="card">
35
35
%= include 'dashboard/chart-card-header', title => 'DO Diurnal Pattern', info_id => 'info-diurnal', info_text => 'Day/night DO cycle — each line is one day, bold is the 7-day average. Shows photosynthesis-driven oxygen production during daylight hours.'
36
Removed:
<div class="card-body">
36
Added:
<div class="card-body p-2 p-sm-3">
37
37
<div class="chart-wrap">
38
38
<canvas id="chart-diurnal" role="img" aria-label="Dissolved oxygen diurnal overlay"></canvas>
39
39
</div>
@@ -44,7 +44,7 @@
44
44
<div class="col-12 col-xl-6" id="do-orp-overlay">
45
45
<div class="card">
46
46
%= include 'dashboard/chart-card-header', title => 'DO & ORP Over Time', info_id => 'info-do-orp', info_text => 'Dual-axis overlay with outdoor temperature. Correlated DO/ORP drops indicate oxygen-driven redox shifts. The grey dashed line shows outdoor temperature for correlation.'
47
Removed:
<div class="card-body">
47
Added:
<div class="card-body p-2 p-sm-3">
48
48
<div class="chart-wrap">
49
49
<canvas id="chart-overlay-do-orp" role="img" aria-label="DO and ORP overlay chart"></canvas>
50
50
</div>
@@ -55,7 +55,7 @@
55
55
<div class="col-12 col-xl-6" id="ph-do-lag">
56
56
<div class="card">
57
57
%= include 'dashboard/chart-card-header', title => 'pH ↔ DO Relationship', info_id => 'info-ph-do', info_text => 'Nitrification link — DO drops often precede pH drops. When bacteria consume oxygen for nitrification, they produce acid which lowers pH.'
58
Removed:
<div class="card-body">
58
Added:
<div class="card-body p-2 p-sm-3">
59
59
<div class="chart-wrap">
60
60
<canvas id="chart-ph-do-lag" role="img" aria-label="pH and DO relationship overlay"></canvas>
61
61
</div>
roles/dashboard/templates/dashboard/probe-card.html.ep
@@ -52,7 +52,7 @@
52
52
<p class="text-body-secondary small mb-0"><%= $explainers{$probe->{key}} // 'Trend for this measurement over time.' %></p>
53
53
</div>
54
54
</div>
55
Removed:
<div class="card-body">
55
Added:
<div class="card-body p-2 p-sm-3">
56
56
<section id="probe-<%= $probe->{key} %>" class="tab-panel is-active" data-panel="<%= $probe->{key} %>">
57
57
<div class="chart-wrap">
58
58
<canvas id="chart-<%= $probe->{key} %>" role="img" aria-label="<%= $probe->{label} %> trend over time"></canvas>
roles/dashboard/templates/dashboard/probes.html.ep
@@ -9,7 +9,7 @@
9
9
10
10
<div class="row g-3 probes-grid">
11
11
% for my $probe ($probes->@*) {
12
Removed:
<div class="col-12 col-md-6 col-xl-3">
12
Added:
<div class="col-12 col-xl-6">
13
13
%= include 'dashboard/probe-card', probe => $probe
14
14
</div>
15
15
% }