webui: apply pure-menu-selected style after menu item click

- distinguish heading and selected menu item, apply menu item background color after panel item is selected for now, both heading and :first-child use a different color - add x3 transition time to stall animation from hover & focus otherwise, background colors may linger between clicks
xoseperez · Aug 9, 2024 · 5f500ff · 5f500ff
1 parent bd1f734
commit 5f500ff
Show file tree

Hide file tree

Showing 14 changed files with 16,606 additions and 16,525 deletions.
diff --git a/code/espurna/static/index.all.html.gz.h b/code/espurna/static/index.all.html.gz.h
diff --git a/code/espurna/static/index.curtain.html.gz.h b/code/espurna/static/index.curtain.html.gz.h
diff --git a/code/espurna/static/index.garland.html.gz.h b/code/espurna/static/index.garland.html.gz.h
diff --git a/code/espurna/static/index.light.html.gz.h b/code/espurna/static/index.light.html.gz.h
diff --git a/code/espurna/static/index.lightfox.html.gz.h b/code/espurna/static/index.lightfox.html.gz.h
diff --git a/code/espurna/static/index.rfbridge.html.gz.h b/code/espurna/static/index.rfbridge.html.gz.h
diff --git a/code/espurna/static/index.rfm69.html.gz.h b/code/espurna/static/index.rfm69.html.gz.h
diff --git a/code/espurna/static/index.sensor.html.gz.h b/code/espurna/static/index.sensor.html.gz.h
diff --git a/code/espurna/static/index.small.html.gz.h b/code/espurna/static/index.small.html.gz.h
diff --git a/code/espurna/static/index.thermostat.html.gz.h b/code/espurna/static/index.thermostat.html.gz.h
diff --git a/code/html/src/core.mjs b/code/html/src/core.mjs
@@ -149,6 +149,33 @@ export function onPanelTargetClick(event) {
     if (name) {
         showPanelByName(name);
     }
+
+    panelTargetShowSelected(target);
+}
+
+/**
+ * @param {HTMLElement} elem
+ */
+function panelTargetShowSelected(elem) {
+    const root = elem.closest("#menu");
+    if (!root) {
+        return;
+    }
+
+    const parent = elem.parentElement;
+    if (!parent) {
+        return;
+    }
+
+    parent.classList.add("pure-menu-selected");
+
+    /** @type {NodeListOf<HTMLAnchorElement>} */
+    (root.querySelectorAll("#menu a[data-panel]"))
+        .forEach((a) => {
+            if (a.parentElement && a.parentElement !== parent) {
+                a.parentElement.classList.remove("pure-menu-selected");
+            }
+        });
 }
 
 /**

diff --git a/code/html/src/index.css b/code/html/src/index.css
@@ -31,11 +31,19 @@
     display: none;
 }
 
-#menu .pure-menu-heading {
+#menu .pure-menu-item.pure-menu-item:first-child {
     font-size: 100%;
-    padding: .5em .5em;
-    white-space: normal;
-    text-transform: initial;
+    font-weight: 250;
+    text-transform: uppercase;
+    background: #333;
+}
+
+#menu .pure-menu-item.pure-menu-selected.pure-menu-item:first-child {
+    background: #1f8dd6;
+}
+
+#menu .pure-menu-selected a {
+    transition: all ease 0.6s;
 }
 
 .pure-g {

diff --git a/code/html/src/menu-list.html b/code/html/src/menu-list.html
@@ -1,8 +1,8 @@
 <ul class="pure-menu-list">
-    <li class="pure-menu-item">
-        <a href="#" class="pure-menu-link pure-menu-selected" data-panel="status">STATUS</a>
+    <li class="pure-menu-item pure-menu-selected">
+        <a href="#" class="pure-menu-link pure-menu-heading" data-panel="status">STATUS</a>
     </li>
-    <li class="pure-menu-item">
+    <li class="pure-menu-item menu-item-divided">
         <a href="#" class="pure-menu-link" data-panel="general">GENERAL</a>
     </li>
     <li class="pure-menu-item module module-curtain">

diff --git a/code/html/vendor/side-menu-layout.css b/code/html/vendor/side-menu-layout.css
@@ -133,8 +133,7 @@ appears on the left side of the page.
     /*
     This styles the selected menu item `<li>` and the top item.
     */
-    #menu .pure-menu-selected,
-    #menu .pure-menu-heading {
+    #menu .pure-menu-selected {
         background: #1f8dd6;
     }
         /*