Skip to content

Commit 553ed6e

Browse files
jokob-skjokob-sk
committed
FE: skeleton uplift, table fixes in systeminfo
1 parent 39cdbfc commit 553ed6e

12 files changed

Lines changed: 191 additions & 67 deletions

‎docs/DEVICE_FILTERS.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ If a device is missing from the **My Devices** list, work through these checks.
1414

1515
The most common cause is that a filter is hiding the device.
1616

17-
![Image](https://docs.netalertx.com/img/ADVISORIES/filters.png)
17+
![Image](./img/ADVISORIES/filters.png)
1818

19-
![Image](https://docs.netalertx.com/img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)
19+
![Image](./img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)
2020

2121
Review any active:
2222

@@ -32,6 +32,8 @@ Clear filters first, then reload the page and check again.
3232

3333
You can select devices of what statuses should be displayed in the My Devices view. This can be adjusted in the _Settings_ section - search for the `UI_MY_DEVICES` setting and verify that the statuses you want to show are selected.
3434

35+
![Image](./img/DEVICE_MANAGEMENT/device_filter_settings.png)
36+
3537
---
3638

3739
### Check Whether the Device Is Hidden

‎docs/img/DEVICE_MANAGEMENT/device_filter_settings.png‎

144 KB
Loading

‎front/css/app.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2647,11 +2647,11 @@ table.dataTable tbody > tr.selected
26472647
.skel-tab-pane { z-index: 10; min-height: 400px; }
26482648
#settings-skeleton { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; }
26492649
#devices-skeleton { top: 50px; min-height: 500px; }
2650-
#device-details-skeleton { min-height: 600px; }
2650+
#device-details-skeleton { top: 45px; min-height: 100px; }
26512651
#events-skeleton { top: 50px; min-height: 500px; }
26522652
#presence-skeleton { top: 50px; min-height: 500px; }
26532653
#report-skeleton { min-height: 400px; }
2654-
#notifications-skeleton { min-height: 400px; }
2654+
#notifications-skeleton { top: 50px; min-height: 400px; }
26552655
#workflows-skeleton { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; }
26562656
#plugins-skeleton { padding: 0; min-height: 400px; }
26572657

@@ -2728,6 +2728,7 @@ table.dataTable tbody > tr.selected
27282728

27292729
/* ----- Devices ---------------------------------------------------------- */
27302730
.skel-tile { display: flex; height: 80px; }
2731+
#device-details-skeleton .skel-tile { display: flex; height: 45px; }
27312732
.skel-tile-inner { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; }
27322733
.skel-tile-num { height: 26px; width: 55%; }
27332734
.skel-tile-label { height: 13px; width: 75%; }
@@ -2740,8 +2741,8 @@ table.dataTable tbody > tr.selected
27402741
.skel-td { height: 13px; }
27412742

27422743
/* ----- Device Details --------------------------------------------------- */
2743-
.skel-detail-header { margin-bottom: 15px; }
2744-
.skel-detail-title { height: 26px; width: 42%; margin-bottom: 14px; }
2744+
.skel-detail-header { margin-bottom: 0px; }
2745+
.skel-detail-title { height: 26px; width: 42%; margin-bottom: 0px; }
27452746
.skel-detail-info-panel { display: flex; gap: 0; padding: 14px; border-radius: 4px; margin-bottom: 15px; max-width: 400px; }
27462747
.skel-tabs-bar { display: flex; gap: 4px; padding: 8px 10px 0; border-radius: 4px 4px 0 0; border-bottom: none; }
27472748
.skel-tab { height: 34px; width: 100px; border-radius: 4px 4px 0 0; flex-shrink: 0; }

‎front/css/system-dark-patch.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -743,5 +743,5 @@
743743
--skel-section: #252c38;
744744
--skel-panel-bg: #1e242e;
745745
--skel-border: #2a323e;
746-
--skel-bg: #353c42;
746+
--skel-bg: #292e33;
747747
}

‎front/php/templates/skel_device_details.php‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,43 @@
44
<!-- Content header area -------------------------------------------------- -->
55
<div class="skel-detail-header">
66
<div class="skel-detail-title skel-shimmer"></div>
7-
<div class="skel-detail-info-panel">
8-
<div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
9-
<div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
10-
<span class="skel-line skel-shimmer" style="width:55%"></span>
11-
<span class="skel-line skel-shimmer" style="width:38%"></span>
12-
<span class="skel-line skel-shimmer" style="width:45%"></span>
13-
</div>
14-
</div>
157
</div>
168
179
<!-- Top stat tiles -------------------------------------------------------- -->
1810
<div class="row">
19-
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
11+
<div class="col-lg-3 col-sm-6 col-xs-6 ">
2012
<div class="skel-tile">
2113
<div class="skel-tile-inner">
2214
<div class="skel-tile-num skel-shimmer"></div>
23-
<div class="skel-tile-label skel-shimmer"></div>
2415
</div>
2516
<div class="skel-tile-icon-area">
2617
<div class="skel-tile-icon-shape skel-shimmer"></div>
2718
</div>
2819
</div>
2920
</div>
30-
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
21+
<div class="col-lg-3 col-sm-6 col-xs-6 ">
3122
<div class="skel-tile">
3223
<div class="skel-tile-inner">
3324
<div class="skel-tile-num skel-shimmer"></div>
34-
<div class="skel-tile-label skel-shimmer"></div>
3525
</div>
3626
<div class="skel-tile-icon-area">
3727
<div class="skel-tile-icon-shape skel-shimmer"></div>
3828
</div>
3929
</div>
4030
</div>
41-
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
31+
<div class="col-lg-3 col-sm-6 col-xs-6 ">
4232
<div class="skel-tile">
4333
<div class="skel-tile-inner">
4434
<div class="skel-tile-num skel-shimmer"></div>
45-
<div class="skel-tile-label skel-shimmer"></div>
4635
</div>
4736
<div class="skel-tile-icon-area">
48-
<div class="skel-tile-icon-shape skel-shimmer"></div>
4937
</div>
5038
</div>
5139
</div>
52-
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
40+
<div class="col-lg-3 col-sm-6 col-xs-6 ">
5341
<div class="skel-tile">
5442
<div class="skel-tile-inner">
5543
<div class="skel-tile-num skel-shimmer"></div>
56-
<div class="skel-tile-label skel-shimmer"></div>
5744
</div>
5845
<div class="skel-tile-icon-area">
5946
<div class="skel-tile-icon-shape skel-shimmer"></div>

‎front/php/templates/skel_events.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<span class="skel-th skel-shimmer"></span>
3131
<?php endfor; ?>
3232
</div>
33-
<?php for ($i = 0; $i < 8; $i++): ?>
33+
<?php for ($i = 0; $i < 20; $i++): ?>
3434
<div class="skel-tr">
3535
<?php for ($j = 0; $j < 6; $j++): ?>
3636
<span class="skel-td skel-shimmer"></span>

‎front/php/templates/skel_notifications.php‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@
88
<span class="skel-th skel-shimmer"></span>
99
<?php endfor; ?>
1010
</div>
11-
<?php for ($i = 0; $i < 8; $i++): ?>
11+
<?php for ($i = 0; $i < 25; $i++): ?>
1212
<div class="skel-tr">
1313
<?php for ($j = 0; $j < 4; $j++): ?>
1414
<span class="skel-td skel-shimmer"></span>
1515
<?php endfor; ?>
1616
</div>
1717
<?php endfor; ?>
1818
</div>
19+
<div class="skel-form-footer">
20+
<span class="skel-form-btn skel-shimmer"></span>
21+
<span class="skel-form-btn skel-shimmer"></span>
22+
</div>
1923
</div>

‎front/php/templates/skel_tab_details.php‎

Lines changed: 146 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,155 @@
11
<!-- Details Tab Skeleton ================================================== -->
22
<div id="skel-tab-details" class="skel-tab-pane">
3-
<div class="skel-detail-form">
4-
<div class="skel-form-row">
5-
<span class="skel-form-label skel-shimmer"></span>
6-
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
3+
<div class="skel-detail-form col-lg-12 col-sm-12 col-xs-12">
4+
<div class="col-lg-4 col-sm-6 col-xs-12">
5+
<div class="skel-form-row">
6+
<span class="skel-form-label skel-shimmer"></span>
7+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
8+
</div>
9+
<div class="skel-form-row">
10+
<span class="skel-form-label skel-shimmer"></span>
11+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
12+
</div>
13+
<div class="skel-form-row">
14+
<span class="skel-form-label skel-shimmer"></span>
15+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
16+
</div>
17+
<div class="skel-form-row">
18+
<span class="skel-form-label skel-shimmer"></span>
19+
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
20+
</div>
21+
<div class="skel-form-row">
22+
<span class="skel-form-label skel-shimmer"></span>
23+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
24+
</div>
25+
<div class="skel-form-row">
26+
<span class="skel-form-label skel-shimmer"></span>
27+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
28+
</div>
29+
<div class="skel-form-row">
30+
<span class="skel-form-label skel-shimmer"></span>
31+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
32+
</div>
33+
<div class="skel-form-row">
34+
<span class="skel-form-label skel-shimmer"></span>
35+
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
36+
</div>
37+
<div class="skel-form-row">
38+
<span class="skel-form-label skel-shimmer"></span>
39+
<span class="skel-form-input skel-shimmer" style="max-width:400px;height:50px"></span>
40+
</div>
741
</div>
8-
<div class="skel-form-row">
9-
<span class="skel-form-label skel-shimmer"></span>
10-
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
42+
<div class="col-lg-4 col-sm-6 col-xs-12">
43+
<div class="skel-form-row">
44+
<span class="skel-form-label skel-shimmer"></span>
45+
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
46+
</div>
47+
<div class="skel-form-row">
48+
<span class="skel-form-label skel-shimmer"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
49+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
50+
</div>
51+
<div class="skel-form-row">
52+
<span class="skel-form-label skel-shimmer"></span>
53+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
54+
</div>
55+
<div class="skel-form-row">
56+
<span class="skel-form-label skel-shimmer"></span>
57+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
58+
</div>
59+
<div class="skel-form-row">
60+
<span class="skel-form-label skel-shimmer"></span>
61+
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
62+
</div>
63+
<div class="skel-form-row">
64+
<span class="skel-form-label skel-shimmer"></span>
65+
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
66+
</div>
67+
<div class="skel-form-row">
68+
<span class="skel-form-label skel-shimmer"></span>
69+
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
70+
</div>
71+
<div class="skel-form-row">
72+
<span class="skel-form-label skel-shimmer"></span>
73+
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
74+
</div>
75+
<div class="skel-form-row">
76+
<span class="skel-form-label skel-shimmer"></span>
77+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
78+
</div>
79+
<div class="skel-form-row">
80+
<span class="skel-form-label skel-shimmer"></span>
81+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
82+
</div>
83+
<div class="skel-form-row">
84+
<span class="skel-form-label skel-shimmer"></span>
85+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
86+
</div>
1187
</div>
12-
<div class="skel-form-row">
13-
<span class="skel-form-label skel-shimmer"></span>
14-
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
88+
<div class="col-lg-4 col-sm-6 col-xs-12">
89+
<div class="skel-form-row">
90+
<span class="skel-form-label skel-shimmer"></span>
91+
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
92+
</div>
93+
<div class="skel-form-row">
94+
<span class="skel-form-label skel-shimmer"></span>
95+
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
96+
</div>
97+
<div class="skel-form-row">
98+
<span class="skel-form-label skel-shimmer"></span>
99+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
100+
</div>
101+
<div class="skel-form-row">
102+
<span class="skel-form-label skel-shimmer"></span>
103+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
104+
</div>
105+
<div class="skel-form-row">
106+
<span class="skel-form-label skel-shimmer"></span>
107+
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
108+
</div>
109+
<div class="skel-form-row">
110+
<span class="skel-form-label skel-shimmer"></span>
111+
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
112+
</div>
113+
<div class="skel-form-row">
114+
<span class="skel-form-label skel-shimmer"></span>
115+
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
116+
</div>
117+
<div class="skel-form-row">
118+
<span class="skel-form-label skel-shimmer"></span>
119+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
120+
</div>
121+
<div class="skel-form-row">
122+
<span class="skel-form-label skel-shimmer"></span>
123+
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
124+
</div>
125+
<div class="skel-form-row">
126+
<span class="skel-form-label skel-shimmer"></span>
127+
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
128+
</div>
129+
<div class="skel-form-row">
130+
<span class="skel-form-label skel-shimmer"></span>
131+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
132+
</div>
133+
<div class="skel-form-row">
134+
<span class="skel-form-label skel-shimmer"></span>
135+
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
136+
</div>
137+
<div class="skel-form-row">
138+
<span class="skel-form-label skel-shimmer"></span>
139+
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
140+
</div>
15141
</div>
16-
<div class="skel-form-row">
17-
<span class="skel-form-label skel-shimmer"></span>
18-
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
142+
<div class="col-lg-6 col-sm-12 col-xs-12">
143+
<div class="skel-form-row">
144+
<span class="skel-form-label skel-shimmer"></span>
145+
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
146+
</div>
19147
</div>
20-
<div class="skel-form-row">
21-
<span class="skel-form-label skel-shimmer"></span>
22-
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
23-
</div>
24-
<div class="skel-form-row">
25-
<span class="skel-form-label skel-shimmer"></span>
26-
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
27-
</div>
28-
<div class="skel-form-row">
29-
<span class="skel-form-label skel-shimmer"></span>
30-
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
31-
</div>
32-
<div class="skel-form-row">
33-
<span class="skel-form-label skel-shimmer"></span>
34-
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
148+
<div class="col-lg-6 col-sm-12 col-xs-12">
149+
<div class="skel-form-row">
150+
<span class="skel-form-label skel-shimmer"></span>
151+
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
152+
</div>
35153
</div>
36154
<div class="skel-form-footer">
37155
<span class="skel-form-btn skel-shimmer"></span>

‎front/php/templates/skel_tab_sysinfo_network.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="skel-info-tab">
2-
<?php for ($i = 0; $i < 10; $i++): ?>
2+
<?php for ($i = 0; $i < 20; $i++): ?>
33
<div class="skel-form-row">
44
<span class="skel-form-label skel-shimmer"></span>
55
<span class="skel-form-input skel-shimmer"></span>

‎front/php/templates/skel_tab_sysinfo_server.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="skel-info-tab">
2-
<?php for ($i = 0; $i < 14; $i++): ?>
2+
<?php for ($i = 0; $i < 20; $i++): ?>
33
<div class="skel-form-row">
44
<span class="skel-form-label skel-shimmer"></span>
55
<span class="skel-form-input skel-shimmer"></span>

0 commit comments

Comments
 (0)