From de02ebcf195d661db7ea129791b51fcc66c4359c Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sun, 12 Jul 2026 00:45:12 -0700 Subject: [PATCH] Compare basis inline; synced inline + sheet metric selector (both pages) (#82) - Compare: move the "Judge each day by its" basis toggle out of the filter sheet into the inline comfort card above the results (a scoring control, like the comfort slider). Handler is id-based, so no JS change for the move. - Metric selector is duplicated, not relocated: revert the sheetOnly relocation in filtersheet.js; keep the inline selector visible on all viewports and add a synced copy inside each page's filter sheet (mobile-only via CSS). The sheet copy clones the inline buttons; a single setter (setDistMetric / setColorMetric) drives the shared state and reflects the active metric on both, so picking any of the 8 metrics in either selector syncs the other and re-renders. Applies to compare's "Distribution by" and calendar's "Color the calendar by". Frontend-only; no backend or payload change. --- static/calendar.html | 6 ++++++ static/calendar.js | 32 +++++++++++++++++++------------- static/compare.html | 16 ++++++++++++---- static/compare.js | 31 ++++++++++++++++++++----------- static/filtersheet.js | 27 ++++----------------------- static/style.css | 8 ++++++++ 6 files changed, 69 insertions(+), 51 deletions(-) diff --git a/static/calendar.html b/static/calendar.html index 08a463f..0574411 100644 --- a/static/calendar.html +++ b/static/calendar.html @@ -62,6 +62,12 @@
+ +
+ Color the calendar by +
+
diff --git a/static/calendar.js b/static/calendar.js index d5d7a9a..e104be0 100644 --- a/static/calendar.js +++ b/static/calendar.js @@ -144,19 +144,27 @@ initFindButton(findBtn, "Find a location", () => selected, (lat, lon) => selectLocation(lat, lon)); // ---- metric toggle ---- -// Reflect the restored metric on the toggle (the HTML defaults to High). -document.querySelectorAll("#metric-toggle button").forEach((b) => - b.classList.toggle("active", b.dataset.metric === metric)); - -document.getElementById("metric-toggle").addEventListener("click", (e) => { - const btn = e.target.closest("button[data-metric]"); - if (!btn) return; - metric = btn.dataset.metric; +// An inline selector (above the grid) plus a synced copy in the filter sheet; the sheet +// copy mirrors the inline 8 buttons (cloned). Either drives the shared `metric`. +document.getElementById("metric-toggle-sheet").innerHTML = + document.getElementById("metric-toggle").innerHTML; +const syncColorButtons = () => + document.querySelectorAll("#metric-toggle button, #metric-toggle-sheet button") + .forEach((b) => b.classList.toggle("active", b.dataset.metric === metric)); +function setColorMetric(m) { + metric = m; try { localStorage.setItem("thermograph:calMetric", metric); } catch (err) {} - document.querySelectorAll("#metric-toggle button").forEach((b) => b.classList.toggle("active", b === btn)); + syncColorButtons(); renderCalendar(); renderKey(); -}); +} +syncColorButtons(); // reflect the restored metric on both (the HTML defaults to High) +for (const id of ["metric-toggle", "metric-toggle-sheet"]) { + document.getElementById(id).addEventListener("click", (e) => { + const btn = e.target.closest("button[data-metric]"); + if (btn) setColorMetric(btn.dataset.metric); + }); +} // ---- category totals: share vs. count toggle ---- // The strip normally prints each category's share; ticking "Show count" swaps every @@ -290,9 +298,7 @@ filtersEl.addEventListener("change", (e) => { // Wire the per-season "Months" expand toggles (delegated on the stable container), // and the mobile floating pill that slides the whole filter panel up as a sheet. initSeasonExpand(seasonYearEl); -// On phones the "Color the calendar by" metric selector rides the filter sheet too. -const calSheet = initFilterSheet({ panel: filtersEl, label: "Filters", - sheetOnly: [document.getElementById("metric-block")] }); +const calSheet = initFilterSheet({ panel: filtersEl, label: "Filters" }); calSheet.setActive(checkedMonths.size < 12); // Close any open filter dropdown when tapping outside it (native
stays diff --git a/static/compare.html b/static/compare.html index 45f7d86..d0b5d30 100644 --- a/static/compare.html +++ b/static/compare.html @@ -81,10 +81,9 @@ Inner handles set your comfort range; outer handles set the tolerance range. Days in tolerance still count toward the score, scaled by how far past comfort they fall. - - -