Phase 2: mobile-ready + tap-to-reveal

926ee05f8bc8b2840edc49fd67323584b3aeb614 · 2026-05-19 11:33:11 -0700 · Steve Abrams
Files touched

M public/index.html
Diff

commit 926ee05f8bc8b2840edc49fd67323584b3aeb614
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 11:33:11 2026 -0700

    Phase 2: mobile-ready + tap-to-reveal
---
 public/index.html | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 794c93d..994fc92 100644
--- a/public/index.html
+++ b/public/index.html
@@ -125,7 +125,7 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
 .card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
 /* Chip overlay: hidden by default — image only. Hover reveals two CTAs. */
 .card .overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); opacity:0; transition:opacity 0.25s ease; pointer-events:none }
-.card:hover .overlay { opacity:1; pointer-events:auto }
+.card:hover .overlay, .card.revealed .overlay { opacity:1; pointer-events:auto }
 .card .pat, .card .ven { display:none }
 .card .actions { display:flex; flex-direction:column; gap:8px; width:min(80%, 220px) }
 .card .sample-btn { width:100%; padding:10px 14px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; text-decoration:none; transition:all 0.2s; box-sizing:border-box }
@@ -136,7 +136,13 @@ header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:s
 .card .dots .dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.5) }
 
 @media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
+@media (max-width:720px) {
+  .grid { grid-template-columns:repeat(2, 1fr) }
+  .density { flex-wrap:wrap; gap:10px }
+  .dens-only, #densitySlider, #densityLabel { display:none }
+  .density .search { flex:1 1 100%; order:5 }
+  .card .sample-btn { padding:12px 10px }
+}
 
 .sentinel { height:1px }
 .loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
@@ -482,7 +488,7 @@ textarea:focus-visible,
       <option value="price-asc">Price ↑</option>
       <option value="price-desc">Price ↓</option>
     </select>
-    <label>Grid</label>
+    <label class="dens-only">Grid</label>
     <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
     <span class="ct" id="densityLabel">6 cols</span>
     <div class="search">
@@ -608,6 +614,7 @@ textarea:focus-visible,
 
 <script>
 const state = { q:'', facet:'all', sort: (localStorage.getItem('gw_sort') || 'newest'), view:'grid', page:1, pages:1, total:0, loading:false, exhausted:false };
+const TOUCH = window.matchMedia('(hover: none)').matches;
 const HOSTKEY = 'gw';
 // DW STANDARD: hydrate saved sort + view BEFORE the first grid load.
 (function(){
@@ -768,7 +775,16 @@ async function loadGridPage() {
   const grid = document.getElementById('grid');
   for (const p of data.items) {
     const a = document.createElement('a');
-    a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); openDetails(p); };
+    a.className = 'card'; a.href = '#';
+    a.onclick = (e) => {
+      e.preventDefault();
+      if (TOUCH && !a.classList.contains('revealed')) {
+        document.querySelectorAll('.card.revealed').forEach(c => c.classList.remove('revealed'));
+        a.classList.add('revealed');
+        return;
+      }
+      openDetails(p);
+    };
     a.innerHTML = state.view === 'list' ? rowHTML(p) : cardHTML(p);
     grid.appendChild(a);
   }
← d844a1f stage2: wire microsite catalog + admin CRUD + grid/list view · back to Glitterwalls · make server.js self-contained — gate _shared/admin-catalog b c4d8add →