From 2d6a78d6cb9e61f702922734c301178619b5238f Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 14 Mar 2022 20:25:55 -0300
Subject: [PATCH 1/2] Improving debug log

- add a message to show while loading content;
- add CSS to format the loading message;
- fix yellow log color (light theme);

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/debug.js    |  4 ++++
 style/pi-hole.css              | 24 ++++++++++++++++++++++++
 style/themes/default-light.css |  3 +--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/debug.js b/scripts/pi-hole/js/debug.js
index 1ed17b3bf..339eae459 100644
--- a/scripts/pi-hole/js/debug.js
+++ b/scripts/pi-hole/js/debug.js
@@ -40,6 +40,8 @@ function eventsource() {
     "message",
     function (e) {
       ta.append(e.data);
+      // scroll page to the bottom (to the last received data)
+      $('html, body').scrollTop($(document).height());
     },
     false
   );
@@ -49,6 +51,7 @@ function eventsource() {
     "error",
     function () {
       source.close();
+      $("#output").removeClass("loading");
     },
     false
   );
@@ -57,5 +60,6 @@ function eventsource() {
 $("#debugBtn").on("click", function () {
   $("#debugBtn").prop("disabled", true);
   $("#upload").prop("disabled", true);
+  $("#output").addClass("loading");
   eventsource();
 });
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 996cb3abd..2388325bc 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -758,7 +758,31 @@ table.dataTable tbody > tr > .selected {
 }
 
 #output {
+  position: relative;
   margin: 5px 0;
   min-height: 36px;
   padding: 4px 8px;
 }
+
+.loading::before {
+  content: " ";
+  position: absolute;
+  padding: 1em;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 1;
+  background: rgba(35, 60, 85, 0.8);
+  box-shadow: 0 0 6px -3px rgba(0, 0, 0, 0.5);
+}
+.loading::after {
+  content: "\1F553\FE0E  Loading...";
+  position: absolute;
+  padding: 1em;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: #fff;
+  line-height: 1;
+  animation: 2s infinite Pulse steps(20);
+}
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index 5e3abc4ca..5ba436c4c 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -220,8 +220,7 @@
   color: #093;
 }
 .log-yellow {
-  color: #e90;
-  font-weight: bold;
+  color: #f69600;
 }
 .log-blue {
   color: #04d;

From 316ad2147d6468513ae5553e9c3bd6a114861227 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 14 Mar 2022 21:07:26 -0300
Subject: [PATCH 2/2] Fix prettier

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/debug.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/debug.js b/scripts/pi-hole/js/debug.js
index 339eae459..14ed46be3 100644
--- a/scripts/pi-hole/js/debug.js
+++ b/scripts/pi-hole/js/debug.js
@@ -41,7 +41,7 @@ function eventsource() {
     function (e) {
       ta.append(e.data);
       // scroll page to the bottom (to the last received data)
-      $('html, body').scrollTop($(document).height());
+      $("html, body").scrollTop($(document).height());
     },
     false
   );