← back to Wallco Ai

luxe-c-gallery: add Density slider + persist both Sort & Density to localStorage per standing rule [yolo tick2, local-only]

c2fa6b227618bb3714bf8467268850a87a3bafab · 2026-06-02 11:25:33 -0700 · Steve Abrams

Files touched

• M public/luxe-c-gallery.html

Diff

commit c2fa6b227618bb3714bf8467268850a87a3bafab
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 2 11:25:33 2026 -0700

    luxe-c-gallery: add Density slider + persist both Sort & Density to localStorage per standing rule [yolo tick2, local-only]
---
 public/luxe-c-gallery.html | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/public/luxe-c-gallery.html b/public/luxe-c-gallery.html
index 425dec7..5126ac0 100644
--- a/public/luxe-c-gallery.html
+++ b/public/luxe-c-gallery.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Luxe-C Gallery — Root vs 1838 Flocked Velvet</title>
 <style>
-  :root { --bg:#fafaf8; --fg:#1a1a1a; --muted:#6a6a6a; --card:#fff; --border:#e8e6e1; --accent:#8b1f1f; --gold:#c9a14b; }
+  :root { --bg:#fafaf8; --fg:#1a1a1a; --muted:#6a6a6a; --card:#fff; --border:#e8e6e1; --accent:#8b1f1f; --gold:#c9a14b; --card-min:420px; }
   * { box-sizing: border-box; }
   body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
   header { padding:24px 32px 16px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:10; }
@@ -17,7 +17,8 @@
   .filters select, .filters input { padding:6px 10px; border:1px solid var(--border); border-radius:4px; background:var(--card); font:inherit; }
   .filters label { font-size:12px; color:var(--muted); margin-right:4px; }
   main { padding:24px 32px 64px; }
-  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:24px; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--card-min), 1fr)); gap:24px; }
+  .filters input[type=range] { accent-color:var(--gold); vertical-align:middle; padding:0; }
   .pair { background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
   .pair-imgs { display:grid; grid-template-columns:1fr 1fr; gap:0; }
   .pair-imgs > div { position:relative; aspect-ratio:1; background:#f0eee8; overflow:hidden; }
@@ -67,6 +68,8 @@
       <option value="240">240</option>
       <option value="0">All</option>
     </select>
+    <label>Density</label>
+    <input type="range" id="density" min="320" max="680" step="20" title="pair card size">
     <button id="refresh" style="margin-left:auto; padding:6px 12px; border:1px solid var(--border); background:var(--card); border-radius:4px; cursor:pointer; font:inherit;">Refresh</button>
   </div>
 </header>
@@ -143,9 +146,17 @@ async function refresh() {
     document.getElementById('grid').innerHTML = '<div class="empty">Failed to load: ' + e.message + '</div>';
   }
 }
+// sort + density persist (Steve standing rule: every product grid; both persist)
+document.getElementById('sortBy').value = localStorage.getItem('luxeC_sort') || 'newest';
+document.getElementById('density').value = localStorage.getItem('luxeC_density') || '420';
+document.documentElement.style.setProperty('--card-min', document.getElementById('density').value + 'px');
 document.getElementById('groundFilter').addEventListener('change', apply);
-document.getElementById('sortBy').addEventListener('change', apply);
+document.getElementById('sortBy').addEventListener('change', () => { localStorage.setItem('luxeC_sort', document.getElementById('sortBy').value); apply(); });
 document.getElementById('limit').addEventListener('change', apply);
+document.getElementById('density').addEventListener('input', () => {
+  localStorage.setItem('luxeC_density', document.getElementById('density').value);
+  document.documentElement.style.setProperty('--card-min', document.getElementById('density').value + 'px');
+});
 document.getElementById('refresh').addEventListener('click', refresh);
 // Auto-refresh every 8s so rollout progress shows up live
 setInterval(refresh, 8000);

← f19ce23 yolo loop 2026-06-02: ledger + defect queue + approval queue  ·  back to Wallco Ai  ·  yolo-backlog: T2 done — N2 luxe-c-gallery density+persist [l dc939a3 →