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

965f59f5c60c81eba95ea317d665b47182126277 · 2026-05-19 11:23:43 -0700 · Steve Abrams

Files touched

M public/css/site.css
M public/js/site.js

Diff

commit 965f59f5c60c81eba95ea317d665b47182126277
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 11:23:43 2026 -0700

    Phase 2: mobile-ready + tap-to-reveal
---
 public/css/site.css |  6 +++++-
 public/js/site.js   | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/public/css/site.css b/public/css/site.css
index 639cd0b..99cc8a8 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -363,7 +363,8 @@ select:focus { border-color: var(--gold); }
   transition: box-shadow var(--transition);
 }
 .product-card:hover { box-shadow: var(--shadow-hover); }
-.product-card:hover .card-overlay { opacity: 1; }
+.product-card:hover .card-overlay,
+.product-card.revealed .card-overlay { opacity: 1; }
 
 .card-image-wrap {
   position: relative;
@@ -402,8 +403,11 @@ select:focus { border-color: var(--gold); }
   align-items: flex-end;
   padding: 20px;
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--transition);
 }
+.product-card:hover .card-overlay,
+.product-card.revealed .card-overlay { pointer-events: auto; }
 .card-overlay-actions {
   display: flex;
   flex-direction: column;
diff --git a/public/js/site.js b/public/js/site.js
index 1d37942..01c2cd0 100644
--- a/public/js/site.js
+++ b/public/js/site.js
@@ -91,6 +91,10 @@ async function fetchAndRender() {
   window.scrollTo({ top: document.getElementById('collection').offsetTop - 80, behavior: 'smooth' });
 }
 
+// Touch device = no hover. 1st tap reveals the card overlay (actions), so the
+// memo-sample / view links are reachable on phones without a hover state.
+const TOUCH = window.matchMedia('(hover: none)').matches;
+
 function buildCard(p) {
   const card = document.createElement('div');
   card.className = 'product-card';
@@ -144,6 +148,18 @@ function buildCard(p) {
     </div>
   `;
 
+  if (TOUCH) {
+    card.addEventListener('click', (e) => {
+      // Let taps on the revealed overlay's links pass through normally.
+      if (e.target.closest('.card-overlay')) return;
+      if (!card.classList.contains('revealed')) {
+        e.preventDefault();
+        document.querySelectorAll('.product-card.revealed').forEach(c => c.classList.remove('revealed'));
+        card.classList.add('revealed');
+      }
+    });
+  }
+
   return card;
 }

← 2fb17f4 stage2: wire microsite catalog + admin CRUD + /api/sliders · back to Chinoiseriewallpaper · add corner-nav.js — universal top-right nav per _shared/corn 254dff1 →