widget: anchor bottom-right; slide launcher left of panel when open

74925bb229375bbbfc6e451fb69285382781976d · 2026-05-11 23:55:46 -0700 · Steve Abrams
Files touched

M public/widget.js
Diff

commit 74925bb229375bbbfc6e451fb69285382781976d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon May 11 23:55:46 2026 -0700

    widget: anchor bottom-right; slide launcher left of panel when open
---
 public/widget.js | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/widget.js b/public/widget.js
index 83e736d..7984755 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -21,7 +21,7 @@
   const css = `
     .bigred-launcher {
       position: fixed;
-      left: 22px;
+      right: 22px;
       bottom: 22px;
       z-index: 99990;
       width: 64px;
@@ -37,9 +37,12 @@
         0 0 0 5px rgba(216,50,58,.18),
         0 8px 24px rgba(216,50,58,.5),
         0 2px 10px rgba(0,0,0,.4);
-      transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
+      transition: right .26s cubic-bezier(.2,.7,.2,1), transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
       animation: bigred-pulse-red 2.6s ease-in-out infinite;
     }
+    /* When the panel is open, launcher slides LEFT of the panel so they sit
+       side-by-side hugging the right corner. */
+    .bigred-launcher.live { right: calc(22px + min(440px, calc(100vw - 44px)) + 12px); }
     .bigred-launcher img {
       width: 100%; height: 100%; display: block;
       object-fit: cover; object-position: center 28%;
@@ -99,7 +102,7 @@
 
     .bigred-tag {
       position: fixed;
-      left: 96px;
+      right: 96px;
       bottom: 36px;
       z-index: 99990;
       pointer-events: none;
@@ -110,20 +113,17 @@
       color: #ff5560;
       text-shadow: 0 0 12px rgba(255,85,96,.55), 0 0 2px rgba(0,0,0,.6);
       opacity: 0;
-      transform: translateX(-6px);
+      transform: translateX(6px);
       transition: opacity .25s, transform .25s, color .25s, text-shadow .25s;
     }
-    .bigred-launcher:hover + .bigred-tag,
-    .bigred-launcher.live + .bigred-tag { opacity: 1; transform: translateX(0); }
-    .bigred-launcher.live + .bigred-tag {
-      color: #58e070;
-      text-shadow: 0 0 12px rgba(88,224,112,.55), 0 0 2px rgba(0,0,0,.6);
-    }
+    .bigred-launcher:hover + .bigred-tag { opacity: 1; transform: translateX(0); }
+    /* Hide the tag when live — the panel is already showing context */
+    .bigred-launcher.live + .bigred-tag { opacity: 0; }
 
     .bigred-panel {
       position: fixed;
-      left: 22px;
-      bottom: 96px;
+      right: 22px;
+      bottom: 22px;
       z-index: 99991;
       width: min(440px, calc(100vw - 44px));
       height: min(660px, calc(100vh - 130px));
@@ -184,9 +184,12 @@
       flex: 1; width: 100%; border: 0; background: #1a0506;
     }
     @media (max-width: 640px) {
-      .bigred-launcher { left: 16px; bottom: 16px; width: 56px; height: 56px; }
-      .bigred-tag { left: 80px; bottom: 28px; font-size: 9px; }
-      .bigred-panel { left: 8px; right: 8px; bottom: 84px; width: auto; }
+      .bigred-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
+      /* On mobile there's no room for side-by-side — launcher hides behind
+         the panel and reveals again on close. */
+      .bigred-launcher.live { right: 16px; opacity: 0; pointer-events: none; }
+      .bigred-tag { right: 80px; bottom: 28px; font-size: 9px; }
+      .bigred-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(560px, calc(100vh - 40px)); }
     }
   `;
← 09a1667 feat(widget): avatar launcher with red->green live state on · back to Big Red · feat(big-red): DW intelligence — SKU lookup with live Shopif 62eb53c →