From f84888ea069dc852372caa6172cd023c5798a01f Mon Sep 17 00:00:00 2001 From: Sociowire Dev Date: Mon, 12 Jan 2026 06:10:48 +0000 Subject: [PATCH] Fix FAB and weather widget z-index and positioning - FAB category z-index goes to 9000 when open (above search/weather) - FAB returns to normal z-index when closed - Weather widget positioned with document flow below search bar - Increased spacing between FAB categories and subcategories - FABs moved lower on screen (260px desktop, 240px mobile) - Search bar dropdown z-index increased to 850 - Labels use transparent background with text shadow Co-Authored-By: Claude Opus 4.5 --- src/components/Map/MapView.jsx | 8 ++--- src/components/Map/RadialMenu.css | 53 +++++++++++++++++-------------- src/components/Map/RadialMenu.jsx | 15 +++++---- src/styles/map.css | 2 +- src/styles/smartSearchBar.css | 2 +- 5 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index 9684bc6..d176539 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -1953,7 +1953,7 @@ export default function MapView({ - {/* Weather widget - single nearest city - BELOW search bar */} + {/* Weather widget - flows naturally below search bar */} {nearestWeather && (() => { const w = nearestWeather; const isSunny = w.icon === '☀️' || w.icon === '⛅'; @@ -1974,9 +1974,8 @@ export default function MapView({
setActiveWeatherPost(w)} style={{ - position: 'fixed', - left: '2px', - top: '55px', + marginTop: '4px', + marginLeft: '3px', display: 'inline-flex', alignItems: 'center', gap: '5px', @@ -1990,7 +1989,6 @@ export default function MapView({ cursor: 'pointer', backdropFilter: 'blur(8px)', boxShadow: '0 2px 8px rgba(0,0,0,0.2)', - zIndex: 300, }} > {w.icon} diff --git a/src/components/Map/RadialMenu.css b/src/components/Map/RadialMenu.css index eb68319..31e1649 100644 --- a/src/components/Map/RadialMenu.css +++ b/src/components/Map/RadialMenu.css @@ -7,7 +7,7 @@ background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); - z-index: 440; /* Above weather widget (300), below FAB items */ + z-index: 810; /* Above map-overlay-top (800) */ animation: fab-fade-in 0.2s ease; } @@ -20,8 +20,8 @@ .fab-left, .fab-right { position: fixed; - top: 180px; - z-index: 450; /* Above weather widget (300), below search dropdown (500) */ + top: 260px; + z-index: 820; /* Above map-overlay-top (800) */ } .fab-left { @@ -49,7 +49,7 @@ transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; position: relative; - z-index: 451; /* Above weather widget (300), below search dropdown (500) */ + z-index: 821; /* Above map-overlay-top (800) */ } .fab-btn-right { @@ -81,11 +81,11 @@ transform: translateX(-50%); font-size: 10px; font-weight: 700; - color: #1e293b; - text-shadow: 0 1px 2px rgba(255,255,255,0.8); + color: #fff; + text-shadow: 0 1px 3px rgba(0,0,0,0.8); white-space: nowrap; pointer-events: none; - background: rgba(255, 255, 255, 0.85); + background: transparent; padding: 2px 6px; border-radius: 4px; max-width: 80px; @@ -94,14 +94,15 @@ } .fab-label-time { - background: rgba(15, 23, 42, 0.85); - color: #e2e8f0; - text-shadow: 0 1px 4px rgba(0,0,0,0.8); + background: transparent; + color: #fff; + text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .fab-label-cat { - background: rgba(255, 255, 255, 0.9); - color: #1e293b; + background: transparent; + color: #fff; + text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Item labels (category/subcategory names) */ @@ -113,11 +114,11 @@ margin-top: 4px; font-size: 9px; font-weight: 700; - color: #1e293b; - text-shadow: 0 1px 2px rgba(255,255,255,0.9); + color: #fff; + text-shadow: 0 1px 3px rgba(0,0,0,0.8); white-space: nowrap; pointer-events: none; - background: rgba(255, 255, 255, 0.9); + background: transparent; padding: 1px 5px; border-radius: 3px; } @@ -172,7 +173,7 @@ transform: translate(var(--x), var(--y)) scale(1); pointer-events: auto; transition-delay: var(--delay); - z-index: 452; /* Above weather widget when visible */ + z-index: 822; /* Above map-overlay-top (800) */ } .fab-item:hover { @@ -210,7 +211,7 @@ animation: fab-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: var(--delay); --color: #64748b; - z-index: 453; /* Above category items */ + z-index: 823; /* Above category items */ } .fab-sub.is-active { @@ -251,13 +252,19 @@ body[data-theme="light"] .fab-btn { } body[data-theme="light"] .fab-label { - color: #1e293b; - text-shadow: 0 1px 4px rgba(255,255,255,0.8); + color: #0f172a; + text-shadow: 0 1px 3px rgba(255,255,255,0.6); } -body[data-theme="light"] .fab-label-time { - background: rgba(255, 255, 255, 0.9); - color: #1e293b; +body[data-theme="light"] .fab-label-time, +body[data-theme="light"] .fab-label-cat { + color: #0f172a; + text-shadow: 0 1px 3px rgba(255,255,255,0.6); +} + +body[data-theme="light"] .fab-item-label { + color: #0f172a; + text-shadow: 0 1px 3px rgba(255,255,255,0.6); } body[data-theme="light"] .fab-item { @@ -276,7 +283,7 @@ body[data-theme="light"] .fab-item.is-active { @media (max-width: 480px) { .fab-left, .fab-right { - top: 160px; + top: 240px; } .fab-left { diff --git a/src/components/Map/RadialMenu.jsx b/src/components/Map/RadialMenu.jsx index bc5ec63..1ccd7ad 100644 --- a/src/components/Map/RadialMenu.jsx +++ b/src/components/Map/RadialMenu.jsx @@ -110,31 +110,32 @@ export default function RadialMenu({ {(leftOpen || rightOpen) && (
{ setLeftOpen(false); setRightOpen(false); }} /> )} {/* LEFT FAB - Categories */} -
+
{/* Categories ring - expand DOWN-RIGHT */}
{CATEGORIES.map((cat, i) => { // Find index of first active category to rotate const firstActiveIdx = CATEGORIES.findIndex(c => activeCategories.includes(c.id)); // Rotate so active category is at middle-right (angle 0 = straight right) - const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 40 : 0; - const angle = -20 + (i * 40) + rotateOffset; + const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 50 : 0; + const angle = -25 + (i * 50) + rotateOffset; const rad = (angle * Math.PI) / 180; - const r = 62; + const r = 68; const x = Math.cos(rad) * r; const y = Math.sin(rad) * r; const isActive = activeCategories.includes(cat.id); // Subcategories for this category const subcats = SUBCATEGORIES[cat.id] || []; - const subRadius = 52; + const subRadius = 65; // Spread subcats more - center them around the category angle - const subSpacing = 32; + const subSpacing = 45; const subStartAngle = angle - ((subcats.length - 1) * subSpacing) / 2; return ( @@ -188,7 +189,7 @@ export default function RadialMenu({