add density slider to /family grid

ae0a5ef532d3c7ec33dc89192becbb94b559ed3a · 2026-05-19 21:11:05 -0700 · Steve Abrams

Families cohort grid was hardcoded to --cols:3 with no density control.
Adds a density range input (3-8) and an id="grid" hook so the existing
public/js/app.js wiring picks it up — applies, persists to localStorage
key lai-density, and hydrates from storage on next page load. Sort stays
server-side via the existing form-submit select (no id, so app.js leaves
it alone).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M views/families.ejs

Diff

commit ae0a5ef532d3c7ec33dc89192becbb94b559ed3a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 21:11:05 2026 -0700

    add density slider to /family grid
    
    Families cohort grid was hardcoded to --cols:3 with no density control.
    Adds a density range input (3-8) and an id="grid" hook so the existing
    public/js/app.js wiring picks it up — applies, persists to localStorage
    key lai-density, and hydrates from storage on next page load. Sort stays
    server-side via the existing form-submit select (no id, so app.js leaves
    it alone).
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 views/families.ejs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/views/families.ejs b/views/families.ejs
index 0fe6f75..03039cf 100644
--- a/views/families.ejs
+++ b/views/families.ejs
@@ -18,13 +18,17 @@
         <option value="value-asc"  <%= s === 'value-asc'   ? 'selected' : '' %>>Avg Q50 ↑</option>
       </select>
     </label>
+    <label>Density
+      <input type="range" id="density" min="3" max="8" step="1" value="3" aria-label="Grid density">
+      <output id="densityOut">3</output>
+    </label>
     <noscript><button type="submit">Apply</button></noscript>
   </form>
 
   <% if (!families.length) { %>
     <p class="muted">No families seeded yet — run <code>npm run seed</code>.</p>
   <% } else { %>
-    <section class="grid" style="--cols: 3;">
+    <section class="grid" id="grid">
       <% families.forEach(function (f) { %>
         <a class="card" href="/family/<%= f.slug %>">
           <div class="card-head">

← bf3e286 add noreferrer to topnav external-target links · back to Lifestyle Asset Intel · Add per-site favicon (kills /favicon.ico 404) e6fa244 →