← back to Interiordesignershowroom

Room Builder: right products = single image-forward column; whole card click selects into the top bar; larger selected-product thumbnails in the tray

03357d15e6ca9ce7de5630070c5145c2a5359791 · 2026-08-01 21:24:12 -0700 · Steve Abrams

Files touched

• M public/css/site.css
• M public/js/build.js

Diff

commit 03357d15e6ca9ce7de5630070c5145c2a5359791
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Aug 1 21:24:12 2026 -0700

    Room Builder: right products = single image-forward column; whole card click selects into the top bar; larger selected-product thumbnails in the tray
---
 public/css/site.css | 30 ++++++++++++++++++------------
 public/js/build.js  |  2 +-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/public/css/site.css b/public/css/site.css
index 317ceeb..8eec114 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -786,14 +786,16 @@ h2.ruled::after {
   letter-spacing: .03em;
 }
 .rb-chip.prod {
-  background: rgba(255,255,255,.12);
-  padding: 2px 8px 2px 2px;
+  background: rgba(255,255,255,.14);
+  padding: 3px 10px 3px 3px;
+  gap: 8px;
+  font-size: .74rem;
 }
 .rb-chip.prod img {
-  width: 26px;
-  height: 26px;
+  width: 46px;
+  height: 46px;
   object-fit: cover;
-  border-radius: 2px;
+  border-radius: 3px;
 }
 .rb-tray .cta {
   background: #c9a96e;
@@ -943,8 +945,8 @@ h2.ruled::after {
 }
 .rb-products {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  grid-template-columns: 1fr;   /* single image-forward column */
+  gap: 14px;
   flex: 1;
   overflow-y: auto;
   padding: 0 16px 16px;
@@ -952,21 +954,25 @@ h2.ruled::after {
 .rbp {
   background: var(--card);
   border: 1px solid var(--line-lt);
-  border-radius: 2px;
+  border-radius: 3px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  cursor: grab;
-  transition: box-shadow var(--dur);
+  cursor: pointer;
+  transition: box-shadow var(--dur), transform var(--dur);
+  position: relative;
 }
-.rbp:hover { box-shadow: 0 4px 16px rgba(22,19,15,.09); }
+.rbp:hover { box-shadow: 0 6px 20px rgba(22,19,15,.12); transform: translateY(-2px); }
 .rbp:active { cursor: grabbing; }
 .rbp > img, .rbp .noimg {
-  aspect-ratio: 1/1;
+  aspect-ratio: 4/3;            /* big product photo */
   object-fit: cover;
   width: 100%;
   background: var(--bg-warm);
+  display: block;
 }
+/* the whole card is clickable to add; the button just labels it */
+.rbp::after { content: ''; }
 .rbp-t { font-size: .74rem; font-weight: 500; line-height: 1.25; padding: 7px 8px 3px; color: var(--ink-80); }
 .rbp-m { font-size: .68rem; color: var(--muted); padding: 0 8px; }
 .rbp-add {
diff --git a/public/js/build.js b/public/js/build.js
index 130526e..1ca9bd7 100644
--- a/public/js/build.js
+++ b/public/js/build.js
@@ -72,7 +72,7 @@
       if (opt.dataset.brand) { brand = (brand === opt.dataset.brand) ? '' : opt.dataset.brand; selOne('data-brand', brand); chips(); loadProducts(); return; }
       if (opt.dataset.dim) { var d = opt.dataset.dim, v = opt.dataset.val; sel[d] = (sel[d] === v) ? '' : v; Array.prototype.forEach.call(document.querySelectorAll('.rb-opt[data-dim="' + d + '"]'), function (b) { b.classList.toggle('sel', b.getAttribute('data-val') === sel[d]); }); chips(); loadProducts(); return; }
     }
-    var addb = e.target.closest('.rbp-add'); if (addb) { add(addb.getAttribute('data-id')); return; }
+    var rbpc = e.target.closest('.rbp'); if (rbpc) { add(rbpc.getAttribute('data-id')); return; }
     var rm = e.target.closest('[data-rm]'); if (rm) { delete board[rm.getAttribute('data-rm')]; chips(); refresh(); return; }
     var rmd = e.target.closest('[data-rmdim]'); if (rmd) { var dd = rmd.getAttribute('data-rmdim'); sel[dd] = ''; Array.prototype.forEach.call(document.querySelectorAll('.rb-opt[data-dim="' + dd + '"]'), function (b) { b.classList.remove('sel'); }); chips(); loadProducts(); return; }
     var rmsw = e.target.closest('[data-rmsw]'); if (rmsw) { var n = rmsw.getAttribute('data-rmsw'); delete swatches[n]; var sb = document.querySelector('.rb-swatch[data-name="' + n + '"]'); if (sb) sb.classList.remove('sel'); chips(); loadProducts(); return; }

← c3798f4 Add idempotent nightly live-catalog refresh (SSH-tunnel upse  ·  back to Interiordesignershowroom  ·  Room Builder: fix hamburger click (was behind sticky header) 012c874 →