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

4541c9f42104e8e9c8d03a3997c2ed98ccfaee57 · 2026-05-19 11:36:19 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 4541c9f42104e8e9c8d03a3997c2ed98ccfaee57
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 11:36:19 2026 -0700

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

diff --git a/public/index.html b/public/index.html
index 46ff9ce..6e3b453 100644
--- a/public/index.html
+++ b/public/index.html
@@ -473,6 +473,8 @@ textarea:focus-visible,
 
 <script>
 const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false, sort:'newest', view:'grid' };
+// Touch device = no hover. Drives tap-to-reveal card behavior.
+const TOUCH = window.matchMedia('(hover: none)').matches;
 const HOSTKEY = location.hostname.replace(/\./g, '_');
 // DW STANDARD: hydrate saved view BEFORE the first grid load.
 (function(){
@@ -626,7 +628,18 @@ 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();
+      // Touch devices have no hover — 1st tap reveals the card's info overlay,
+      // 2nd tap on the revealed card opens the detail modal.
+      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);
   }
@@ -705,9 +718,9 @@ syncColHeaders();
 
 // Theme toggle
 const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('raffia_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
+function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('raffia_theme', t); } catch(e){} if (tb) tb.textContent = t === 'dark' ? '☾' : '☀'; }
 setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
+if (tb) tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
 
 loadFacets();
 loadGridPage();

← 11804e8 snapshot — gitify backup 2026-05-19 · back to Raffiawallcoverings · fix: null-guard dead #theme-toggle reference (clean console 28a6c22 →