[Perl] DAQ system for the FAPG.
feat make navbar and graph controls sticky on scroll
The navbar was already sticky-top. Now the toolbar (with graph controls on probes/ and probes/:probe) and the insights page header are also sticky, positioned just below the navbar. Users can always access timeframe controls while scrolling.
Changed files
roles/dashboard/public/css/app.css
@@ -40,6 +40,21 @@
40
40
41
41
#toolbar {
42
42
max-width: 100%;
43
Added:
position: sticky;
44
Added:
top: 56px;
45
Added:
z-index: 1020;
46
Added:
background: var(--bs-body-bg, #fff);
47
Added:
padding-block: 0.5rem;
48
Added:
margin-top: -0.5rem;
49
Added:
}
50
Added:
51
Added:
.sticky-controls {
52
Added:
position: sticky;
53
Added:
top: 56px;
54
Added:
z-index: 1020;
55
Added:
background: var(--bs-body-bg, #fff);
56
Added:
padding-block: 0.5rem;
57
Added:
margin-bottom: 0.5rem;
43
58
}
44
59
45
60
#toolbar .toolbar-items {
roles/dashboard/templates/dashboard/insights.html.ep
@@ -3,7 +3,7 @@
3
3
% stash use_charts => 1;
4
4
5
5
<section class="mb-4" aria-label="Insights visualisations">
6
Removed:
<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-3">
6
Added:
<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-3 sticky-controls">
7
7
<div>
8
8
<h1 class="h4 fw-bold mb-1">Insights</h1>
9
9
<p class="text-body-secondary small mb-0">Derived visualisations for system monitoring</p>