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

@@ -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();
 });

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);
+}

style/themes/default-light.css

@@ -220,8 +220,7 @@
   color: #093;
 }
 .log-yellow {
-  color: #e90;
-  font-weight: bold;
+  color: #f69600;
 }
 .log-blue {
   color: #04d;