[Perl] DAQ system for the FAPG.
refactor always show graph controls, remove collapse toggle
Remove the disclosure wrapper and 'Graph controls' collapse button. The timeframe and range controls are now always visible regardless of viewport size.
Changed files
roles/dashboard/t/01-graph-page.t
@@ -26,10 +26,6 @@
26
26
->element_exists(
27
27
'div.toolbar-items div.graph-control .timeframe-control[role="group"]'
28
28
)
29
Removed:
->text_is(
30
Removed:
'button[data-graph-controls-toggle][aria-expanded="false"][aria-controls="graph-controls-panel"]',
31
Removed:
'Graph controls'
32
Removed:
)
33
29
->text_is( 'a[data-raw-download][data-probe="ph"]', 'Download raw data' )
34
30
->element_exists(
35
31
'button[data-timeframe="day"].timeframe-button.btn-outline-secondary'
roles/dashboard/templates/dashboard/graph-control.html.ep
@@ -1,43 +1,31 @@
1
1
<!-- -*- mode: web; -*- -->
2
2
3
Removed:
<div class="graph-controls-disclosure">
4
Removed:
<button
5
Removed:
class="btn btn-outline-secondary d-md-none w-100 mb-2 graph-controls-toggle"
6
Removed:
type="button"
7
Removed:
data-bs-toggle="collapse"
8
Removed:
data-bs-target="#graph-controls-panel"
9
Removed:
aria-expanded="false"
10
Removed:
aria-controls="graph-controls-panel"
11
Removed:
data-graph-controls-toggle>Graph controls</button>
12
Removed:
<div class="collapse d-md-block graph-controls-panel" id="graph-controls-panel">
13
Removed:
<div class="graph-control d-inline-flex gap-2" aria-label="<%= $aria_label %>">
14
Removed:
<div class="btn-group range-control" role="group" aria-label="Adjust range">
15
Removed:
<button
16
Removed:
class="btn btn-sm btn-outline-secondary"
17
Removed:
type="button"
18
Removed:
data-range-adjustment="decrease"
19
Removed:
aria-label="Decrease range">−</button>
20
Removed:
<button
21
Removed:
class="btn btn-sm btn-outline-secondary range-label"
22
Removed:
type="button"
23
Removed:
data-range-label
24
Removed:
disabled
25
Removed:
aria-live="polite">1</button>
26
Removed:
<button
27
Removed:
class="btn btn-sm btn-outline-secondary"
28
Removed:
type="button"
29
Removed:
data-range-adjustment="increase"
30
Removed:
aria-label="Increase range">+</button>
31
Removed:
</div>
32
Removed:
<div class="btn-group timeframe-control" role="group" aria-label="Select timeframe">
33
Removed:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
34
Removed:
<button
35
Removed:
class="btn btn-sm btn-outline-secondary timeframe-button"
36
Removed:
type="button"
37
Removed:
data-timeframe="<%= $timeframe->[0] %>"
38
Removed:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
39
Removed:
% }
40
Removed:
</div>
41
Removed:
</div>
3
Added:
<div class="graph-control d-inline-flex gap-2" aria-label="<%= $aria_label %>">
4
Added:
<div class="btn-group range-control" role="group" aria-label="Adjust range">
5
Added:
<button
6
Added:
class="btn btn-sm btn-outline-secondary"
7
Added:
type="button"
8
Added:
data-range-adjustment="decrease"
9
Added:
aria-label="Decrease range">−</button>
10
Added:
<button
11
Added:
class="btn btn-sm btn-outline-secondary range-label"
12
Added:
type="button"
13
Added:
data-range-label
14
Added:
disabled
15
Added:
aria-live="polite">1</button>
16
Added:
<button
17
Added:
class="btn btn-sm btn-outline-secondary"
18
Added:
type="button"
19
Added:
data-range-adjustment="increase"
20
Added:
aria-label="Increase range">+</button>
21
Added:
</div>
22
Added:
<div class="btn-group timeframe-control" role="group" aria-label="Select timeframe">
23
Added:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
24
Added:
<button
25
Added:
class="btn btn-sm btn-outline-secondary timeframe-button"
26
Added:
type="button"
27
Added:
data-timeframe="<%= $timeframe->[0] %>"
28
Added:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
29
Added:
% }
42
30
</div>
43
31
</div>