[Perl] DAQ system for the FAPG.
fix make graph controls horizontally scrollable
Wrap the timeframe controls in an overflow-x-auto container with flex-nowrap so they scroll horizontally on narrow viewports instead of overflowing the page width.
roles/dashboard/templates/dashboard/graph-control.html.ep
@@ -1,31 +1,33 @@
1
1
<!-- -*- mode: web; -*- -->
2
2
3
Removed:
<div class="graph-control d-inline-flex gap-2" aria-label="<%= $aria_label %>">
4
Removed:
<div class="btn-group range-control" role="group" aria-label="Adjust range">
5
Removed:
<button
6
Removed:
class="btn btn-sm btn-outline-secondary"
7
Removed:
type="button"
8
Removed:
data-range-adjustment="decrease"
9
Removed:
aria-label="Decrease range">−</button>
10
Removed:
<button
11
Removed:
class="btn btn-sm btn-outline-secondary range-label"
12
Removed:
type="button"
13
Removed:
data-range-label
14
Removed:
disabled
15
Removed:
aria-live="polite">1</button>
16
Removed:
<button
17
Removed:
class="btn btn-sm btn-outline-secondary"
18
Removed:
type="button"
19
Removed:
data-range-adjustment="increase"
20
Removed:
aria-label="Increase range">+</button>
21
Removed:
</div>
22
Removed:
<div class="btn-group timeframe-control" role="group" aria-label="Select timeframe">
23
Removed:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
24
Removed:
<button
25
Removed:
class="btn btn-sm btn-outline-secondary timeframe-button"
26
Removed:
type="button"
27
Removed:
data-timeframe="<%= $timeframe->[0] %>"
28
Removed:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
29
Removed:
% }
3
Added:
<div class="graph-control-scroll overflow-x-auto">
4
Added:
<div class="graph-control d-inline-flex gap-2 flex-nowrap" aria-label="<%= $aria_label %>">
5
Added:
<div class="btn-group range-control" role="group" aria-label="Adjust range">
6
Added:
<button
7
Added:
class="btn btn-sm btn-outline-secondary"
8
Added:
type="button"
9
Added:
data-range-adjustment="decrease"
10
Added:
aria-label="Decrease range">−</button>
11
Added:
<button
12
Added:
class="btn btn-sm btn-outline-secondary range-label"
13
Added:
type="button"
14
Added:
data-range-label
15
Added:
disabled
16
Added:
aria-live="polite">1</button>
17
Added:
<button
18
Added:
class="btn btn-sm btn-outline-secondary"
19
Added:
type="button"
20
Added:
data-range-adjustment="increase"
21
Added:
aria-label="Increase range">+</button>
22
Added:
</div>
23
Added:
<div class="btn-group timeframe-control" role="group" aria-label="Select timeframe">
24
Added:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
25
Added:
<button
26
Added:
class="btn btn-sm btn-outline-secondary timeframe-button"
27
Added:
type="button"
28
Added:
data-timeframe="<%= $timeframe->[0] %>"
29
Added:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
30
Added:
% }
31
Added:
</div>
30
32
</div>
31
33
</div>