← back to Wallco Ai
/designs admin review-card: hide overlay on load, fade in on hover
923229484f49fee145e3194aed16af7b474b797e · 2026-05-13 10:03:02 -0700 · SteveStudio2
Steve screenshot showed every card flooded with sliders + Keep/Reject/
Pair + chips + title overlay on page load — too noisy when scanning
the grid.
CSS-only fix:
.review-card .card-meta, .review-controls { opacity:0; pointer-events:none }
.review-card:hover → all visible
.review-card:focus-within → keyboard-nav also reveals
Decision border (kept/rejected) stays visible without hover so triage
state is glanceable. Keep/Reject/Pair buttons + sliders still fully
functional, just behind a hover veil.
Files touched
Diff
commit 923229484f49fee145e3194aed16af7b474b797e
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Wed May 13 10:03:02 2026 -0700
/designs admin review-card: hide overlay on load, fade in on hover
Steve screenshot showed every card flooded with sliders + Keep/Reject/
Pair + chips + title overlay on page load — too noisy when scanning
the grid.
CSS-only fix:
.review-card .card-meta, .review-controls { opacity:0; pointer-events:none }
.review-card:hover → all visible
.review-card:focus-within → keyboard-nav also reveals
Decision border (kept/rejected) stays visible without hover so triage
state is glanceable. Keep/Reject/Pair buttons + sliders still fully
functional, just behind a hover veil.
---
server.js | 22 +++++++++++++++++++++-
1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/server.js b/server.js
index d707572..f18d221 100644
--- a/server.js
+++ b/server.js
@@ -3124,7 +3124,27 @@ ${_isAdmin ? `
<style>
/* Review-mode controls (admin only — 127.0.0.1 / ?review=1) */
:root { --keep:#5fbf6e; --reject:#d2554a; --chip-bg:#3a3631; --chip-hot:#d2b15c; }
- .design-card.review-card { display:block; background:#1a1816; border:1px solid #2a2825; border-radius:3px; overflow:hidden; transition: border-color .15s; padding:0; }
+ .design-card.review-card { display:block; background:#1a1816; border:1px solid #2a2825; border-radius:3px; overflow:hidden; transition: border-color .15s; padding:0; position:relative; }
+ /* On load show only the image. Sliders / title / chips / buttons fade in on */
+ /* hover so the catalog grid reads as clean covers first, review tools second. */
+ .design-card.review-card .card-meta,
+ .design-card.review-card .review-controls {
+ opacity: 0;
+ transform: translateY(4px);
+ pointer-events: none;
+ transition: opacity .18s ease, transform .18s ease;
+ }
+ .design-card.review-card:hover .card-meta,
+ .design-card.review-card:hover .review-controls,
+ .design-card.review-card:focus-within .card-meta,
+ .design-card.review-card:focus-within .review-controls {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
+ }
+ /* Keep decision border + opacity dim visible regardless (so kept/rejected */
+ /* state shows at a glance without hovering) */
+ .design-card.review-card[data-decision]:not([data-decision=""]) .decision-badge { opacity:1 !important; }
.design-card.review-card[data-decision=keep] { border-color: var(--keep); }
.design-card.review-card[data-decision=reject] { border-color: var(--reject); opacity:.55; }
.design-card.review-card .card-img { position:relative; display:block; aspect-ratio:1; background:#0d0c0a no-repeat center/cover; }
← 3df4f1a /designs: wider defaults — 3-up grid, slider min 1, tight si
·
back to Wallco Ai
·
/designs: fix 'newest' sort — was returning oldest first 14ea612 →