Skip to content

Commit ae3f66d

Browse files
allinurlallinurl
committed
Fixed navigation issues on small screens and resolved regression from commit 6de2cb9.
1 parent 5f751b9 commit ae3f66d

File tree

3 files changed

+118
-67
lines changed

3 files changed

+118
-67
lines changed

‎resources/css/app.css‎

Lines changed: 88 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,6 @@ h3 {
2222
justify-content: space-between;
2323
flex-wrap: wrap;
2424
gap: 0.5rem;
25-
align-items: center;
26-
}
27-
.page-header #last-updated {
28-
margin: 0;
29-
font-size: 1.35rem;
3025
}
3126
.pagination {
3227
margin: 5px 0;
@@ -68,102 +63,116 @@ h3 {
6863

6964
/* NAVIGATION */
7065
nav {
71-
-webkit-transition: left .2s;
7266
background: #1C1C1C;
7367
border-color: #5bc0de;
7468
border-style: solid;
75-
border-width: 0;
76-
border-block-end-width: 3px;
69+
border-width: 0 3px 3px 0;
70+
/* Combined border properties */
71+
height: 100%;
72+
left: -236px;
73+
overflow: hidden;
74+
position: fixed;
75+
top: 0;
76+
width: 300px;
77+
z-index: 2;
7778
transition: left .2s;
7879
}
80+
81+
/* Navigation List */
7982
nav .nav-list {
8083
visibility: hidden;
8184
display: none;
85+
position: absolute;
86+
bottom: 0;
87+
left: 0;
88+
right: -17px;
89+
top: 0;
90+
overflow-y: scroll;
8291
}
8392

93+
/* Show Navigation List on Active */
8494
nav.active .nav-list {
85-
margin-block-start: -64px;
86-
visibility: visible;
87-
display: block;
95+
visibility: visible;
96+
display: block;
8897
}
98+
99+
/* Media Query for Large Screens */
89100
@media only screen and (min-width: 993px) {
90-
nav {
91-
border-width: 0;
92-
border-inline-end-width: 3px;
93-
height: 100%;
94-
left: -236px;
95-
overflow: hidden;
96-
position: fixed;
97-
top: 0;
98-
width: 300px;
99-
z-index: 2;
100-
}
101-
nav .nav-bars,
102-
nav .nav-gears,
103-
nav .nav-ws-status {
104-
left: 0;
105-
position: fixed;
106-
top: 1.5rem;
107-
transition: opacity .2s;
108-
}
109-
nav .nav-gears {
110-
top: 7.9rem;
111-
}
112-
nav .nav-ws-status {
113-
left: 46px;
114-
top: 12.3rem;
115-
}
116-
nav.active .nav-list {
117-
margin-block-start: 0;
118-
bottom: 0;
119-
left: 0;
120-
display: block;
121-
overflow-y: scroll;
122-
position: absolute;
123-
right: -17px;
124-
top: 0;
125-
}
101+
102+
nav .nav-bars,
103+
nav .nav-gears,
104+
nav .nav-ws-status {
105+
left: 0;
106+
position: fixed;
107+
top: 1.5rem;
108+
transition: opacity .2s;
109+
}
110+
111+
nav .nav-gears {
112+
top: 7.9rem;
113+
}
114+
115+
nav .nav-ws-status {
116+
left: 38px;
117+
top: 12.3rem;
118+
}
119+
120+
nav.active .nav-list {
121+
margin-block-start: 0;
122+
}
126123
}
124+
125+
/* Navigation Header */
127126
nav header {
128127
margin: 40px 20px 30px;
129128
}
129+
130130
nav header a {
131-
color: rgba(240,240,240,.7);
131+
color: rgba(240, 240, 240, .7);
132132
font-size: 2.7em;
133133
font-weight: 300;
134134
text-transform: uppercase;
135135
}
136+
136137
nav header a:hover {
137138
color: #eee;
138139
}
140+
141+
/* Active Navigation */
139142
nav.active {
140143
display: block !important;
141144
left: 0;
142145
opacity: .97;
143146
}
147+
144148
nav.active .nav-bars,
145149
nav.active .nav-gears,
146150
nav.active .nav-ws-status {
147151
opacity: 0;
148152
visibility: hidden;
149153
}
154+
155+
/* Navigation Icons */
150156
nav .nav-bars,
151157
nav .nav-gears,
152158
nav .nav-ws-status {
153-
-webkit-transition: opacity .2s;
154159
background: none;
155160
border: none;
156161
color: #9E9E9E;
157162
font-size: 36px;
158-
height: 64px;
163+
height: 60px;
164+
width: 60px;
159165
transition: opacity .2s;
160-
width: 64px;
161166
}
167+
162168
nav .nav-bars:hover,
163169
nav .nav-gears:hover {
164170
color: gainsboro;
165171
}
166-
nav .nav-ws-status {
172+
173+
/* WebSocket Status */
174+
nav .nav-ws-status,
175+
.nav-ws-status.mini {
167176
color: crimson;
168177
cursor: help;
169178
display: none;
@@ -172,12 +181,21 @@ nav .nav-ws-status {
172181
width: 12px;
173182
}
174183

184+
.nav-ws-status.mini {
185+
top: 14px;
186+
left: 40px;
187+
position: absolute;
188+
}
189+
175190
.nav-ws-status.fa-circle {
176191
color: #5DB56A;
177192
}
193+
194+
/* Navigation List Items */
178195
nav li {
179196
position: relative;
180197
}
198+
181199
nav li .toggle-panel {
182200
cursor: pointer;
183201
opacity: 0;
@@ -188,24 +206,31 @@ nav li .toggle-panel {
188206
transition: all .2s;
189207
visibility: hidden;
190208
}
209+
191210
nav li .toggle-panel i {
192-
color: rgba(200,200,200,.5);
211+
color: rgba(200, 200, 200, .5);
193212
opacity: 0;
194213
}
214+
195215
nav li .toggle-panel.active i {
196216
color: #eee;
197217
opacity: 1;
198218
}
219+
220+
/* Show Toggle Panel in Active Navigation */
199221
nav.active li .toggle-panel {
200222
visibility: visible;
201223
opacity: 1;
202224
}
225+
203226
nav.active li:hover .toggle-panel i {
204227
opacity: 1;
205228
}
229+
230+
/* Navigation Links */
206231
nav li a {
207232
border-left: 3px solid transparent;
208-
color: rgba(200,200,200,.5);
233+
color: rgba(200, 200, 200, .5);
209234
display: block;
210235
font-size: smaller;
211236
max-width: 235px;
@@ -217,25 +242,32 @@ nav li a {
217242
transition: opacity .2s;
218243
white-space: nowrap;
219244
}
245+
220246
nav.active li a {
221247
max-width: 90%;
222248
opacity: 1;
223249
}
250+
224251
nav li:hover a,
225252
nav li.active a {
226-
background: rgba(0,0,0,.1);
253+
background: rgba(0, 0, 0, .1);
227254
border-color: #5BC0DE;
228255
color: #eee;
229256
}
257+
258+
/* Unordered List */
230259
nav ul {
231260
padding-left: 0;
232261
list-style: none;
233262
}
234-
/* Navigation -- Icon */
263+
264+
/* Navigation Links */
235265
nav a,
236266
nav a:hover {
237267
text-decoration: none;
238268
}
269+
270+
/* Navigation Section Titles */
239271
nav h3 {
240272
color: #FFF !important;
241273
font-size: medium;

‎resources/js/app.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ GoAccess.OverallStats = {
385385
renderData: function (data, ui) {
386386
var idx = 0, row = null;
387387

388-
$('#last-updated span').innerHTML = data.date_time;
388+
$('.last-updated').innerHTML = data.date_time;
389389
$('#overall').innerHTML = '';
390390

391391
if (GoAccess.Util.isPanelHidden('general'))
@@ -429,6 +429,11 @@ GoAccess.Nav = {
429429
this.renderOpts(e);
430430
}.bind(this);
431431

432+
$('.nav-minibars').onclick = function (e) {
433+
e.stopPropagation();
434+
this.renderOpts(e);
435+
}.bind(this);
436+
432437
$('body').onclick = function (e) {
433438
$('nav').classList.remove('active');
434439
}.bind(this);

‎src/output.c‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -287,20 +287,34 @@ static void
287287
print_html_body (FILE * fp, const char *now)
288288
{
289289
fprintf (fp,
290-
"<nav class='hide'></nav>"
291-
"<i class='spinner fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i>"
292-
"<div class='container hide'>"
290+
"<nav class='hidden-xs hidden-sm hide' aria-label='Main navigation'>"
291+
"</nav>"
292+
"<i class='spinner fa fa-circle-o-notch fa-spin fa-3x fa-fw' aria-hidden='true' aria-label='Loading'></i>"
293+
"<div class='container hide' role='document'>"
293294
"<header class='page-header'>"
294-
"<h1><i class='fa fa-tachometer' aria-hidden='true'></i> %s</h1>"
295-
"<p id='last-updated' class='label label-info' aria-live='polite' aria-atomic'true' style='display:%s'>%s: <span>%s</span></p>", T_DASH, conf.no_html_last_updated ? "none" : "block", INFO_LAST_UPDATED, now);
296-
295+
"<h1 class='h-dashboard'>"
296+
"<span class='hidden-xs hidden-sm'>"
297+
"<i class='fa fa-tachometer' aria-hidden='true'></i> %s"
298+
"</span>"
299+
"<span class='visible-xs visible-sm'>"
300+
"<i class='fa fa-bars nav-minibars' aria-label='Menu' role='button' tabindex='0'></i>"
301+
"<i class='fa fa-circle nav-ws-status mini' aria-label='Status indicator'></i>"
302+
"</span>"
303+
"</h1>"
304+
"<div style='margin-left: auto;'>"
305+
"<h4>"
306+
"<span class='label label-info' style='display:%s' id='last-updated' aria-live='polite' aria-atomic='true'>"
307+
"<span class='hidden-xs'>%s: </span>"
308+
"<span class='last-updated'>%s</span>"
309+
"</span>"
310+
"</h4>"
311+
"</div>", T_DASH, conf.no_html_last_updated ? "none" : "block", INFO_LAST_UPDATED, now);
297312
fprintf (fp,
298-
"<p class='report-title'>%s</p>"
313+
"<p class='report-title' id='report-title'>%s</p>"
299314
"</header>"
300-
"<aside id='overall'></aside>"
301-
"<main id='panels'></main>"
315+
"<aside id='overall' aria-labelledby='overall-heading'></aside>"
316+
"<main id='panels' aria-labelledby='report-title'></main>"
302317
"</div>", conf.html_report_title ? conf.html_report_title : "");
303-
304318
fprintf (fp, "%.*s", tpls_length, tpls);
305319
}
306320

0 commit comments

Comments
 (0)