[Perl] DAQ system for the FAPG.
fix stack toolbar items vertically on narrow devices
Use flex-column on mobile and flex-md-row on medium+ screens so the graph controls appear below the breadcrumbs instead of beside them on small viewports.
roles/dashboard/templates/dashboard/toolbar.html.ep
@@ -1,6 +1,6 @@
1
1
<!-- -*- mode: web; -*- -->
2
2
3
Removed:
<div id="toolbar" class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 toolbar">
3
Added:
<div id="toolbar" class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2 mb-3 toolbar">
4
4
<nav aria-label="Breadcrumb">
5
5
<ol class="breadcrumb mb-0 bg-white border rounded-pill px-3 py-2 small fw-bold">
6
6
% for my $index (0 .. $breadcrumbs->$#*) {
@@ -17,7 +17,7 @@
17
17
</ol>
18
18
</nav>
19
19
% if (defined $graph_control_aria_label) {
20
Removed:
<div class="toolbar-items d-flex align-items-center gap-2 ms-auto">
20
Added:
<div class="toolbar-items d-flex align-items-center gap-2 ms-md-auto">
21
21
%= include 'dashboard/graph-control', aria_label => $graph_control_aria_label
22
22
</div>
23
23
% }