Add links to dashboard boxes (#2386)

index.php

@@ -20,20 +20,23 @@ require_once 'scripts/pi-hole/php/gravity.php';
 <div class="row">
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-green no-user-select" id="total_queries" title="only A + AAAA queries">
+        <div class="small-box bg-aqua no-user-select" id="total_queries" title="only A + AAAA queries">
             <div class="inner">
-                <p>Total queries (<span id="unique_clients">-</span> clients)</p>
+                <p>Total queries</p>
                 <h3 class="statistic"><span id="dns_queries_today">---</span></h3>
             </div>
             <div class="icon">
                 <i class="fas fa-globe-americas"></i>
             </div>
+            <a href="network.php" class="small-box-footer" title="">
+                <span id="unique_clients">-</span> active clients <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-aqua no-user-select">
+        <div class="small-box bg-red no-user-select">
             <div class="inner">
                 <p>Queries Blocked</p>
                 <h3 class="statistic"><span id="queries_blocked_today">---</span></h3>
@@ -41,6 +44,9 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-hand-paper"></i>
             </div>
+            <a href="queries.php?forwarddest=blocked" class="small-box-footer" title="">
+                List blocked queries <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
@@ -54,12 +60,15 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-chart-pie"></i>
             </div>
+            <a href="queries.php" class="small-box-footer" title="">
+                List all queries <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-red no-user-select" title="<?php echo gravity_last_update(); ?>">
+        <div class="small-box bg-green no-user-select" title="<?php echo gravity_last_update(); ?>">
             <div class="inner">
                 <p>Domains on Adlists</p>
                 <h3 class="statistic"><span id="domains_being_blocked">---</span></h3>
@@ -67,6 +76,9 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-list-alt"></i>
             </div>
+            <a href="groups-adlists.php" class="small-box-footer" title="">
+                Manage adlists <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->

style/pi-hole.css

@@ -9,14 +9,6 @@
   background: url("../img/boxed-bg.png") repeat fixed;
 }
 
-.small-box span {
-  transition-duration: 0.5s;
-}
-
-.small-box span.glow {
-  text-shadow: 0 0 5px currentColor;
-}
-
 @-webkit-keyframes Pulse {
   from {
     opacity: 0;
@@ -424,19 +416,61 @@ td.lookatme {
   padding: 1px;
 }
 
-.box,
+.box {
+  border-radius: 10px;
+}
+
 .small-box {
   border-radius: 10px;
   z-index: 0; /* fix the small-box z-index (related to '.small-box .icon') */
+  overflow: hidden;
+}
+
+.small-box span {
+  transition-duration: 0.5s;
+}
+
+.small-box-footer span {
+  transition-duration: 0s;
+}
+
+.small-box span.glow {
+  text-shadow: 0 0 5px currentColor;
+}
+
+.small-box p {
+  margin: 0 0 5px;
+}
+
+.small-box > .inner {
+  padding: 10px 10px 0;
+}
+
+.small-box > .small-box-footer {
+  color: rgba(255, 255, 255, 0.5);
+  transition: all 0.5s;
+}
+
+@media screen and (min-width: 768px) {
+  .small-box > .small-box-footer {
+    text-align: right;
+    padding: 3px 7px;
+  }
+}
+
+.small-box-footer svg {
+  margin: 0 5px;
+  font-size: 13px;
 }
 
 .small-box .icon {
+  font-size: 76px;
   z-index: -1; /* sends the icon behind the text */
 }
 
 /*** Icons grow on hover, but remain centered ***/
 .small-box:hover .icon {
-  font-size: 90px; /* keep the same font-size, to avoid shifting the position */
+  font-size: 80px; /* keep the same font-size, to avoid shifting the position */
   transform: scale(1.06);
 }
 

style/themes/lcars.css

@@ -1999,6 +1999,14 @@ td.highlight {
   color: #000 !important;
 }
 
+.small-box > .small-box-footer:hover {
+  color: #000;
+}
+
+.small-box > .small-box-footer {
+  color: rgba(0, 0, 0, 0.5);
+}
+
 .small-box .icon,
 .select2-selection__clear {
   font-family: sans-serif;