Merge pull request #2165 from pi-hole/sidebar_warnings

Move warning count to sidebar (when sidebar is visible).
2024-12-06 19:36:21 +01:00 · 2022-04-14 23:10:37 +02:00
parent 93be8ef0c4 521ecd75d5
commit 372ce92d78
4 changed files with 84 additions and 17 deletions
@@ -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");
    }
  });
 }
@@ -231,7 +231,7 @@
    <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 @@ if($auth) {
            <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 @@ if($auth) {
                <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 @@ if($auth) {
                    <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 -->
@@ -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 {
@@ -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 {