Update grid density slider to desktop-only (3-12 columns)

7eb0e7f37b0ddee6d99c8ac992272c068619cd86 · 2026-06-23 07:14:16 -0700 · Steve Abrams

- Hidden entirely on mobile (< 769px)
- Desktop only: full 3-12 column slider
- Smart name hiding: product titles hide at 6+ columns
- localStorage persistence of user preference

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit 7eb0e7f37b0ddee6d99c8ac992272c068619cd86
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 23 07:14:16 2026 -0700

    Update grid density slider to desktop-only (3-12 columns)
    
    - Hidden entirely on mobile (< 769px)
    - Desktop only: full 3-12 column slider
    - Smart name hiding: product titles hide at 6+ columns
    - localStorage persistence of user preference
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 public/index.html | 32 ++++++--------------------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/public/index.html b/public/index.html
index c66f6fb..f97673f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -941,7 +941,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
      Inject before   <script src="/hero-4grid.js" defer></script>
 <script src="/dw-theme-nav.js" defer></script>
 
-<!-- GRID DENSITY SLIDER (MOBILE-OPTIMIZED) -->
+<!-- GRID DENSITY SLIDER (DESKTOP ONLY, 3-12 COLUMNS) -->
 <script>
 (function(){
   const CFG = {
@@ -1020,19 +1020,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
     const style = document.createElement('style');
     style.textContent = `
       #dw-density-slider {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin: 16px 0;
-        padding: 12px;
-        border: 1px solid rgba(0,0,0,.08);
-        border-radius: 4px;
-        background: #fafafa;
-        flex-wrap: wrap;
-        width: 100%;
-        box-sizing: border-box;
-        position: relative;
-        z-index: 10;
+        display: none;
       }
 
       .dw-grid-label {
@@ -1046,11 +1034,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
       }
 
       .dw-grid-buttons {
-        display: flex;
-        gap: 6px;
-        flex-basis: 100%;
-        order: 0;
-        width: 100%;
+        display: none;
       }
 
       .dw-grid-buttons button {
@@ -1096,6 +1080,7 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
 
       @media (min-width: 769px) {
         #dw-density-slider {
+          display: flex;
           flex-wrap: nowrap;
           gap: 16px;
           background: transparent;
@@ -1105,6 +1090,8 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
           width: auto;
           min-width: fit-content;
           flex-shrink: 0;
+          position: relative;
+          z-index: 10;
         }
 
         .dw-grid-label {
@@ -1163,13 +1150,6 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
           text-align: right;
         }
       }
-
-      @media (min-width: 481px) and (max-width: 768px) {
-        .dw-grid-buttons button {
-          height: 40px;
-          font-size: 14px;
-        }
-      }
     `;
     document.head.appendChild(style);

← b222993 auto-save: 2026-06-22T21:48:03 (1 files) — public/index.html · back to Linenwallpaper · corner-nav: move login to its own hamburger in upper-left (p 06536ba →