← back to Quadrille Showroom
Detail popup starts COLLAPSED on load (chevron to expand, persisted); step camera back on focus (board fills ~70% of frame with margin, was overfilling/too close)
4df383e3280f90c8e27e337dfee75c3e7e89d6a6 · 2026-06-28 05:20:59 -0700 · Steve
Files touched
M public/css/showroom.cssM public/js/showroom.jsM public/showroom.html
Diff
commit 4df383e3280f90c8e27e337dfee75c3e7e89d6a6
Author: Steve <steve@designerwallcoverings.com>
Date: Sun Jun 28 05:20:59 2026 -0700
Detail popup starts COLLAPSED on load (chevron to expand, persisted); step camera back on focus (board fills ~70% of frame with margin, was overfilling/too close)
---
public/css/showroom.css | 17 +++++++++++++++++
public/js/showroom.js | 20 +++++++++++++++++++-
public/showroom.html | 3 ++-
3 files changed, 38 insertions(+), 2 deletions(-)
diff --git a/public/css/showroom.css b/public/css/showroom.css
index 5490519..946bda1 100644
--- a/public/css/showroom.css
+++ b/public/css/showroom.css
@@ -280,3 +280,20 @@ body { overflow: hidden; background: #0a0a0f; font-family: 'Segoe UI', system-ui
#now-viewing { bottom: 150px; width: 88vw; }
.nv-count { display: none; }
}
+
+/* Detail popup collapse (starts collapsed on load — Steve) */
+.collapse-btn {
+ position: absolute; top: 8px; right: 42px; z-index: 3; background: rgba(0,0,0,0.35);
+ border: none; color: #cbb384; font-size: 15px; cursor: pointer; line-height: 1;
+ width: 26px; height: 26px; border-radius: 50%; backdrop-filter: blur(4px);
+}
+.collapse-btn:hover { color: #fff; background: rgba(0,0,0,0.6); }
+/* Collapsed = show only the brand eyebrow + pattern title (a compact pill) */
+#wing-detail.collapsed .wd-hero,
+#wing-detail.collapsed .wd-color,
+#wing-detail.collapsed .wd-sku,
+#wing-detail.collapsed .wd-specs,
+#wing-detail.collapsed .wd-flag,
+#wing-detail.collapsed .detail-actions { display: none; }
+#wing-detail.collapsed .wd-body { padding: 14px 40px 14px 20px; }
+#wing-detail.collapsed .wd-title { margin-bottom: 0; }
diff --git a/public/js/showroom.js b/public/js/showroom.js
index 3046002..cdd4b37 100644
--- a/public/js/showroom.js
+++ b/public/js/showroom.js
@@ -1446,7 +1446,10 @@ function focusOnWing(pivot) {
// fills top-to-bottom like a PJ hero panel (the very ends can run past the frame edge
// — that's the hero look). The HUD eats the right third, so the board lives in the
// left two-thirds; this is the clean dead-on read REVIEW.md asked for.
- const fillH = CONFIG.wing.height * 0.82; // board fills the frame vertically
+ // Steve: it was TOO CLOSE — step back. Board occupies ~70% of frame height so there's
+ // clear margin all around (frame height = board / fill), not cropped at the edges.
+ const BOARD_FILL = 0.70;
+ const fillH = CONFIG.wing.height / BOARD_FILL; // frame height (bigger than board → camera steps back)
const dHero = (fillH / 2) / Math.tan((FOV_HERO * Math.PI / 180) / 2);
// Clamp so the camera never backs through the front wall. The board sits near the
// back wall (z≈-2.8); the camera moves toward +z. Usable run = front-wall − board.
@@ -1565,10 +1568,23 @@ function specRow(label, value) {
return `<div class="wd-spec"><dt>${label}</dt><dd>${value}</dd></div>`;
}
+// Detail popup starts COLLAPSED on load (Steve) — shows just brand + pattern name;
+// the user taps the chevron to expand the full spec sheet. Choice persists.
+let detailCollapsed = (localStorage.getItem('qh_detail_collapsed') !== '0');
+function setDetailCollapsed(c) {
+ detailCollapsed = c;
+ localStorage.setItem('qh_detail_collapsed', c ? '1' : '0');
+ const panel = document.getElementById('wing-detail');
+ if (panel) panel.classList.toggle('collapsed', c);
+ const btn = document.getElementById('detail-collapse');
+ if (btn) { btn.innerHTML = c ? '▸' : '▾'; btn.title = c ? 'Show details' : 'Hide details'; }
+}
+
function showWingDetail(product) {
window._activeProduct = product;
const panel = document.getElementById('wing-detail');
panel.classList.remove('hidden');
+ setDetailCollapsed(detailCollapsed); // apply collapsed state (default collapsed)
const { pattern, colorway } = splitPatternColor(product.pattern_name || product.name);
document.getElementById('detail-pattern').textContent = pattern || 'Pattern';
@@ -2143,6 +2159,8 @@ function initHUD() {
}));
document.getElementById('close-detail').addEventListener('click', () => unfocusWing());
+ const dCol = document.getElementById('detail-collapse');
+ if (dCol) dCol.addEventListener('click', () => setDetailCollapsed(!detailCollapsed));
document.getElementById('btn-fan-left').addEventListener('click', () => gotoBoardOffset(-1)); // Back
document.getElementById('btn-fan-right').addEventListener('click', () => gotoBoardOffset(1)); // Next
diff --git a/public/showroom.html b/public/showroom.html
index 0440a43..307bd4d 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -218,7 +218,8 @@
</div>
<!-- Wing Detail Panel — spec-sheet card (4-Horsemen / 21st design language) -->
- <div id="wing-detail" class="hidden">
+ <div id="wing-detail" class="hidden collapsed">
+ <button id="detail-collapse" class="collapse-btn" title="Show details">▸</button>
<button id="close-detail" class="close-btn">×</button>
<div class="wd-hero">
<img id="detail-room" alt="Room setting">
← 155681c REVIEW.md: pass 7 — senior-first guided nav + subtle bloom,
·
back to Quadrille Showroom
·
TEMP dev aid: auto-reload open tab every 30s (idle-guarded 6 c1cf76b →