From d972a8c61b61c813e9f5a132c192e7f8f4c07ceb Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 5 Oct 2022 16:26:17 -0300
Subject: [PATCH 1/3] Add links to dashboard top boxes

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 index.php         | 14 +++++++++++++-
 style/pi-hole.css | 28 ++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index 17d0d4f8..d18a9845 100644
--- a/index.php
+++ b/index.php
@@ -22,12 +22,15 @@ require_once 'scripts/pi-hole/php/gravity.php';
         <!-- small box -->
         <div class="small-box bg-green 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">
+                <span id="unique_clients">-</span> clients - more info <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
@@ -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">
+                List blocked queries <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
@@ -54,6 +60,9 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-chart-pie"></i>
             </div>
+            <a href="queries.php?forwarddest=blocked" class="small-box-footer">
+                List blocked queries <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
@@ -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">
+                Manage adlists <i class="fa fa-arrow-circle-right"></i>
+            </a>
         </div>
     </div>
     <!-- ./col -->
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 7d030b62..f81e0555 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -424,19 +424,43 @@ 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 p {
+  margin: 0 0 5px;
+}
+
+.small-box > .inner {
+  padding: 10px 10px 0 10px;
+}
+
+@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);
 }
 

From 3e729c5bee076e29fd57b00b63f00839f99e8c47 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Thu, 6 Oct 2022 16:04:48 -0300
Subject: [PATCH 2/3] Visual adjustments

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 index.php              |  6 +++---
 style/pi-hole.css      | 28 +++++++++++++++++++---------
 style/themes/lcars.css |  8 ++++++++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/index.php b/index.php
index d18a9845..cd7789d5 100644
--- a/index.php
+++ b/index.php
@@ -20,7 +20,7 @@ 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</p>
                 <h3 class="statistic"><span id="dns_queries_today">---</span></h3>
@@ -36,7 +36,7 @@ require_once 'scripts/pi-hole/php/gravity.php';
     <!-- ./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>
@@ -68,7 +68,7 @@ require_once 'scripts/pi-hole/php/gravity.php';
     <!-- ./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>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index f81e0555..40eaaa1d 100644
--- a/style/pi-hole.css
+++ b/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;
@@ -434,12 +426,29 @@ td.lookatme {
   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 10px;
+  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) {
@@ -448,6 +457,7 @@ td.lookatme {
     padding: 3px 7px;
   }
 }
+
 .small-box-footer svg {
   margin: 0 5px;
   font-size: 13px;
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index e5f26ae0..94247eef 100644
--- a/style/themes/lcars.css
+++ b/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;

From ed5da96de12ba904bac1396e6ddb5d6374086dda Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Fri, 7 Oct 2022 14:51:21 -0300
Subject: [PATCH 3/3] Applying suggestions

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 index.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.php b/index.php
index cd7789d5..e460fbf4 100644
--- a/index.php
+++ b/index.php
@@ -28,8 +28,8 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-globe-americas"></i>
             </div>
-            <a href="network.php" class="small-box-footer">
-                <span id="unique_clients">-</span> clients - more info <i class="fa fa-arrow-circle-right"></i>
+            <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>
@@ -44,7 +44,7 @@ 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">
+            <a href="queries.php?forwarddest=blocked" class="small-box-footer" title="">
                 List blocked queries <i class="fa fa-arrow-circle-right"></i>
             </a>
         </div>
@@ -60,8 +60,8 @@ require_once 'scripts/pi-hole/php/gravity.php';
             <div class="icon">
                 <i class="fas fa-chart-pie"></i>
             </div>
-            <a href="queries.php?forwarddest=blocked" class="small-box-footer">
-                List blocked queries <i class="fa fa-arrow-circle-right"></i>
+            <a href="queries.php" class="small-box-footer" title="">
+                List all queries <i class="fa fa-arrow-circle-right"></i>
             </a>
         </div>
     </div>
@@ -76,7 +76,7 @@ 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">
+            <a href="groups-adlists.php" class="small-box-footer" title="">
                 Manage adlists <i class="fa fa-arrow-circle-right"></i>
             </a>
         </div>