Web Interface reorganization (#150)

Restructured the various sections into tabbed interfaces - Split settings into HomeKit, PN532, and HomeSpan tabs - Added WebUI authentication settings under dedicated tab - Changed "Home Key controlled state" to "Actionable by HomeKey" - Updated HomeKit trigger description to clarify optional HomeKey authentication - Improved input field widths for better visual consistency - Split HomeKey Triggers into Neopixel and Simple GPIO tabs
rednblkx · Nov 17, 2024 · aec4631 · aec4631
2 parents 691ddd3 + cb34d7f
commit aec4631
Show file tree

Hide file tree

Showing 10 changed files with 584 additions and 444 deletions.
diff --git a/data/assets/misc.css b/data/assets/misc.css
@@ -59,7 +59,23 @@ button {
     border-color: hsl(240 3.7% 15.9%) !important;
 }
 
-@media only screen and (min-width: 1200px) {
+div[class$="-selected-body"] {
+    display: flex;
+    flex-direction: column;
+    padding-inline: 1rem;
+    padding-bottom: .5rem;
+    gap: 16px;
+}
+
+h3[class$="-selected-tab"] {
+    border-bottom: 2px #8e8271 solid;
+}
+
+div[class$="-hidden-body"] {
+    display: none;
+}
+
+@media only screen and (min-width: 800px) {
     button:hover {
         opacity: .9;
     }
@@ -71,6 +87,17 @@ button {
     #restart-btn:active {
         background-color: #4040402e!important;
     }
+
+    #mqtt-broker-con, #mqtt-topics-container {
+        min-width: 20rem;
+        max-width: 25rem;
+    }
+    .cards-container {
+        align-items: flex-start;
+    }
+    #component {
+        max-width: 65rem;
+    }
 }
 
 @media only screen and (max-width: 600px) {
@@ -83,15 +110,31 @@ button {
         flex-wrap: wrap;
         justify-content: center;
     }
+    #mqtt-broker, #mqtt-topics {
+        width: auto;
+    }
+    .cards-container {
+        flex-direction: column;
+    }
+    .nfc-triggers-selected-body {
+        flex-wrap: wrap;
+    }
 }
 
-#mqtt-broker-conn {
+.fill-container {
     width: 100%;
     width: -moz-available;
     width: -webkit-fill-available;
     width: fill-available;
 }
 
+#buttons-group {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+    gap: 64px;
+}
+
 
 .loader {
     width: 100%;

diff --git a/data/assets/restart.webp b/data/assets/restart.webp
diff --git a/data/index.html b/data/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="height: 100dvh;">
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -24,14 +24,21 @@
     }
     wifiSignalStrength();
     setInterval(wifiSignalStrength, 5000)
+    function switchTab(el) {
+      var parentId = el.parentElement.id;
+      document.querySelector(`.${parentId}-selected-body`).classList.replace(`${parentId}-selected-body`,`${parentId}-hidden-body`);
+      document.querySelector(`div[data-${parentId}-body="${el.dataset.tabIndex}"]`).classList.replace(`${parentId}-hidden-body`, `${parentId}-selected-body`);
+      document.querySelector(`.${parentId}-selected-tab`).className = "";
+      el.classList.add(`${parentId}-selected-tab`);
+    }
     async function addComponent(name, button) {
       let loaderEl = document.createElement("span")
       loaderEl.className = "loader";
       loaderEl.style="margin-top: .5rem;";
       document.querySelector("#main > span").insertAdjacentElement("afterend",loaderEl);
       let element = document.querySelector("#component");
       if(element){
-        element.remove(); 
+        element.remove();
       }
       let sel = document.querySelector(".selected-btn");
       if(sel){
@@ -40,8 +47,8 @@
       let main = document.querySelector("#main");
       let el = document.createElement("div");
       el.id = "component";
-      el.style = "display: flex;flex-direction: column;max-width: 32rem;margin-bottom: 1rem;";
-      let data = await fetch(name);
+      el.style = "display: flex;flex-direction: column;margin-bottom: 1rem;";
+      let data = await fetch(`${name}`);
       let string = await data.text();
       el.innerHTML = string;
       main.appendChild(el);

diff --git a/data/misc.html b/data/misc.html