webui: fix desktop config page layout

2026-06-08 09:47:07 -06:00
parent c49361488d
commit bd00b6e7ca
2 changed files with 67 additions and 0 deletions
@@ -296,6 +296,34 @@ button[onclick^="scan"]{
  .inlineActions{grid-template-columns:1fr}
 }

+
+/* Desktop page layout fix */
+.page:not(.active){display:none!important}
+.page.active{display:block}
+#configPage.active{margin-top:24px}
+@media(min-width:980px){
+  #configPage.active{
+    display:grid!important;
+    grid-template-columns:200px minmax(0,1fr);
+    gap:22px;
+    align-items:start;
+    margin-top:28px;
+  }
+  #configPage .subtabs{
+    grid-column:1;
+    position:sticky;
+    top:18px;
+    margin:0;
+  }
+  #configPage .configSubpage.active{
+    grid-column:2;
+    min-width:0;
+  }
+  #configPage .configSubpage.active .grid{
+    gap:22px;
+  }
+}
+
 </style>
 </head>
 <body>
@@ -1184,6 +1212,32 @@ document.addEventListener("input",e=>{
    markConfigFieldTouched(e.target.id);
  }
 });
+
+// Main page navigation override.
+// Keeps Overview, Battery, and Config mutually exclusive on desktop and mobile.
+function showTab(name){
+  const map={
+    overview:"overviewPage",
+    battery:"batteryPage",
+    config:"configPage"
+  };
+
+  Object.keys(map).forEach(key=>{
+    const page=$(map[key]);
+    if(page) page.classList.toggle("active",key===name);
+  });
+
+  document.querySelectorAll(".tabs button").forEach(btn=>{
+    const txt=(btn.textContent||"").trim().toLowerCase();
+    btn.classList.toggle("active",txt===name);
+  });
+
+  if(name==="config"){
+    const anyActive=document.querySelector("#configPage .configSubpage.active");
+    if(!anyActive) showConfigSubtab("general");
+  }
+}
+
 setInterval(load,3000);
 </script>
 </body>
@@ -513,3 +513,16 @@ def test_embedded_webui_theme_v3():
    assert "button.save" in source
    assert "button.danger" in source
    assert "button.secondary" in source
+
+
+def test_embedded_webui_main_pages_are_mutually_exclusive():
+    source = firmware_source()
+
+    assert "/* Desktop page layout fix */" in source
+    assert ".page:not(.active){display:none!important}" in source
+    assert "#configPage.active" in source
+    assert "Main page navigation override" in source
+    assert 'overview:"overviewPage"' in source
+    assert 'battery:"batteryPage"' in source
+    assert 'config:"configPage"' in source
+    assert 'showConfigSubtab("general")' in source