Simplify mobile header (#3083)

web/css/src/themes/dark.css

@@ -26,6 +26,14 @@ strong {
   box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
 }
 
+.top-bar-usage-inner {
+  color: #909090;
+}
+
+.top-bar-nav-list {
+  background-color: #454545;
+}
+
 .top-bar-nav-link {
   &:hover {
     color: #dadada;
@@ -53,10 +61,6 @@ strong {
   color: #e7e7e7;
 }
 
-.top-bar-usage-inner {
-  color: #909090;
-}
-
 .notification-container {
   background-color: rgb(50 50 50 / 99%);
   text-shadow: 0 1px rgb(0 0 0 / 50%);

web/css/src/themes/default.css

@@ -59,26 +59,18 @@
   background-color: #5070a6;
   box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
   border-bottom: 1px solid #fff;
-
-  @media (--viewport-medium) {
-    position: fixed;
-    width: 100%;
-    z-index: 2;
-    top: 0;
-  }
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+  top: 0;
 }
 
 .top-bar-inner {
-  padding-top: 10px;
-
-  @media (--viewport-medium) {
-    display: flex;
-    height: 40px;
-    padding-top: 0;
-    padding-left: 20px;
-    padding-right: 20px;
-    justify-content: space-between;
-  }
+  display: flex;
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+  justify-content: space-between;
 
   @media (--viewport-large) {
     padding-left: 0;
@@ -87,52 +79,88 @@
 }
 
 .top-bar-left {
-  @media (--viewport-medium) {
-    display: flex;
-    align-items: center;
-  }
+  display: flex;
+  align-items: center;
 }
 
 .top-bar-logo {
   display: block;
   width: 54px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-right: 30px;
+}
 
-  @media (--viewport-medium) {
-    margin-right: 30px;
+.top-bar-usage {
+  display: none;
+
+  @media (--viewport-small) {
+    display: block;
   }
 }
 
-.top-bar-nav {
-  margin-top: 10px;
+.top-bar-usage-inner {
+  display: flex;
+  color: #fff;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  font-weight: 500;
+}
 
-  @media (--viewport-medium) {
-    margin-top: 0;
-    display: flex;
-    align-self: stretch;
+.top-bar-usage-item {
+  margin-right: 11px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  & .fas {
+    margin-right: 3px;
   }
 }
 
-.top-bar-nav-list {
+.top-bar-right {
   display: flex;
 }
 
-.top-bar-nav-item {
+.top-bar-notifications {
   display: flex;
   position: relative;
-  flex-grow: 1;
+}
+
+.top-bar-nav {
+  display: flex;
+  position: relative;
+}
+
+.top-bar-nav-list {
+  display: none;
+  background-color: #4673b6;
+  box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
+  position: absolute;
+  top: 100%;
+  right: 0;
+
+  @media (--viewport-medium) {
+    display: flex !important; /* NOTE: Overrides inline style set by JS */
+    background-color: transparent;
+    box-shadow: none;
+    position: static;
+  }
+}
+
+.top-bar-nav-item {
+  @media (--viewport-medium) {
+    display: flex;
+  }
 }
 
 .top-bar-nav-link {
   color: #f7f7f7;
   display: flex;
-  flex-grow: 1;
   align-items: center;
-  justify-content: center;
   font-size: 0.8rem;
   font-weight: 600;
   text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  background-color: transparent;
+  border: 0;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   padding: 10px;
@@ -178,45 +206,10 @@
 
 .top-bar-nav-link-label {
   margin-left: 6px;
-}
-
-.top-bar-right {
-  @media (--viewport-medium) {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.top-bar-usage {
-  display: none;
-
-  @media (--viewport-medium) {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-  }
+  white-space: nowrap;
 
   @media (--viewport-medium) {
-    margin-top: 0;
-  }
-}
-
-.top-bar-usage-inner {
-  display: flex;
-  color: #fff;
-  text-shadow: 1px 1px rgb(0 0 0 / 25%);
-  font-weight: 500;
-}
-
-.top-bar-usage-item {
-  margin-right: 11px;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  & .fas {
-    margin-right: 3px;
+    display: none;
   }
 }
 
@@ -233,8 +226,8 @@
   overflow-y: auto;
   position: absolute;
   top: 100%;
-  left: 10px;
-  width: 330px;
+  right: 0;
+  width: 300px;
   z-index: 1;
   font-size: 0.8rem;
   color: #6f6f6f;
@@ -244,9 +237,7 @@
   border-top: none;
 
   @media (--viewport-medium) {
-    left: auto;
-    right: 0;
-    width: 390px;
+    width: 400px;
   }
 }
 
@@ -2101,9 +2092,7 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .l-content {
-  @media (--viewport-medium) {
-    padding-top: 40px;
-  }
+  padding-top: 40px;
 }
 
 .console-output {

web/css/src/themes/flat.css

@@ -22,6 +22,10 @@ strong {
   background: #5070a6;
 }
 
+.top-bar-usage-inner {
+  text-shadow: none;
+}
+
 .top-bar-nav-link {
   text-shadow: none;
 
@@ -36,10 +40,6 @@ strong {
   }
 }
 
-.top-bar-usage-inner {
-  text-shadow: none;
-}
-
 .table-header {
   box-shadow: none;
   background: #fafafa;

web/css/src/themes/vestia.css

@@ -26,6 +26,10 @@ strong {
   background: #5d5d5d;
 }
 
+.top-bar-nav-list {
+  background-color: #5d5d5d;
+}
+
 .top-bar-nav-link {
   &:hover,
   &:active {

web/css/src/utilities.css

@@ -146,3 +146,9 @@
   white-space: pre !important;
   line-height: 1.2 !important;
 }
+
+.u-hide-desktop {
+  @media (--viewport-medium) {
+    display: none !important;
+  }
+}

web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.top-bar-usage-inner{text-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link,.top-bar-usage-inner{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}

web/js/init.js

@@ -568,7 +568,6 @@ $(document).ready(function(){
               }
 
               $('.js-notifications').click(function(evt){
-                evt.preventDefault();
                 if(!$('.js-notifications').hasClass('active')){
                   VE.notifications.get_list();
                   $('.js-notifications').addClass('active');
@@ -578,6 +577,9 @@ $(document).ready(function(){
                 }
               });
 
+              $('.js-toggle-top-bar-menu').click(function(evt){
+                $(this).siblings('.top-bar-nav-list').toggle();
+              });
 
             $('.button').attr('title','ctrl+Enter');
             $('.button.cancel').attr('title','ctrl+Backspace');

web/templates/includes/panel.html

@@ -1,4 +1,4 @@
-<div class="hidden" id="token" token="<?=$_SESSION['token']?>"></div>
+<div id="token" token="<?=$_SESSION['token']?>"></div>
 
 <header class="top-bar">
   <div class="l-center top-bar-inner">
@@ -40,12 +40,31 @@
 
     </div>
 
-    <!-- Menu wrapper -->
+    <!-- Notifications / Menu wrapper -->
     <div class="top-bar-right">
 
+      <!-- Notifications -->
+      <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
+        <!-- Do not show notifications panel when impersonating 'admin' user -->
+      <?php } else { ?>
+        <div class="top-bar-notifications">
+          <button type="button" class="top-bar-nav-link js-notifications" title="<?=_('Notifications');?>">
+            <i class="fas fa-bell <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'animate__animated animate__swing status-icon orange' ?>"></i>
+            <span class="u-hidden"><?=_('Notifications');?></span>
+          </button>
+          <ul class="notification-container animate__animated animate__fadeIn u-hidden"></ul>
+        </div>
+      <?php } ?>
+
       <!-- Menu -->
       <nav class="top-bar-nav">
-        <ul class="top-bar-nav-list">
+
+        <button type="button" class="top-bar-nav-link u-hide-desktop js-toggle-top-bar-menu" title="<?=_('Toggle menu');?>">
+          <i class="fas fa-bars"></i>
+          <span class="u-hidden"><?=_('Toggle menu');?></span>
+        </button>
+
+        <ul class="top-bar-nav-list animate__animated animate__fadeIn">
 
           <!-- File Manager -->
           <?php if ((isset($_SESSION['FILE_MANAGER'])) && (!empty($_SESSION['FILE_MANAGER'])) && ($_SESSION['FILE_MANAGER'] == "true")) {?>
@@ -53,35 +72,14 @@
               <!-- Hide file manager when impersonating admin-->
             <?php } else { ?>
               <li class="top-bar-nav-item">
-                <a title="<?=_('Files');?>" class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
+                <a title="<?=_('File manager');?>" class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
                   <i class="fas fa-folder-open"></i>
-                  <span class="u-hidden"><?=_('Files');?></span>
+                  <span class="top-bar-nav-link-label"><?=_('File manager');?></span>
                 </a>
               </li>
             <?php } ?>
           <?php } ?>
 
-          <!-- Statistics -->
-          <li class="top-bar-nav-item">
-            <a title="<?=_('Statistics');?>" class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
-              <i class="fas fa-chart-line"></i>
-              <span class="u-hidden"><?=_('Statistics');?></span>
-            </a>
-          </li>
-
-          <!-- Notifications -->
-          <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
-            <!-- Do not show notifications panel when impersonating 'admin' user -->
-          <?php } else { ?>
-            <li class="top-bar-nav-item">
-              <a title="<?=_('Notifications');?>" class="top-bar-nav-link js-notifications <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'updates' ?>" href="#">
-                <i class="fas fa-bell <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'animate__animated animate__swing status-icon orange' ?>"></i>
-                <span class="u-hidden"><?=_('Notifications');?></span>
-              </a>
-              <ul class="notification-container animate__animated animate__fadeIn u-hidden"></ul>
-            </li>
-          <?php } ?>
-
           <!-- Server Settings -->
           <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['POLICY_SYSTEM_HIDE_SERVICES'] !== 'yes') || ($_SESSION['user'] === 'admin')) {?>
             <?php if (($_SESSION['userContext'] === 'admin') && (!empty($_SESSION['look']))) {?>
@@ -90,7 +88,7 @@
               <li class="top-bar-nav-item">
                 <a title="<?=_('Server');?>" class="top-bar-nav-link <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
                   <i class="fas fa-gear"></i>
-                  <span class="u-hidden"><?=_('Server');?></span>
+                  <span class="top-bar-nav-link-label"><?=_('Server');?></span>
                 </a>
               </li>
             <?php } ?>
@@ -102,7 +100,7 @@
             <li class="top-bar-nav-item">
               <a title="<?=_('Logs');?>" class="top-bar-nav-link <?php if($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
                 <i class="fas fa-clock-rotate-left"></i>
-                <span class="u-hidden"><?=_('Logs');?></span>
+                <span class="top-bar-nav-link-label"><?=_('Logs');?></span>
               </a>
             </li>
           <?php } else { ?>
@@ -110,17 +108,25 @@
               <li class="top-bar-nav-item">
                 <a title="<?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)" class="top-bar-nav-link" href="/edit/user/?user=<?=$user; ?>&token=<?=$_SESSION['token']?>">
                   <i class="fas fa-circle-user"></i>
-                  <span class="u-hidden"><?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)</span>
+                  <span class="top-bar-nav-link-label"><?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)</span>
                 </a>
               </li>
             <?php } ?>
           <?php } ?>
 
+          <!-- Statistics -->
+          <li class="top-bar-nav-item">
+            <a title="<?=_('Statistics');?>" class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
+              <i class="fas fa-chart-line"></i>
+              <span class="top-bar-nav-link-label"><?=_('Statistics');?></span>
+            </a>
+          </li>
+
           <!-- Help / Documentation -->
           <li class="top-bar-nav-item">
             <a title="<?=_('Help');?>" class="top-bar-nav-link" href="https://docs.hestiacp.com/" target="_blank" rel="noopener">
               <i class="fas fa-circle-question"></i>
-              <span class="u-hidden"><?=_('Help');?></span>
+              <span class="top-bar-nav-link-label"><?=_('Help');?></span>
             </a>
           </li>
 
@@ -129,14 +135,14 @@
             <li class="top-bar-nav-item">
               <a title="<?=_('Log out');?> (<?=$user?>)" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
                 <i class="fas fa-circle-up"></i>
-                <span class="u-hidden"><?=_('Log out');?> (<?=$user?>)</span>
+                <span class="top-bar-nav-link-label"><?=_('Log out');?> (<?=$user?>)</span>
               </a>
             </li>
           <?php } else { ?>
             <li class="top-bar-nav-item">
               <a title="<?=_('Log out');?>" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
                 <i class="fas fa-right-from-bracket"></i>
-                <span class="u-hidden"><?=_('Log out');?></span>
+                <span class="top-bar-nav-link-label"><?=_('Log out');?></span>
               </a>
             </li>
           <?php } ?>