console: add always-visible back-to-top button + collapsible dashboard panels (per-section, persisted)
This commit is contained in:
@@ -11,6 +11,8 @@
|
||||
{% for section in sections %}
|
||||
<section class="section" data-dash-section>
|
||||
<div class="section-head">
|
||||
<button type="button" class="section-toggle" data-section-toggle
|
||||
title="Collapse / expand this panel" aria-label="Collapse expand panel" aria-expanded="true">▾</button>
|
||||
<span class="category-pill">
|
||||
<span class="pill-dot" style="background:{{ section.color }}"></span>
|
||||
{{ section.label }}
|
||||
@@ -67,5 +69,26 @@
|
||||
var inp = document.querySelector("[data-filter-input]");
|
||||
if (inp) inp.value = window.__dashFilter;
|
||||
apply();
|
||||
|
||||
// --- Collapsible panels (persist per-section in localStorage) ---
|
||||
function paneKey(label) { return "fhlPane_" + (label || "").trim().toLowerCase().replace(/\s+/g, "_"); }
|
||||
function syncToggle(sec) {
|
||||
var b = sec.querySelector("[data-section-toggle]");
|
||||
if (b) b.setAttribute("aria-expanded", sec.classList.contains("collapsed") ? "false" : "true");
|
||||
}
|
||||
document.querySelectorAll("[data-dash-section]").forEach(function (sec) {
|
||||
var head = sec.querySelector(".section-head");
|
||||
var label = head ? head.textContent.trim() : "";
|
||||
var wasCollapsed = false;
|
||||
try { wasCollapsed = localStorage.getItem(paneKey(label)) === "1"; } catch (_) {}
|
||||
if (wasCollapsed) sec.classList.add("collapsed");
|
||||
syncToggle(sec);
|
||||
var b = sec.querySelector("[data-section-toggle]");
|
||||
if (b) b.addEventListener("click", function () {
|
||||
sec.classList.toggle("collapsed");
|
||||
try { localStorage.setItem(paneKey(label), sec.classList.contains("collapsed") ? "1" : "0"); } catch (_) {}
|
||||
syncToggle(sec);
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user