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;
  }
  /*