[Perl] DAQ system for the FAPG.
Add probe graph menu.
Changed files
roles/dashboard/public/css/app.css
@@ -832,6 +832,73 @@
832
832
color: var(--muted);
833
833
}
834
834
835
Added:
.probe-card-title {
836
Added:
min-width: 0;
837
Added:
}
838
Added:
839
Added:
.probe-card-subtitle {
840
Added:
margin-top: 0.25rem !important;
841
Added:
font-size: 0.9rem;
842
Added:
}
843
Added:
844
Added:
.probe-card-menu {
845
Added:
position: relative;
846
Added:
flex: 0 0 auto;
847
Added:
}
848
Added:
849
Added:
.probe-card-menu summary {
850
Added:
display: grid;
851
Added:
place-items: center;
852
Added:
width: 2.5rem;
853
Added:
height: 2.5rem;
854
Added:
border: 1px solid var(--border);
855
Added:
border-radius: 0.5rem;
856
Added:
background: white;
857
Added:
color: var(--text);
858
Added:
cursor: pointer;
859
Added:
list-style: none;
860
Added:
}
861
Added:
862
Added:
.probe-card-menu summary::-webkit-details-marker {
863
Added:
display: none;
864
Added:
}
865
Added:
866
Added:
.probe-card-menu summary:hover,
867
Added:
.probe-card-menu[open] summary {
868
Added:
border-color: var(--accent);
869
Added:
background: var(--accent-soft);
870
Added:
color: var(--accent);
871
Added:
}
872
Added:
873
Added:
.probe-card-menu summary:focus-visible {
874
Added:
outline: 2px solid var(--accent);
875
Added:
outline-offset: 2px;
876
Added:
}
877
Added:
878
Added:
.probe-card-menu-icon {
879
Added:
width: 1rem;
880
Added:
height: 2px;
881
Added:
background: currentColor;
882
Added:
box-shadow: 0 -0.35rem currentColor, 0 0.35rem currentColor;
883
Added:
}
884
Added:
885
Added:
.probe-card-menu-content {
886
Added:
position: absolute;
887
Added:
z-index: 10;
888
Added:
top: calc(100% + 0.35rem);
889
Added:
right: 0;
890
Added:
min-width: max-content;
891
Added:
border: 1px solid var(--border);
892
Added:
border-radius: 0.5rem;
893
Added:
padding: 0.35rem;
894
Added:
background: var(--card);
895
Added:
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
896
Added:
}
897
Added:
898
Added:
.probe-card-menu-content .secondary-button {
899
Added:
width: 100%;
900
Added:
}
901
Added:
835
902
.card-body {
836
903
padding: 1.25rem;
837
904
}
@@ -901,13 +968,6 @@
901
968
font-size: 0.95rem;
902
969
}
903
970
904
Removed:
.probe-card-actions {
905
Removed:
display: flex;
906
Removed:
justify-content: flex-end;
907
Removed:
margin-top: auto;
908
Removed:
padding-top: 1rem;
909
Removed:
}
910
Removed:
911
971
.message-log {
912
972
margin-top: 1.25rem;
913
973
}
@@ -1201,6 +1261,10 @@
1201
1261
1202
1262
.card-heading {
1203
1263
display: block;
1264
Added:
}
1265
Added:
1266
Added:
.probes-grid .card-heading {
1267
Added:
display: flex;
1204
1268
}
1205
1269
1206
1270
.card-heading,
roles/dashboard/templates/dashboard/probe-card.html.ep
@@ -2,13 +2,23 @@
2
2
3
3
<div class="card">
4
4
<div class="card-heading">
5
Removed:
<h1><a href="/probes/<%= $probe->{key} %>"><%= $probe->{label} %></a></h1>
6
Removed:
<div class="panel-tools">
7
Removed:
<p>
5
Added:
<div class="probe-card-title">
6
Added:
<h1><a href="/probes/<%= $probe->{key} %>"><%= $probe->{label} %></a></h1>
7
Added:
<p class="probe-card-subtitle">
8
8
Unit:
9
9
<strong><%= $probe->{unit} %></strong>
10
10
</p>
11
11
</div>
12
Added:
<details class="probe-card-menu">
13
Added:
<summary aria-label="Actions for <%= $probe->{label} %>"><span class="probe-card-menu-icon" aria-hidden="true"></span></summary>
14
Added:
<div class="probe-card-menu-content">
15
Added:
<a
16
Added:
class="secondary-button graph-download-button"
17
Added:
href="/downloads/readings.csv?probe=<%= $probe->{key} %>&timeframe=day&range=1"
18
Added:
data-raw-download
19
Added:
data-probe="<%= $probe->{key} %>">Download raw data</a>
20
Added:
</div>
21
Added:
</details>
12
22
</div>
13
23
<div class="card-body">
14
24
<section id="probe-<%= $probe->{key} %>" class="tab-panel is-active" data-panel="<%= $probe->{key} %>">
@@ -20,13 +30,5 @@
20
30
Waiting for data…
21
31
</p>
22
32
</section>
23
Removed:
24
Removed:
<div class="probe-card-actions">
25
Removed:
<a
26
Removed:
class="secondary-button graph-download-button"
27
Removed:
href="/downloads/readings.csv?probe=<%= $probe->{key} %>&timeframe=day&range=1"
28
Removed:
data-raw-download
29
Removed:
data-probe="<%= $probe->{key} %>">Download raw data</a>
30
Removed:
</div>
31
33
</div>
32
34
</div>