Merge pull request #2165 from pi-hole/sidebar_warnings

Move warning count to sidebar (when sidebar is visible).
pi-hole · Apr 14, 2022 · 372ce92 · 372ce92
2 parents 93be8ef + 521ecd7
commit 372ce92
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 17 deletions.
diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -366,16 +366,17 @@ function checkMessages() {
     : false;
   $.getJSON("api_db.php?status" + (ignoreNonfatal ? "&ignore=DNSMASQ_WARN" : ""), function (data) {
     if ("message_count" in data && data.message_count > 0) {
+      var more = '\nAccess "Tools/Pi-hole diganosis" for further details.';
       var title =
         data.message_count > 1
-          ? "There are " + data.message_count + " warnings. Click for further details."
-          : "There is one warning. Click for further details.";
+          ? "There are " + data.message_count + " warnings." + more
+          : "There is one warning." + more;
 
-      $("#pihole-diagnosis").prop("title", title);
-      $("#pihole-diagnosis-count").text(data.message_count);
-      $("#pihole-diagnosis").removeClass("hidden");
+      $(".warning-count").prop("title", title);
+      $(".warning-count").text(data.message_count);
+      $(".warning-count").removeClass("hidden");
     } else {
-      $("#pihole-diagnosis").addClass("hidden");
+      $(".warning-count").addClass("hidden");
     }
   });
 }

diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
@@ -231,7 +231,7 @@ function pidofFTL()
     <script src="style/vendor/font-awesome/js/all.min.js?v=<?=$cacheVer?>"></script>
     <script src="scripts/pi-hole/js/utils.js?v=<?=$cacheVer?>"></script>
 </head>
-<body class="hold-transition sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
+<body class="hold-transition sidebar-mini<?php if($boxedlayout){ ?> layout-boxed<?php } ?><?php if($auth){ ?> logged-in<?php } ?>">
 <noscript>
     <!-- JS Warning -->
     <div>
@@ -265,15 +265,10 @@ function pidofFTL()
             <a href="#" class="sidebar-toggle-svg" data-toggle="push-menu" role="button">
                 <i aria-hidden="true" class="fa fa-bars"></i>
                 <span class="sr-only">Toggle navigation</span>
+                <span class="warning-count hidden" id="top-warning-count"></span>
             </a>
             <div class="navbar-custom-menu">
                 <ul class="nav navbar-nav">
-                    <li id="pihole-diagnosis" class="hidden">
-                        <a href="messages.php">
-                            <i class="fa fa-exclamation-triangle fa-2x icon-bounce"></i>
-                            <span class="label label-warning" id="pihole-diagnosis-count"></span>
-                        </a>
-                    </li>
                     <li<?php echo !$hostname ? ' class="hidden"' : "" ?>>
                         <p class="navbar-text">
                             <span class="hidden-xs hidden-sm">hostname:</span>
@@ -540,6 +535,7 @@ function pidofFTL()
                 <li class="treeview<?php if (in_array($scriptname, array("messages.php", "gravity.php", "queryads.php", "auditlog.php", "taillog.php", "taillog-FTL.php", "debug.php", "network.php"))){ ?> active<?php } ?>">
                   <a href="#">
                     <i class="fa fa-fw menu-icon fa-tools"></i> <span>Tools</span>
+                    <span class="warning-count hidden"></span>
                     <span class="pull-right-container">
                       <i class="fa fa-angle-left pull-right"></i>
                     </span>
@@ -549,6 +545,7 @@ function pidofFTL()
                     <li<?php if($scriptname === "messages.php"){ ?> class="active"<?php } ?>>
                         <a href="messages.php">
                             <i class="fa fa-fw menu-icon fa-file-medical-alt"></i> Pi-hole diagnosis
+                            <span class="pull-right-container warning-count hidden"></span>
                         </a>
                     </li>
                     <!-- Run gravity.sh -->

diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -403,6 +403,7 @@ td.lookatme {
 }
 
 .sidebar-toggle-svg {
+  position: relative;
   color: #fff;
   float: left;
   background: none;
@@ -545,6 +546,57 @@ td.details-control {
   .layout-boxed:not(.sidebar-collapse) .login-help p {
     font-size: clamp(11px, (min(100vw, 1250px) - 380px) / 47, 15px);
   }
+
+  /* hide warning icon only when logged in and menu is not collapsed */
+  .logged-in:not(.sidebar-collapse) #top-warning-count {
+    display: none;
+  }
+}
+
+/*** Warning icon and count ***/
+.warning-count {
+  position: absolute;
+  display: inline-block;
+  text-align: center;
+  background: #e08e0b;
+  color: #fff;
+  line-height: 1;
+  padding: 0.25em 0.5em;
+  margin: -0.7em 4px;
+  border-radius: 2em;
+  right: 3em;
+  top: 50%;
+  font-size: 12px;
+}
+
+#top-warning-count {
+  top: 55%;
+  left: 50%;
+  right: unset;
+  margin: 0;
+}
+
+.treeview-menu .warning-count {
+  margin-right: 0;
+  font-size: 10px;
+}
+
+.menu-open > a > span.warning-count {
+  display: none;
+}
+
+/* hide submenu warning count during animation */
+li:not(.menu-open) .treeview-menu .warning-count {
+  display: none;
+}
+
+/* hide warning count when hover a collapsed sidebar */
+.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+  .sidebar-menu
+  > li:hover
+  > a
+  > span.warning-count {
+  display: none !important;
 }
 
 /*** Accessibility - Add focus for checkboxes and radio buttons (icheck) ***/
@@ -690,8 +742,8 @@ td.details-control {
   background: #f60d1a;
 }
 
-.navbar-custom-menu > .navbar-nav > li:nth-child(2) {
-  padding: 0 5px;
+.navbar-custom-menu > .navbar-nav > li:nth-child(1) {
+  padding: 0 10px 0 0;
 }
 
 #apiTokenIframe {

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -559,8 +559,25 @@ p.login-box-msg,
   font-size: 28px;
 }
 
-.icon-bounce {
-  animation: none;
+.warning-count {
+  position: relative;
+  margin: 0;
+  padding: 0.2em 0.52em 0.3em;
+  right: 0;
+  top: 0;
+  background: #fa3;
+  color: #000;
+}
+
+.sidebar-menu li > a > .pull-right-container.warning-count {
+  transform: scale(1);
+  position: relative;
+  bottom: 0.15em;
+}
+
+#top-warning-count {
+  position: absolute;
+  top: 60%;
 }
 
 .dropdown.user.user-menu {