Styling

LunarWatcher · Apr 28, 2024 · d4737e7 · d4737e7
1 parent 5cfbac4
commit d4737e7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/src/hazel/data/dashboard/DashboardUpdaters.cpp b/src/hazel/data/dashboard/DashboardUpdaters.cpp
@@ -1,5 +1,6 @@
 #include "DashboardUpdaters.hpp"
 #include "cpr/ssl_options.h"
+#include "fmt/core.h"
 #include "hazel/data/DashboardStructs.hpp"
 #include <limits>
 #include <cpr/cpr.h>
@@ -28,7 +29,6 @@ bool Updaters::updateLinks(DashboardData& data, long long& waitSecs) {
                 continue;
             }
             dirty = true;
-                spdlog::info("here");
 
             // Update time. Compute waitSecsc as the min wait time
             waitSecs = std::min(waitSecs, (long long) link.updateFrequency.count());
@@ -60,9 +60,11 @@ void Updaters::Links::updatePihole(DashboardLinkModule& link) {
     auto json = nlohmann::json::parse(data.text);
 
     auto& fields = link.fields;
-    fields["Queries today"] = std::to_string(json.at("dns_queries_today").get<long long>());
-    fields["Blocked today"] = std::to_string(json.at("ads_blocked_today").get<long long>());
-    fields["Blocked percent"] = std::to_string(json.at("ads_percentage_today").get<double>()) + "%";
+    fields["Blocked today"] = fmt::format("{}/{} ({:.1f}%)",
+        json.at("ads_blocked_today").get<long long>(),
+        json.at("dns_queries_today").get<long long>(),
+        json.at("ads_percentage_today").get<double>()
+    );
 }
 void Updaters::Links::updateMiniflux(DashboardLinkModule& link) {
 }

diff --git a/www/assets/base.js b/www/assets/base.js
@@ -12,7 +12,7 @@ function refreshLinks(links) {
             // Link container
             elem = targetContainer.appendChild(document.createElement("div"));
             elem.setAttribute("data-title", link.title);
-            elem.classList.add("small-paragraphs", "link-container");
+            elem.classList.add("small-paragraphs", "link-container", "flex-item");
 
             // Logo and content container
             let titleLink = elem.appendChild(document.createElement("a"));
@@ -21,10 +21,11 @@ function refreshLinks(links) {
 
 
             let left = titleLink.appendChild(document.createElement("div"));
-            left.classList.add("link-logo");
+            left.classList.add("link-logo", "flex-item");
+
 
             let right = titleLink.appendChild(document.createElement("div"));
-            right.classList.add("link-content");
+            right.classList.add("link-content", "flex-item");
 
             let top = right.appendChild(document.createElement("div"));
             top.classList.add("link-top");
@@ -58,15 +59,22 @@ function refreshLinks(links) {
                 if (fieldElem == null) {
                     fieldElem = fieldContainer.appendChild(document.createElement("div"));
                     fieldElem.classList.add("link-field");
+                    fieldElem.setAttribute("data-field-title", field);
+
                     let title = fieldElem.appendChild(document.createElement("p"));
-                    title.setAttribute("data-field-title", field);
                     title.innerText = field;
                     title.classList.add("field-title");
 
                     let valueField = fieldElem.appendChild(document.createElement("p"));
                     valueField.classList.add("field-value");
                 }
-                fieldElem.getElementsByClassName("field-value")[0].innerText = value;
+                let valueElem = fieldElem.getElementsByClassName("field-value");
+                if (valueElem == null || valueElem.length == 0) {
+                    console.error(valueElem);
+                    console.error(fieldElem);
+                    continue;
+                }
+                valueElem[0].innerText = value;
             }
         } else {
             // Wipe fields if the server suddenly returns none

diff --git a/www/assets/style.css b/www/assets/style.css
@@ -26,6 +26,10 @@ nav a {
     text-decoration: none;
 }
 
+footer {
+    margin-top: 10px;
+}
+
 .theme-background {
     width: 100%;
     background-color: var(--colour-primary);
@@ -91,22 +95,28 @@ a:hover {
     display: flex;
     flex-direction: column;
     gap: 5px;
-    flex: 1 0 auto;
+    flex-wrap: wrap;
 }
-
 .flex-horizontal {
     display: flex;
     flex-direction: row;
     gap: 5px;
-    flex: 1 0 auto;
+    flex-wrap: wrap;
+}
+
+.flex-item {
+    flex: 1 1 auto;
 }
 /* }}}*/
 /* Links {{{ */ 
 .link-container {
     box-sizing: border-box;
     border-radius: 5px;
-    max-width: 300px;
+    width: 300px;
     border: 2px solid var(--colour-primary);
+    flex: 0 1 auto;
+
+    min-height: 75px;
 }
 .link-container > a {
     text-decoration: none;
@@ -123,6 +133,15 @@ a:hover {
 }
 .link-fields {
     gap: 0px;
+    width: 100%;
+}
+.link-fields:hover, .link-fields:visited, .link-fields {
+    color: black;
+    text-decoration: none;
+}
+
+.link-logo {
+    flex: 0 1 auto;
 }
 
 .field-title {
@@ -138,11 +157,9 @@ a:hover {
     border-top: 2px solid var(--colour-primary);
     box-sizing: border-box;
     padding: 1px;
+    flex: 1 1 50%;
 }
-.link-fields:hover, .link-fields:visited, .link-fields {
-    color: black;
-    text-decoration: none;
-}
+
 
 .link-field:not(:nth-last-child(1)) {
     border-right: 2px solid var(--colour-primary);
@@ -153,4 +170,10 @@ a:hover {
     text-decoration: underline;
 }
 
+@media only screen and (max-width: 717px) {
+    .link-container {
+        width: 100%;
+    }
+}
+
 /* }}} */