← back to Wallco Ai
design-coordinate cards: image-only grid, hover overlay reveals View / Sample — removes title/vendor/why/palette/paint-match text per Steve directive
0e37522813e5e56c2efbe733657265c451bfe2ca · 2026-05-25 20:37:15 -0700 · Steve Abrams
Files touched
Diff
commit 0e37522813e5e56c2efbe733657265c451bfe2ca
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon May 25 20:37:15 2026 -0700
design-coordinate cards: image-only grid, hover overlay reveals View / Sample — removes title/vendor/why/palette/paint-match text per Steve directive
---
server.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------------
1 file changed, 47 insertions(+), 15 deletions(-)
diff --git a/server.js b/server.js
index 1b2fb85..ab4e094 100644
--- a/server.js
+++ b/server.js
@@ -13916,9 +13916,35 @@ ${(() => {
.pairs-well__card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e7e7e7; border-radius: 6px; overflow: hidden; transition: box-shadow 160ms ease, transform 160ms ease; }
.pairs-well__card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.pairs-well__card--ai { border-style: dashed; border-color: #d9c7a8; }
- .pairs-well__img-wrap { aspect-ratio: 1 / 1; background: #f4f4f4; overflow: hidden; }
+ .pairs-well__img-wrap { aspect-ratio: 1 / 1; background: #f4f4f4; overflow: hidden; position: relative; }
.pairs-well__img { width: 100%; height: 100%; object-fit: cover; display: block; }
- .pairs-well__meta { padding: 10px 12px 12px; }
+ .pairs-well__meta { display: none; } /* 2026-05-25 Steve directive — image-only grid */
+ /* Hover overlay reveals View / Sample on each coordinate card */
+ .pw-hover-actions {
+ position: absolute; inset: 0;
+ display: flex; align-items: center; justify-content: center; gap: 10px;
+ background: linear-gradient(180deg, rgba(20,18,15,0) 0%, rgba(20,18,15,0) 35%, rgba(20,18,15,.62) 100%);
+ opacity: 0; transition: opacity 160ms ease;
+ pointer-events: none;
+ }
+ .pairs-well__card:hover .pw-hover-actions,
+ .pairs-well__card:focus-within .pw-hover-actions { opacity: 1; pointer-events: auto; }
+ .pw-act {
+ padding: 9px 18px; min-width: 78px;
+ background: #fff; color: #1a1815;
+ font: 600 11px/1 ui-sans-serif, system-ui, -apple-system, "SF Pro Text", sans-serif;
+ letter-spacing: .08em; text-transform: uppercase;
+ border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
+ box-shadow: 0 6px 20px rgba(0,0,0,.18);
+ transition: background 120ms ease, color 120ms ease, transform 120ms ease;
+ }
+ .pw-act:hover { background: #1a1815; color: #fff; transform: translateY(-1px); }
+ .pw-act.pw-act-sample { background: #d96433; color: #fff; }
+ .pw-act.pw-act-sample:hover { background: #1a1815; color: #fff; }
+ /* Card itself becomes a clean tile — no inner padding/borders since meta is gone */
+ .pairs-well__card { border: 0; background: transparent; border-radius: 8px; }
+ .pairs-well__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
+ .pairs-well__card .pairs-well__img-wrap { border-radius: 8px; }
.pairs-well__title { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pairs-well__vendor { margin: 0 0 6px; font-size: 10px; color: #777; letter-spacing:.04em; text-transform: uppercase; }
.pairs-well__why { display: inline-block; padding: 2px 7px; background: #f4ede4; color: #5a4628; border-radius: 999px; font-size: 10px; line-height: 1.4; margin-bottom: 8px; }
@@ -14157,21 +14183,27 @@ ${(() => {
+ '<button type="button" class="pw-dup" data-card-action="duplicate" data-idx="'+idx+'">⎘ Duplicate</button>'
+ '</div>'
: '';
- // For Curated cards the href doesn't lead anywhere (placeholder) — use a div instead of an <a>
- // so the Duplicate/Edit buttons don't trigger navigation when clicked.
- var Tag = isAi ? 'div' : 'a';
- var openAttrs = isAi ? '' : ' target="_blank" rel="noopener" href="'+href+'"';
- return '<'+Tag+' class="pairs-well__card'+(isAi?' pairs-well__card--ai':'')+'"'+openAttrs+' data-card-idx="'+idx+'" title="'+esc((p.why||[]).join(' · '))+'">'
+ // Steve 2026-05-25: clean image-only grid; on-hover overlay reveals View / Sample.
+ // Sample target — catalog: /samples?h={handle}; AI: /samples?design={parent design id}
+ var sampleHref = isAi
+ ? '/samples?design='+encodeURIComponent(${design.id || 0})+'&coordinate=ai-'+idx
+ : '/samples?' + (p.handle ? 'h='+encodeURIComponent(p.handle) : 'design='+encodeURIComponent(${design.id || 0}));
+ // AI cards have no DW destination — View opens the high-res image itself.
+ // Catalog cards View → existing DW product page.
+ var viewHref = isAi ? (img || '#') : href;
+ var hoverActions = '<div class="pw-hover-actions" aria-label="'+esc(p.title||'coordinate')+'">'
+ + '<a class="pw-act pw-act-view" href="'+viewHref+'" target="_blank" rel="noopener">View</a>'
+ + '<a class="pw-act pw-act-sample" href="'+sampleHref+'" target="_blank" rel="noopener">Sample</a>'
+ + '</div>';
+ // Card is always a div now — the hover-action <a> tags carry the navigation,
+ // so the outer wrap doesn't need to be an <a>. Title attribute kept for tooltip.
+ return '<div class="pairs-well__card'+(isAi?' pairs-well__card--ai':'')+'" data-card-idx="'+idx+'" title="'+esc(p.title||'')+'">'
+ aiOnly
- + '<div class="pairs-well__img-wrap">'+(img?'<img class="pairs-well__img" src="'+img+'" alt="'+esc(p.title)+'" loading="lazy">':'')+'</div>'
- + '<div class="pairs-well__meta">'
- + '<p class="pairs-well__title">'+esc(p.title||'')+pitchChip+'</p>'
- + '<p class="pairs-well__vendor">'+(isAi?'AI-Generated':'Designer Wallcoverings')+'</p>'
- + (why ? '<span class="pairs-well__why">'+why+'</span>' : '')
- + (pal ? '<div class="pairs-well__palette">'+pal+'</div>' : '')
- + pb
+ + '<div class="pairs-well__img-wrap">'
+ + (img ? '<img class="pairs-well__img" src="'+img+'" alt="'+esc(p.title)+'" loading="lazy">' : '')
+ + hoverActions
+ '</div>'
- + '</'+Tag+'>';
+ + '</div>';
}
function renderGrid(g, items, isAi) {
if (!items || !items.length) { g.innerHTML = '<div class="pairs-well__empty">No coordinates found.</div>'; return; }
← 061b76f DA-2+DA-3: Met PD + prior wallco design references in every
·
back to Wallco Ai
·
generate_designs.js: bump ComfyUI poll timeout 5 min → 15 mi 29ac6e7 →