joint-fix-gallery: add Density slider + persist Sort & Density per standing rule [yolo tick3, local-only]

a67d6b2949eea070e045eb4f31d2ae014c42f22c · 2026-06-02 11:58:08 -0700 · Steve Abrams

Files touched

M public/joint-fix-gallery.html

Diff

commit a67d6b2949eea070e045eb4f31d2ae014c42f22c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 2 11:58:08 2026 -0700

    joint-fix-gallery: add Density slider + persist Sort & Density per standing rule [yolo tick3, local-only]
---
 public/joint-fix-gallery.html | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/public/joint-fix-gallery.html b/public/joint-fix-gallery.html
index 51ffdab..9780553 100644
--- a/public/joint-fix-gallery.html
+++ b/public/joint-fix-gallery.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Joint-Fix Gallery — Source vs Fix</title>
 <style>
-  :root { --bg:#fafaf8; --fg:#1a1a1a; --muted:#6a6a6a; --card:#fff; --border:#e8e6e1; --accent:#8b1f1f; }
+  :root { --bg:#fafaf8; --fg:#1a1a1a; --muted:#6a6a6a; --card:#fff; --border:#e8e6e1; --accent:#8b1f1f; --gold:#c9a14b; --card-min:360px; }
   * { 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; }
@@ -16,7 +16,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(360px, 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; }
@@ -52,6 +53,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">
   </div>
 </header>
 <main>
@@ -95,6 +98,14 @@ function render(items, allCats) {
   `).join('');
 }
 let DATA = [];
+// sort + density persist (Steve standing rule: every product grid; both persist)
+document.getElementById('sortBy').value = localStorage.getItem('jointFix_sort') || 'newest';
+document.getElementById('density').value = localStorage.getItem('jointFix_density') || '360';
+document.documentElement.style.setProperty('--card-min', document.getElementById('density').value + 'px');
+document.getElementById('density').addEventListener('input', () => {
+  localStorage.setItem('jointFix_density', document.getElementById('density').value);
+  document.documentElement.style.setProperty('--card-min', document.getElementById('density').value + 'px');
+});
 function apply() {
   const cat = document.getElementById('catFilter').value;
   const sort = document.getElementById('sortBy').value;
@@ -117,7 +128,7 @@ loadData().then(data => {
     sel.appendChild(o);
   }
   document.getElementById('catFilter').addEventListener('change', apply);
-  document.getElementById('sortBy').addEventListener('change', apply);
+  document.getElementById('sortBy').addEventListener('change', () => { localStorage.setItem('jointFix_sort', document.getElementById('sortBy').value); apply(); });
   document.getElementById('limit').addEventListener('change', apply);
   apply();
 }).catch(e => {

← 9014783 PDP coordinates: route color-swatch pairs lookup through sam · back to Wallco Ai · yolo-backlog: T3 done — N3 joint-fix-gallery density+persist 85b6407 →