Fix nodes menu sizing (responsive) (#6455)
* Closes #5812 menu sizing
builat committed
Jul 22, 2019 at 16:27 UTC
d96b649d6eb783d6c46167d56d0c38d8d013e06f
3 files changed
+196
-211
web/gui/index.html
+3
-56
@@ -16,23 +16,6 @@
16
<link rel="stylesheet" type="text/css" href="main.css?v=5">
17
18
<link rel="icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNpiYBgFo+A/w34gpiZ8DzWzAYgNiHGAA5UdgA73g+2gcyhgg/0DGQoweB6IBQYyFCCOGOBQwBMd/xnW09ERDtgcoEBHB+zHFQrz6egIBUasocDAcJ9OxWAhE4YQI8MDILmATg7wZ8QRDfQKhQf4Cie6pAVGPA4AhQKo0BCgZRAw4ZSBpIWJNI6CD4wEKikBaFqgVSgcYMIrzcjwgcahcIGRiPYCLUPBkNhWUwP9akVcoQBpatG4MsLviAIqWj6f3Absfdq2igg7IIEKDVQKEzN5ofAenJCp1I8gJRTug5tfkGIdR1FDniMI+QZUjF8Amn5htOdHCAAEGACE6B0cS6mrEwAAAABJRU5ErkJggg==" />
19
- <!-- <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
20
- <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
21
- <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
22
- <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
23
- <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
24
- <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
25
- <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
26
- <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
27
- <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
28
- <link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
29
- <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
30
- <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
31
- <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
32
- <link rel="manifest" href="manifest.json">
33
- <meta name="msapplication-TileColor" content="#ffffff">
34
- <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
35
- <meta name="theme-color" content="#ffffff"> -->
19
20
<meta property="og:locale" content="en_US" />
21
<meta property="og:url" content="https://my-netdata.io" />
@@ -80,23 +63,6 @@
63
</script>
64
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
65
<div class="container">
83
- <!-- <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left" role="navigation" style="padding-right: 20px;">
84
- <ul class="nav navbar-nav">
85
- <li data-placement="right" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
86
- <img src="images/netdata-logomark.svg" height="32"/>
87
- </li>
88
- <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
89
- <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
90
- <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
91
- <div class="agent-item" style="white-space: nowrap">
92
- <i class="fas fa-hourglass-half"></i>
93
- Loading, please wait...
94
- <div></div>
95
- </div>
96
- </div>
97
- </li>
98
- </ul>
99
- </nav> -->
66
<div class="navbar-header">
67
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
68
<span class="sr-only">Toggle navigation</span>
@@ -104,13 +70,14 @@
70
<span class="icon-bar"></span>
71
<span class="icon-bar"></span>
72
</button>
107
- <!-- <a href="/" class="navbar-brand" id="1hostname" title="server hostname<br/>click it to reload the dashboard" data-toggle="tooltip" data-placement="bottom">netdata</a> -->
73
<ul class="nav navbar-nav" style="display: inline-block">
74
<li data-placement="right" class="hidden-xs hidden-sm" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
75
<img src="images/netdata-logomark.svg" height="32"/>
76
</li>
77
<li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
113
- <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
78
+ <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">
79
+ my-netdata
80
+ <strong class="caret"></strong></a>
81
<div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
82
<div class="agent-item" style="white-space: nowrap">
83
<i class="fas fa-hourglass-half"></i>
@@ -135,26 +102,6 @@
102
<li title="print this dashboard to PDF" data-toggle="tooltip" data-placement="bottom" id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal"><i class="fas fa-print"></i> <span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
103
<li title="get help on using the charts" data-toggle="tooltip" data-placement="bottom" class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fas fa-question-circle"></i> <span class="hidden-sm hidden-md">Help</span></a></li>
104
<li id="account-menu-container" class="dropdown" data-toggle="tooltip"></li>
138
- <!--
139
- <li class="dropdown hidden-sm hidden-md hidden-lg" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
140
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
141
- <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
142
- <div class="agent-item" style="white-space: nowrap">
143
- <i class="fas fa-hourglass-half"></i>
144
- Loading, please wait...
145
- <div></div>
146
- </div>
147
- </div>
148
- </li>
149
- -->
150
- <!--
151
- <li class="dropdown hidden-sm hidden-md hidden-lg">
152
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Nodes <strong class="caret"></strong></a>
153
- <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
154
- <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
155
- </ul>
156
- </li>
157
- -->
105
</ul>
106
</nav>
107
</div>
web/gui/main.css
+192
-152
@@ -151,12 +151,6 @@ body.modal-open {
151
/*width: 220px;*/
152
}
153
154
-/*
155
-.affix-top {
156
- width: 220px;
157
-}
158
-*/
159
-
154
.dashboard-sidebar {
155
max-height: calc(100% - 70px) !important;
156
overflow-y: auto;
@@ -168,12 +162,6 @@ body.modal-open {
162
position: static;
163
}
164
171
-@media (min-width: 768px) {
172
- .dashboard-sidebar {
173
- padding-left: 20px;
174
- }
175
-}
176
-
165
/* First level of nav */
166
.dashboard-sidenav {
167
margin-top: 20px;
@@ -353,146 +341,6 @@ body.modal-open {
341
user-select: none;
342
}
343
356
-@media print {
357
- body {
358
- overflow: visible !important;
359
- -webkit-print-color-adjust: exact;
360
- page-break-inside: auto;
361
- page-break-before: auto;
362
- page-break-after: auto;
363
- }
364
-
365
- .dashboard-section {
366
- page-break-inside: auto;
367
- page-break-before: auto;
368
- page-break-after: auto;
369
- }
370
-
371
- .dashboard-subsection {
372
- page-break-before: avoid;
373
- page-break-after: auto;
374
- page-break-inside: auto;
375
- }
376
-
377
- .charts-body {
378
- padding-left: 0%;
379
- padding-right: 0%;
380
- display: block;
381
- page-break-inside: auto;
382
- page-break-before: auto;
383
- page-break-after: auto;
384
- }
385
-
386
- .back-to-top,
387
- .dashboard-theme-toggle {
388
- display: block;
389
- }
390
-}
391
-
392
-@media (min-width: 768px) {
393
- .charts-body {
394
- padding-left: 0%;
395
- padding-right: 0%;
396
- }
397
-
398
- .back-to-top,
399
- .dashboard-theme-toggle {
400
- display: block;
401
- }
402
-}
403
-
404
-/* Show and affix the side nav when space allows it */
405
-@media (min-width: 992px) {
406
- .container {
407
- padding-left: 0% !important;
408
- }
409
-
410
- .charts-body {
411
- width: calc(100% - 213px) !important;
412
- padding-left: 1% !important;
413
- padding-right: 0% !important;
414
- }
415
-
416
- .sidebar-body {
417
- display: inline-block !important;
418
- width: 213px !important;
419
- }
420
-
421
- .dashboard-sidebar .nav > .active > ul {
422
- display: block;
423
- }
424
-
425
- /* Widen the fixed sidebar */
426
- .dashboard-sidebar.affix,
427
- .dashboard-sidebar.affix-top,
428
- .dashboard-sidebar.affix-bottom {
429
- width: 213px !important;
430
- }
431
-
432
- .dashboard-sidebar.affix {
433
- position: fixed; /* Undo the static from mobile first approach */
434
- top: 20px;
435
- }
436
-
437
- .dashboard-sidebar.affix-bottom {
438
- position: absolute; /* Undo the static from mobile first approach */
439
- }
440
-
441
- .dashboard-sidebar.affix-bottom .dashboard-sidenav,
442
- .dashboard-sidebar.affix .dashboard-sidenav {
443
- margin-top: 0;
444
- margin-bottom: 0;
445
- }
446
-}
447
-
448
-@media (min-width: 1200px) {
449
- .container {
450
- padding-left: 2% !important;
451
- }
452
-
453
- .charts-body {
454
- width: calc(100% - 233px) !important;
455
- padding-left: 1% !important;
456
- padding-right: 1% !important;
457
- }
458
-
459
- .sidebar-body {
460
- display: inline-block !important;
461
- width: 233px !important;
462
- }
463
-
464
- /* Widen the fixed sidebar again */
465
- .dashboard-sidebar.affix,
466
- .dashboard-sidebar.affix-top,
467
- .dashboard-sidebar.affix-bottom {
468
- width: 233px !important;
469
- }
470
-}
471
-
472
-@media (min-width: 1360px) {
473
- .container {
474
- padding-left: 3% !important;
475
- }
476
-
477
- .charts-body {
478
- width: calc(100% - 263px) !important;
479
- padding-left: 1% !important;
480
- padding-right: 2% !important;
481
- }
482
-
483
- .sidebar-body {
484
- display: inline-block !important;
485
- width: 263px !important;
486
- }
487
-
488
- /* Widen the fixed sidebar again */
489
- .dashboard-sidebar.affix,
490
- .dashboard-sidebar.affix-top,
491
- .dashboard-sidebar.affix-bottom {
492
- width: 263px !important;
493
- }
494
-}
495
-
344
.action-button {
345
position: relative;
346
display: inline-block;
@@ -664,8 +512,23 @@ body.modal-open {
512
right: 19px;
513
}
514
515
+#myNetdataDropdownParent {
516
+ float: left;
517
+}
518
+
519
#hostname {
520
font-size: 18px;
521
+ overflow: hidden;
522
+ text-overflow: ellipsis;
523
+ max-width: 220px;
524
+ }
525
+
526
+ #hostnametext {
527
+ white-space: pre;
528
+ float: left;
529
+ text-overflow: ellipsis;
530
+ overflow: hidden;
531
+ max-width: 160px;
532
}
533
534
.sign-in-btn {
@@ -718,3 +581,180 @@ body.modal-open {
581
.beta {
582
color:#FFCC00;
583
}
584
+
585
+
586
+@media (min-width: 1400px) {
587
+ #hostname {
588
+ max-width: 600px !important;
589
+ }
590
+
591
+ #hostnametext {
592
+ max-width: 540px !important;
593
+ }
594
+}
595
+
596
+@media (min-width: 1360px) {
597
+ .container {
598
+ padding-left: 3% !important;
599
+ }
600
+
601
+ #hostname {
602
+ max-width: 280px !important;
603
+ }
604
+
605
+ #hostnametext {
606
+ max-width: 220px !important;
607
+ }
608
+
609
+ .charts-body {
610
+ width: calc(100% - 263px) !important;
611
+ padding-left: 1% !important;
612
+ padding-right: 2% !important;
613
+ }
614
+
615
+ .sidebar-body {
616
+ display: inline-block !important;
617
+ width: 263px !important;
618
+ }
619
+
620
+ /* Widen the fixed sidebar again */
621
+ .dashboard-sidebar.affix,
622
+ .dashboard-sidebar.affix-top,
623
+ .dashboard-sidebar.affix-bottom {
624
+ width: 263px !important;
625
+ }
626
+}
627
+
628
+@media (min-width: 1200px) {
629
+ #hostname {
630
+ max-width: 100px;
631
+ }
632
+
633
+ #hostnametext {
634
+ max-width: 40px;
635
+ }
636
+ .container {
637
+ padding-left: 2% !important;
638
+ }
639
+
640
+
641
+ .charts-body {
642
+ width: calc(100% - 233px) !important;
643
+ padding-left: 1% !important;
644
+ padding-right: 1% !important;
645
+ }
646
+
647
+ .sidebar-body {
648
+ display: inline-block !important;
649
+ width: 233px !important;
650
+ }
651
+
652
+ /* Widen the fixed sidebar again */
653
+ .dashboard-sidebar.affix,
654
+ .dashboard-sidebar.affix-top,
655
+ .dashboard-sidebar.affix-bottom {
656
+ width: 233px !important;
657
+ }
658
+}
659
+
660
+@media (min-width: 992px) {
661
+ .container {
662
+ padding-left: 0% !important;
663
+ }
664
+
665
+ .charts-body {
666
+ width: calc(100% - 213px) !important;
667
+ padding-left: 1% !important;
668
+ padding-right: 0% !important;
669
+ }
670
+
671
+ .sidebar-body {
672
+ display: inline-block !important;
673
+ width: 213px !important;
674
+ }
675
+
676
+ .dashboard-sidebar .nav > .active > ul {
677
+ display: block;
678
+ }
679
+
680
+ /* Widen the fixed sidebar */
681
+ .dashboard-sidebar.affix,
682
+ .dashboard-sidebar.affix-top,
683
+ .dashboard-sidebar.affix-bottom {
684
+ width: 213px !important;
685
+ }
686
+
687
+ .dashboard-sidebar.affix {
688
+ position: fixed; /* Undo the static from mobile first approach */
689
+ top: 20px;
690
+ }
691
+
692
+ .dashboard-sidebar.affix-bottom {
693
+ position: absolute; /* Undo the static from mobile first approach */
694
+ }
695
+
696
+ .dashboard-sidebar.affix-bottom .dashboard-sidenav,
697
+ .dashboard-sidebar.affix .dashboard-sidenav {
698
+ margin-top: 0;
699
+ margin-bottom: 0;
700
+ }
701
+}
702
+
703
+@media (min-width: 860px) {
704
+ .dashboard-sidebar {
705
+ padding-left: 20px;
706
+ }
707
+
708
+}
709
+
710
+@media (min-width: 768px) {
711
+ .dashboard-sidebar {
712
+ padding-left: 20px;
713
+ }
714
+
715
+ .charts-body {
716
+ padding-left: 0%;
717
+ padding-right: 0%;
718
+ }
719
+
720
+ .back-to-top,
721
+ .dashboard-theme-toggle {
722
+ display: block;
723
+ }
724
+}
725
+
726
+@media print {
727
+ body {
728
+ overflow: visible !important;
729
+ -webkit-print-color-adjust: exact;
730
+ page-break-inside: auto;
731
+ page-break-before: auto;
732
+ page-break-after: auto;
733
+ }
734
+
735
+ .dashboard-section {
736
+ page-break-inside: auto;
737
+ page-break-before: auto;
738
+ page-break-after: auto;
739
+ }
740
+
741
+ .dashboard-subsection {
742
+ page-break-before: avoid;
743
+ page-break-after: auto;
744
+ page-break-inside: auto;
745
+ }
746
+
747
+ .charts-body {
748
+ padding-left: 0%;
749
+ padding-right: 0%;
750
+ display: block;
751
+ page-break-inside: auto;
752
+ page-break-before: auto;
753
+ page-break-after: auto;
754
+ }
755
+
756
+ .back-to-top,
757
+ .dashboard-theme-toggle {
758
+ display: block;
759
+ }
760
+}
web/gui/main.js
+1
-3
@@ -1775,8 +1775,6 @@ function renderPage(menus, data) {
1775
if (urlOptions.mode === 'print') {
1776
chtml += '</div>';
1777
}
1778
-
1779
- // console.log(' \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context + ' height: ' + menus[menu].submenus[submenu].height);
1778
}
1779
1780
head += '</div>';
@@ -2747,7 +2745,7 @@ function initializeDynamicDashboardWithData(data) {
2745
}
2746
2747
// update the dashboard hostname
2750
- document.getElementById('hostname').innerHTML = options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + ' <strong class="caret">';
2748
+ document.getElementById('hostname').innerHTML = '<span id="hostnametext">' + options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + '</span> <strong class="caret">';
2749
document.getElementById('hostname').href = NETDATA.serverDefault;
2750
document.getElementById('netdataVersion').innerHTML = options.version;
2751