Fix nodes menu sizing (responsive) (#6455)

* Closes #5812 menu sizing

web/gui/index.html

@@ -16,23 +16,6 @@
     <link rel="stylesheet" type="text/css" href="main.css?v=5">
 
     <link rel="icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNpiYBgFo+A/w34gpiZ8DzWzAYgNiHGAA5UdgA73g+2gcyhgg/0DGQoweB6IBQYyFCCOGOBQwBMd/xnW09ERDtgcoEBHB+zHFQrz6egIBUasocDAcJ9OxWAhE4YQI8MDILmATg7wZ8QRDfQKhQf4Cie6pAVGPA4AhQKo0BCgZRAw4ZSBpIWJNI6CD4wEKikBaFqgVSgcYMIrzcjwgcahcIGRiPYCLUPBkNhWUwP9akVcoQBpatG4MsLviAIqWj6f3Absfdq2igg7IIEKDVQKEzN5ofAenJCp1I8gJRTug5tfkGIdR1FDniMI+QZUjF8Amn5htOdHCAAEGACE6B0cS6mrEwAAAABJRU5ErkJggg==" />
-    <!-- <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-    <link rel="manifest" href="manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff"> -->
 
     <meta property="og:locale"             content="en_US" />
     <meta property="og:url"                content="https://my-netdata.io" />
@@ -80,23 +63,6 @@
     </script>
     <nav class="navbar navbar-default navbar-fixed-top" role="banner">
         <div class="container">
-            <!-- <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left" role="navigation" style="padding-right: 20px;">
-                <ul class="nav navbar-nav">
-                    <li data-placement="right" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
-                       <img src="images/netdata-logomark.svg" height="32"/>
-                    </li>
-                    <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
-                        <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
-                        <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
-                            <div class="agent-item" style="white-space: nowrap">
-                                <i class="fas fa-hourglass-half"></i>
-                                Loading, please wait...
-                                <div></div>
-                            </div>                            
-                        </div>
-                    </li>
-                </ul>
-            </nav> -->
             <div class="navbar-header">
                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                     <span class="sr-only">Toggle navigation</span>
@@ -104,13 +70,14 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <!-- <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> -->
                 <ul class="nav navbar-nav" style="display: inline-block">
                     <li data-placement="right" class="hidden-xs hidden-sm" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
                        <img src="images/netdata-logomark.svg" height="32"/>
                     </li>
                     <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
-                        <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
+                        <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">
+                        my-netdata
+                        <strong class="caret"></strong></a>
                         <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
                             <div class="agent-item" style="white-space: nowrap">
                                 <i class="fas fa-hourglass-half"></i>
@@ -135,26 +102,6 @@
                     <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>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
                     <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>&nbsp;<span class="hidden-sm hidden-md">Help</span></a></li>
                     <li id="account-menu-container" class="dropdown" data-toggle="tooltip"></li>
-                    <!--
-                    <li class="dropdown hidden-sm hidden-md hidden-lg" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
-                        <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
-                            <div class="agent-item" style="white-space: nowrap">
-                                <i class="fas fa-hourglass-half"></i>
-                                Loading, please wait...
-                                <div></div>
-                            </div>                            
-                        </div>
-                    </li>
-                    -->
-                    <!--
-                    <li class="dropdown hidden-sm hidden-md hidden-lg">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Nodes <strong class="caret"></strong></a>
-                        <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
-                            <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
-                        </ul>
-                    </li>
-                    -->
                 </ul>
             </nav>
         </div>

web/gui/main.css

@@ -151,12 +151,6 @@ body.modal-open {
     /*width: 220px;*/
 }
 
-/*
-.affix-top {
-    width: 220px;
-}
-*/
-
 .dashboard-sidebar {
     max-height: calc(100% - 70px) !important;
     overflow-y: auto;
@@ -168,12 +162,6 @@ body.modal-open {
     position: static;
 }
 
-@media (min-width: 768px) {
-    .dashboard-sidebar {
-        padding-left: 20px;
-    }
-}
-
 /* First level of nav */
 .dashboard-sidenav {
     margin-top: 20px;
@@ -353,146 +341,6 @@ body.modal-open {
     user-select: none;
 }
 
-@media print {
-    body {
-        overflow: visible !important;
-        -webkit-print-color-adjust: exact;
-        page-break-inside: auto;
-        page-break-before: auto;
-        page-break-after: auto;
-    }
-
-    .dashboard-section {
-        page-break-inside: auto;
-        page-break-before: auto;
-        page-break-after: auto;
-    }
-
-    .dashboard-subsection {
-        page-break-before: avoid;
-        page-break-after: auto;
-        page-break-inside: auto;
-    }
-
-    .charts-body {
-        padding-left: 0%;
-        padding-right: 0%;
-        display: block;
-        page-break-inside: auto;
-        page-break-before: auto;
-        page-break-after: auto;
-    }
-
-    .back-to-top,
-    .dashboard-theme-toggle {
-        display: block;
-    }
-}
-
-@media (min-width: 768px) {
-    .charts-body {
-        padding-left: 0%;
-        padding-right: 0%;
-    }
-
-    .back-to-top,
-    .dashboard-theme-toggle {
-        display: block;
-    }
-}
-
-/* Show and affix the side nav when space allows it */
-@media (min-width: 992px) {
-    .container {
-        padding-left: 0% !important;
-    }
-
-    .charts-body {
-        width: calc(100% - 213px) !important;
-        padding-left: 1% !important;
-        padding-right: 0% !important;
-    }
-
-    .sidebar-body {
-        display: inline-block !important;
-        width: 213px !important;
-    }
-
-    .dashboard-sidebar .nav > .active > ul {
-        display: block;
-    }
-
-    /* Widen the fixed sidebar */
-    .dashboard-sidebar.affix,
-    .dashboard-sidebar.affix-top,
-    .dashboard-sidebar.affix-bottom {
-        width: 213px !important;
-    }
-
-    .dashboard-sidebar.affix {
-        position: fixed; /* Undo the static from mobile first approach */
-        top: 20px;
-    }
-
-    .dashboard-sidebar.affix-bottom {
-        position: absolute; /* Undo the static from mobile first approach */
-    }
-
-    .dashboard-sidebar.affix-bottom .dashboard-sidenav,
-    .dashboard-sidebar.affix .dashboard-sidenav {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-}
-
-@media (min-width: 1200px) {
-    .container {
-        padding-left: 2% !important;
-    }
-
-    .charts-body {
-        width: calc(100% - 233px) !important;
-        padding-left: 1% !important;
-        padding-right: 1% !important;
-    }
-
-    .sidebar-body {
-        display: inline-block !important;
-        width: 233px !important;
-    }
-
-    /* Widen the fixed sidebar again */
-    .dashboard-sidebar.affix,
-    .dashboard-sidebar.affix-top,
-    .dashboard-sidebar.affix-bottom {
-        width: 233px !important;
-    }
-}
-
-@media (min-width: 1360px) {
-    .container {
-        padding-left: 3% !important;
-    }
-
-    .charts-body {
-        width: calc(100% - 263px) !important;
-        padding-left: 1% !important;
-        padding-right: 2% !important;
-    }
-
-    .sidebar-body {
-        display: inline-block !important;
-        width: 263px !important;
-    }
-
-    /* Widen the fixed sidebar again */
-    .dashboard-sidebar.affix,
-    .dashboard-sidebar.affix-top,
-    .dashboard-sidebar.affix-bottom {
-        width: 263px !important;
-    }
-}
-
 .action-button {
     position: relative;
     display: inline-block;
@@ -664,8 +512,23 @@ body.modal-open {
     right: 19px;
 }
 
+#myNetdataDropdownParent {
+    float: left;
+}
+
 #hostname {
     font-size: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 220px;
+ }
+
+ #hostnametext {
+    white-space: pre;
+    float: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 160px;
 }
 
 .sign-in-btn {
@@ -718,3 +581,180 @@ body.modal-open {
 .beta {
     color:#FFCC00;    
 }
+
+ 
+@media (min-width: 1400px) {
+    #hostname {
+        max-width: 600px !important;
+    }
+
+    #hostnametext {
+        max-width: 540px !important;
+    }
+}
+
+@media (min-width: 1360px) {
+    .container {
+        padding-left: 3% !important;
+    }
+
+    #hostname {
+        max-width: 280px !important;
+     }
+ 
+     #hostnametext {
+        max-width: 220px !important;
+     }
+    
+    .charts-body {
+        width: calc(100% - 263px) !important;
+        padding-left: 1% !important;
+        padding-right: 2% !important;
+    }
+
+    .sidebar-body {
+        display: inline-block !important;
+        width: 263px !important;
+    }
+
+    /* Widen the fixed sidebar again */
+    .dashboard-sidebar.affix,
+    .dashboard-sidebar.affix-top,
+    .dashboard-sidebar.affix-bottom {
+        width: 263px !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    #hostname {
+        max-width: 100px;
+    }
+ 
+    #hostnametext {
+        max-width: 40px;
+    }
+    .container {
+        padding-left: 2% !important;
+    }
+
+
+    .charts-body {
+        width: calc(100% - 233px) !important;
+        padding-left: 1% !important;
+        padding-right: 1% !important;
+    }
+
+    .sidebar-body {
+        display: inline-block !important;
+        width: 233px !important;
+    }
+
+    /* Widen the fixed sidebar again */
+    .dashboard-sidebar.affix,
+    .dashboard-sidebar.affix-top,
+    .dashboard-sidebar.affix-bottom {
+        width: 233px !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        padding-left: 0% !important;
+    }
+
+    .charts-body {
+        width: calc(100% - 213px) !important;
+        padding-left: 1% !important;
+        padding-right: 0% !important;
+    }
+
+    .sidebar-body {
+        display: inline-block !important;
+        width: 213px !important;
+    }
+
+    .dashboard-sidebar .nav > .active > ul {
+        display: block;
+    }
+
+    /* Widen the fixed sidebar */
+    .dashboard-sidebar.affix,
+    .dashboard-sidebar.affix-top,
+    .dashboard-sidebar.affix-bottom {
+        width: 213px !important;
+    }
+
+    .dashboard-sidebar.affix {
+        position: fixed; /* Undo the static from mobile first approach */
+        top: 20px;
+    }
+
+    .dashboard-sidebar.affix-bottom {
+        position: absolute; /* Undo the static from mobile first approach */
+    }
+
+    .dashboard-sidebar.affix-bottom .dashboard-sidenav,
+    .dashboard-sidebar.affix .dashboard-sidenav {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+
+@media (min-width: 860px) {
+    .dashboard-sidebar {
+        padding-left: 20px;
+    }
+
+}
+
+@media (min-width: 768px) {
+    .dashboard-sidebar {
+        padding-left: 20px;
+    }
+
+    .charts-body {
+        padding-left: 0%;
+        padding-right: 0%;
+    }
+
+    .back-to-top,
+    .dashboard-theme-toggle {
+        display: block;
+    }
+}
+
+@media print {
+    body {
+        overflow: visible !important;
+        -webkit-print-color-adjust: exact;
+        page-break-inside: auto;
+        page-break-before: auto;
+        page-break-after: auto;
+    }
+
+    .dashboard-section {
+        page-break-inside: auto;
+        page-break-before: auto;
+        page-break-after: auto;
+    }
+
+    .dashboard-subsection {
+        page-break-before: avoid;
+        page-break-after: auto;
+        page-break-inside: auto;
+    }
+
+    .charts-body {
+        padding-left: 0%;
+        padding-right: 0%;
+        display: block;
+        page-break-inside: auto;
+        page-break-before: auto;
+        page-break-after: auto;
+    }
+
+    .back-to-top,
+    .dashboard-theme-toggle {
+        display: block;
+    }
+}

web/gui/main.js

@@ -1775,8 +1775,6 @@ function renderPage(menus, data) {
                 if (urlOptions.mode === 'print') {
                     chtml += '</div>';
                 }
-
-                // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
             }
 
             head += '</div>';
@@ -2747,7 +2745,7 @@ function initializeDynamicDashboardWithData(data) {
         }
 
         // update the dashboard hostname
-        document.getElementById('hostname').innerHTML = options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + '&nbsp;&nbsp;<strong class="caret">';
+        document.getElementById('hostname').innerHTML = '<span id="hostnametext">' + options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + '</span>&nbsp;&nbsp;<strong class="caret">';
         document.getElementById('hostname').href = NETDATA.serverDefault;
         document.getElementById('netdataVersion').innerHTML = options.version;