Position notification container with CSS (#3067)

web/css/src/themes/dark.css

@@ -36,7 +36,7 @@ strong {
   background: linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 15%) 95%) !important;
 }
 
-.l-menu__item a {
+.l-menu__item > a {
   color: #e7e7e7;
 
   &:hover {
@@ -53,18 +53,6 @@ strong {
   }
 }
 
-.lang-ar .l-menu__item a {
-  padding: 11px;
-}
-
-.lang-de .l-menu__item a {
-  padding: 11px 12px;
-}
-
-.lang-tw .l-menu__item a {
-  padding: 13px 18px;
-}
-
 .l-profile__logout {
   color: #e7e7e7 !important;
 }

web/css/src/themes/default.css

@@ -66,11 +66,10 @@
   background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
   background-color: #5070a6;
   position: fixed;
-  size: 100% 39px;
+  size: 100% 40px;
   z-index: 900;
   top: 0;
   font-size: 0.8rem;
-  text-shadow: 1px 1px rgb(0 0 0 / 25%);
   box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
   border-bottom: 1px solid #fff;
 }
@@ -108,14 +107,16 @@
 .l-menu__item {
   display: flex;
   align-self: stretch;
-  font-weight: 600;
+  position: relative;
 }
 
-.l-menu__item a {
+.l-menu__item > a {
   color: #f7f7f7;
   display: flex;
   align-items: center;
   position: relative;
+  font-weight: 600;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
   padding-left: 10px;
   padding-right: 10px;
   border-left: 1px solid transparent;
@@ -164,7 +165,6 @@
 .l-profile {
   display: flex;
   align-items: center;
-  overflow: hidden;
 }
 
 .l-profile__username,
@@ -208,11 +208,11 @@
 .notification-container {
   background-color: rgb(255 255 255 / 95%);
   box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
-  margin: 0 18px;
-  max-height: 90%;
+  max-height: 500px;
   overflow-y: auto;
-  position: fixed;
-  top: 34px;
+  position: absolute;
+  top: 100%;
+  right: 0;
   width: 390px;
   z-index: 300;
   font-size: 0.8rem;
@@ -566,7 +566,7 @@
   display: flex;
   position: sticky;
   z-index: 2;
-  top: 38px;
+  top: 39px;
   height: 45px;
   justify-content: center;
   background-color: #fff;
@@ -2243,7 +2243,7 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .l-content {
-  padding-top: 39px;
+  padding-top: 40px;
 }
 
 .l-content.collapsed .l-sort {

web/css/src/themes/flat.css

@@ -34,12 +34,12 @@ strong {
   box-shadow: none !important;
 }
 
-.l-menu__item a:hover {
+.l-menu__item > a:hover {
   background: #fff !important;
   box-shadow: none;
 }
 
-.l-menu__item a:active {
+.l-menu__item > a:active {
   background: none;
   box-shadow: none !important;
 }

web/css/src/themes/vestia.css

@@ -36,7 +36,7 @@ strong {
   background-color: #fff;
 }
 
-.l-menu__item a:hover {
+.l-menu__item > a:hover {
   background: #f79b44 !important;
   box-shadow: none !important;
   padding: 12px 10px !important;
@@ -47,7 +47,7 @@ strong {
   text-shadow: none !important;
 }
 
-.l-menu__item a:active {
+.l-menu__item > a:active {
   background: none;
   box-shadow: none !important;
   text-shadow: none !important;

web/js/init.js

@@ -582,8 +582,6 @@ $(document).ready(function(){
                 if(!$('.l-profile__notifications').hasClass('active')){
                   VE.notifications.get_list();
                   $('.l-profile__notifications').addClass('active');
-                  left = $('.l-profile__notifications').offset().left - $('.notification-container').outerWidth() + 22;
-                  $('.notification-container').css({left: left+'px'});
 
                 } else {
                   $('.notification-container').addClass('u-hidden');

web/templates/includes/panel.html

@@ -15,7 +15,7 @@
       <a href="<?=htmlspecialchars($home_url)?>" class="l-logo" title="<?=_('Hestia Control Panel');?>"></a>
 
       <!-- Left Menu -->
-      <div class="l-menu u-noselect">
+      <div class="l-menu">
         <!-- Records tab -->
         <div class="l-menu__item <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'l-menu__item--active' ?>"><a href="<?=htmlspecialchars($home_url)?>"><i class="fas fa-list-check panel-icon"></i><?=_('Records');?></a></div>
 
@@ -34,7 +34,7 @@
     </div>
 
     <!-- Right Menu -->
-    <div class="l-profile u-noselect">
+    <div class="l-profile">
       <!-- Logged in as / Usage Statistics Overview -->
       <div class="usage-pill">
         <?php
@@ -59,6 +59,7 @@
           <a title="<?=_('Notifications');?>" class="l-profile__notifications <?php if ($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>">
             <i class="fas fa-bell <?php if ($panel[$user]['NOTIFICATIONS'] == 'yes') echo " animate__animated animate__swing status-icon orange"; ?>"></i>
           </a>
+          <ul class="notification-container u-hidden animate__animated animate__fadeIn"></ul>
         </div>
       <?php } ?>
 
@@ -94,8 +95,6 @@
   </div>
 </header>
 
-<ul class="notification-container u-hidden animate__animated animate__fadeIn"></ul>
-
 <div class="l-content">
   <div class="l-center">
 

web/templates/pages/list_server_info.html

@@ -44,7 +44,7 @@
           <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><i class="fas fa-database panel-icon"></i><?=_('DB');?></a></div><?php }?>
         </div>
       </div>
-      <div class="l-profile u-noselect">
+      <div class="l-profile">
         <div class="l-menu__item"><a href="javascript:location.reload();" title="<?=_('Refresh');?>"><i class="fas fa-arrow-rotate-right"></i></a></div>
         <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>" class="l-profile__logout"><i class="fas fa-right-from-bracket"></i></a></div>
       </div>