stack both hamburgers in upper-right corner of design image — no longer overlaps the palette label

9b4e0755aaac211dc50ed155fe7a6de8958fd3ea · 2026-05-25 00:39:59 -0700 · Steve Abrams
Files touched

M server.js
Diff

commit 9b4e0755aaac211dc50ed155fe7a6de8958fd3ea
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon May 25 00:39:59 2026 -0700

    stack both hamburgers in upper-right corner of design image — no longer overlaps the palette label
---
 server.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/server.js b/server.js
index 496aabe..af18d70 100644
--- a/server.js
+++ b/server.js
@@ -9328,14 +9328,14 @@ ${htmlHeader('/designs')}
 
       <style>
         /* Hamburger button — small, top-right of the design image */
-        .edit-hamburger { position:absolute; top:14px; left:14px; width:42px; height:42px; background:rgba(20,18,15,.85); backdrop-filter:blur(8px); color:#f0eadc; border:1px solid rgba(255,255,255,.1); border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; z-index:18; transition:background .15s; }
+        .edit-hamburger { position:absolute; top:14px; right:14px; width:42px; height:42px; background:rgba(20,18,15,.85); backdrop-filter:blur(8px); color:#f0eadc; border:1px solid rgba(255,255,255,.1); border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; z-index:18; transition:background .15s; }
         .edit-hamburger:hover { background:rgba(20,18,15,.95); border-color:#d2b15c; }
         .edit-hamburger span { display:block; width:18px; height:2px; background:currentColor; border-radius:1px; }
         /* RIGHT-side ADMIN hamburger — separate panel for admin-only tabs
            (tone-on-tone fashion palettes, etc.). Public tabs live in the
            LEFT edit-hamburger above. Steve 2026-05-25: "move the tabs into
            the left and right panels in hamburgers". */
-        .admin-hamburger { position:absolute; top:14px; right:14px; width:42px; height:42px; background:rgba(60,20,15,.85); backdrop-filter:blur(8px); color:#fdd6a0; border:1px solid rgba(255,180,120,.2); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; z-index:18; transition:background .15s; font:600 11px var(--sans,system-ui); letter-spacing:.06em; }
+        .admin-hamburger { position:absolute; top:66px; right:14px; width:42px; height:42px; background:rgba(60,20,15,.85); backdrop-filter:blur(8px); color:#fdd6a0; border:1px solid rgba(255,180,120,.2); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; z-index:18; transition:background .15s; font:600 11px var(--sans,system-ui); letter-spacing:.06em; }
         .admin-hamburger:hover { background:rgba(60,20,15,.95); border-color:#d2b15c; }
         .admin-sheet { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:#faf7f1; box-shadow:-12px 0 40px rgba(0,0,0,.2); border-left:1px solid var(--line,#ddd); transform:translateX(100%); transition:transform .25s ease; z-index:30; overflow-y:auto; padding:18px 18px 32px; }
         .admin-sheet.open { transform:translateX(0); }
@@ -10883,7 +10883,10 @@ ${(() => {
     return lum > 0.6 ? '#1a1410' : '#ffffff';
   };
   return brands.map(p => {
-    const key = p.brand.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    // Strip diacritics first ('Hermès' → 'Hermes') so the kebab key reads
+    // cleanly. Both call sites (button render + RECOLOR_BRANDS map) use the
+    // identical transform so the rendered data-brand and the server key match.
+    const key = p.brand.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
     const bg = pickAccent(p.hex);
     const fg = textOn(bg);
     const title = `${p.brand} — ${p.hex.join(' · ')} — ${p.signature}`.replace(/"/g, '&quot;');
@@ -18464,7 +18467,10 @@ const RECOLOR_BRANDS = (() => {
   }
   const out = {};
   for (const p of entries) {
-    const key = p.brand.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    // Strip diacritics first ('Hermès' → 'Hermes') so the kebab key reads
+    // cleanly. Both call sites (button render + RECOLOR_BRANDS map) use the
+    // identical transform so the rendered data-brand and the server key match.
+    const key = p.brand.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
     out[key] = { label: p.brand, hex: p.hex.slice(), signature: p.signature };
   }
   return out;
← 60f4226 feat(design page): split tabs into LEFT (public) + RIGHT (ad · back to Wallco Ai · feat(design page): move Curated Rating into admin drawer + a bcbd379 →