fix(map): replace speed-dial FAB with two always-visible pill buttons
- Remove speed-dial/tap-to-expand pattern — buttons are now always visible - "Add Spot" — red (#ff0040), white text, same style as before - "Add Shop" — green (#00cc66), black text, sits above Add Spot - Both cleared of bottom nav via bottom-[calc(5rem+env(safe-area-inset-bottom))] - Removed unused fabOpen state Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy
parent
2500b549f5
commit
85a77b36f2
1 changed files with 28 additions and 55 deletions
|
|
@ -599,8 +599,7 @@ export default function MapPage() {
|
||||||
const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null);
|
const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null);
|
||||||
const [showLocationHelp, setShowLocationHelp] = useState(false);
|
const [showLocationHelp, setShowLocationHelp] = useState(false);
|
||||||
|
|
||||||
// Speed-dial FAB open state
|
|
||||||
const [fabOpen, setFabOpen] = useState(false);
|
|
||||||
|
|
||||||
const handleNearMe = () => {
|
const handleNearMe = () => {
|
||||||
// Clear previous error
|
// Clear previous error
|
||||||
|
|
@ -736,8 +735,6 @@ export default function MapPage() {
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleMapClick = (lat: number, lng: number) => {
|
const handleMapClick = (lat: number, lng: number) => {
|
||||||
// Close speed-dial FAB if open
|
|
||||||
setFabOpen(false);
|
|
||||||
if (!user) return;
|
if (!user) return;
|
||||||
// Navigate to create spot with coordinates pre-filled
|
// Navigate to create spot with coordinates pre-filled
|
||||||
navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`);
|
navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`);
|
||||||
|
|
@ -1424,65 +1421,41 @@ export default function MapPage() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Speed-dial FAB — bottom-right, above filter pills, clear of bottom nav.
|
{/* Add Spot + Add Shop FABs — always visible, bottom-left, clear of bottom nav */}
|
||||||
Tap the + button to expand into Add Spot + Add Shop options.
|
|
||||||
Hidden when overlays open. Desktop gets a different layout so md:hidden. */}
|
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
"absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] left-3 z-[1001] md:hidden flex flex-col items-start gap-2 transition-all duration-200",
|
"absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] left-3 z-[1001] md:hidden flex flex-col items-start gap-2 transition-all duration-200",
|
||||||
mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
|
mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
|
||||||
? "opacity-0 pointer-events-none scale-90"
|
? "opacity-0 pointer-events-none scale-90"
|
||||||
: "opacity-100 scale-100"
|
: "opacity-100 scale-100"
|
||||||
)}>
|
|
||||||
{/* Expanded options — slide up when fabOpen */}
|
|
||||||
<div className={cn(
|
|
||||||
"flex flex-col gap-2 transition-all duration-200 origin-bottom",
|
|
||||||
fabOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-3 pointer-events-none"
|
|
||||||
)}>
|
)}>
|
||||||
{user ? (
|
{user ? (
|
||||||
<>
|
<>
|
||||||
<Link to="/create-shop" onClick={() => setFabOpen(false)}>
|
{/* Add Shop — green */}
|
||||||
<button className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-purple-600 shadow-lg shadow-purple-600/30 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap">
|
<Link to="/create-shop">
|
||||||
<Store className="h-4 w-4 flex-shrink-0" />
|
<button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#00cc66] shadow-xl shadow-[#00cc66]/35 border-2 border-white/20 text-black font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
|
||||||
|
<Plus className="h-5 w-5 flex-shrink-0" />
|
||||||
Add Shop
|
Add Shop
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link to="/create-spot" onClick={() => setFabOpen(false)}>
|
{/* Add Spot — red */}
|
||||||
<button className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-[#ff0040] shadow-lg shadow-[#ff0040]/30 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap">
|
<Link to="/create-spot">
|
||||||
<MapPin className="h-4 w-4 flex-shrink-0" />
|
<button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040] shadow-xl shadow-[#ff0040]/40 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
|
||||||
|
<Plus className="h-5 w-5 flex-shrink-0" />
|
||||||
Add Spot
|
Add Spot
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => document.querySelector<HTMLElement>('[data-login-trigger]')?.click()}
|
||||||
setFabOpen(false);
|
className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040]/80 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform backdrop-blur whitespace-nowrap touch-manipulation"
|
||||||
document.querySelector<HTMLElement>('[data-login-trigger]')?.click();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-[#ff0040]/80 shadow-lg shadow-[#ff0040]/20 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform backdrop-blur whitespace-nowrap"
|
|
||||||
>
|
>
|
||||||
<Plus className="h-4 w-4 flex-shrink-0" />
|
<Plus className="h-5 w-5 flex-shrink-0" />
|
||||||
Log in to add
|
Add Spot
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main FAB trigger */}
|
|
||||||
<button
|
|
||||||
onClick={() => setFabOpen(v => !v)}
|
|
||||||
aria-label={fabOpen ? 'Close add menu' : 'Add spot or shop'}
|
|
||||||
aria-expanded={fabOpen}
|
|
||||||
className={cn(
|
|
||||||
"h-12 w-12 rounded-full shadow-xl border-2 border-white/20 flex items-center justify-center transition-all duration-200 active:scale-95 touch-manipulation",
|
|
||||||
fabOpen
|
|
||||||
? "bg-white/15 rotate-45 shadow-white/10"
|
|
||||||
: "bg-[#ff0040] shadow-[#ff0040]/40"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Plus className="h-5 w-5 text-white" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
|
{/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
"absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5 transition-opacity duration-150",
|
"absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5 transition-opacity duration-150",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue