auto-save: 2026-07-02T12:48:04 (1 files) — viewer-local/public/index.html

ac443bbefc4068371f39bbb5b1a9b8521b6b0171 · 2026-07-02 12:48:11 -0700 · Steve Abrams
Files touched

M viewer-local/public/index.html
Diff

commit ac443bbefc4068371f39bbb5b1a9b8521b6b0171
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 2 12:48:11 2026 -0700

    auto-save: 2026-07-02T12:48:04 (1 files) — viewer-local/public/index.html
---
 viewer-local/public/index.html | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/viewer-local/public/index.html b/viewer-local/public/index.html
index c2f2a33..6e521dd 100644
--- a/viewer-local/public/index.html
+++ b/viewer-local/public/index.html
@@ -73,6 +73,24 @@
   .spec { margin-top:5px; font-size:11px; color:#777; display:flex; gap:8px; flex-wrap:wrap; }
   #sentinel { height:1px; }
   #status { text-align:center; color:var(--mut); padding:16px; font-size:13px; }
+  /* ---- mobile: compact header + hamburger filter drawer ---- */
+  #burger { display:none; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; line-height:1; white-space:nowrap; }
+  #fclose { display:none; }
+  @media (max-width:700px) {
+    header { padding:10px 12px; max-height:none; overflow:visible; }
+    h1 { font-size:15px; }
+    h1 small { display:block; margin:3px 0 0; font-size:11px; }
+    .controls { gap:8px; }
+    #burger { display:inline-flex; align-items:center; gap:6px; }
+    .controls input[type=search] { min-width:0; flex:1 1 130px; }
+    #densCtl { display:none; } /* grid is fixed 2-up on phones — slider is noise */
+    .grid { grid-template-columns:repeat(2,1fr); gap:8px; padding:10px 10px 60px; }
+    /* filter panel becomes a full-screen drawer, hidden until the hamburger opens it */
+    details.facets { display:none; position:fixed; inset:0; z-index:60; background:var(--bg); overflow:auto; padding:12px 12px 40px; margin:0; }
+    details.facets.open-mobile { display:block; }
+    details.facets > summary { display:none; }
+    #fclose { display:block; position:sticky; top:0; z-index:2; width:100%; background:var(--accent); color:#1a1407; border:none; border-radius:8px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:10px; }
+  }
 </style>
 </head>
 <body>
@@ -83,6 +101,7 @@
       <button data-src="all" class="on">All</button>
     </div>
     <input type="search" id="q" placeholder="Search SKU or pattern…">
+    <button id="burger" type="button" aria-label="Open filters">☰ Filters</button>
     <label class="dens">Sort
       <select id="sort">
         <option value="newest">Newest</option>
@@ -96,13 +115,14 @@
         <option value="images">Most images</option>
       </select>
     </label>
-    <label class="dens">Density
+    <label class="dens" id="densCtl">Density
       <input type="range" id="dens" min="3" max="10" value="6">
     </label>
   </div>
 
   <details class="facets" id="facets">
     <summary>Filters <b id="facetCount"></b></summary>
+    <button id="fclose" type="button">✕ Done — show products</button>
     <div class="facetbody">
       <div class="frow"><span class="flabel">Color</span><div class="frow" id="colorRow"></div></div>
       <div class="frow"><span class="flabel">Style</span><div class="frow" id="styleRow"></div></div>
@@ -194,6 +214,22 @@ const facetsEl = document.getElementById('facets');
 facetsEl.open = localStorage.getItem('dw_facets_open') !== '0';
 facetsEl.ontoggle = () => localStorage.setItem('dw_facets_open', facetsEl.open ? '1' : '0');
 
+// mobile: hamburger opens the filter panel as a full-screen drawer (CSS hides it otherwise)
+const mobileMQ = window.matchMedia('(max-width:700px)');
+const burgerEl = document.getElementById('burger');
+document.getElementById('fclose').onclick = () => {
+  facetsEl.classList.remove('open-mobile');
+  document.body.style.overflow = '';
+};
+burgerEl.onclick = () => {
+  facetsEl.open = true; // drawer always shows the facet body, regardless of persisted collapse
+  facetsEl.classList.add('open-mobile');
+  document.body.style.overflow = 'hidden'; // freeze the grid behind the drawer
+};
+mobileMQ.addEventListener('change', (e) => {
+  if (!e.matches) { facetsEl.classList.remove('open-mobile'); document.body.style.overflow = ''; }
+});
+
 // restore sort/enriched UI (source tabs are built by loadScope() once the host scope is known)
 document.getElementById('sort').value = state.sort;
 document.querySelectorAll('#enrSeg button').forEach(b => b.classList.toggle('on', b.dataset.enr === state.enriched));
@@ -353,6 +389,7 @@ function renderActive() {
     + state.funcs.size + state.prices.size + state.images.size
     + (state.enriched !== 'all' ? 1 : 0);
   document.getElementById('facetCount').textContent = n ? `· ${n} active` : '';
+  burgerEl.textContent = n ? `☰ Filters · ${n}` : '☰ Filters';
   if (n) {
     const c = document.createElement('button'); c.className = 'clearall'; c.textContent = 'Clear all';
     c.onclick = () => {
← 3b622c6 auto-save: 2026-07-02T07:46:12 (4 files) — staging/sangetsu- · back to Japan Enrich · mobile: hamburger filter drawer + 2-up grid for japan/china d4d1634 →