skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions 1

fix(map): replace speed-dial FAB with two always-visible pill buttons

Browse source 
- 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 2026-07-23 23:08:11 +07:00
parent 2500b549f5
commit 85a77b36f2
1 changed files with 28 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/pages/MapPage.tsx
View file

@ -599,8 +599,7 @@ export default function MapPage() {
const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null);
const [showLocationHelp, setShowLocationHelp] = useState(false);
// Speed-dial FAB open state
const [fabOpen, setFabOpen] = useState(false);
const handleNearMe = () => {
// Clear previous error
@ -736,8 +735,6 @@ export default function MapPage() {
);
const handleMapClick = (lat: number, lng: number) => {
// Close speed-dial FAB if open
setFabOpen(false);
if (!user) return;
// Navigate to create spot with coordinates pre-filled
navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`);
@ -1424,63 +1421,39 @@ export default function MapPage() {
</div>
)}
{/* Speed-dial FAB — bottom-right, above filter pills, 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. */}
{/* Add Spot + Add Shop FABs — always visible, bottom-left, clear of bottom nav */}
<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",
mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
? "opacity-0 pointer-events-none scale-90"
: "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 ? (
<>
<Link to="/create-shop" onClick={() => setFabOpen(false)}>
<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">
<Store className="h-4 w-4 flex-shrink-0" />
Add Shop
</button>
</Link>
<Link to="/create-spot" onClick={() => setFabOpen(false)}>
<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">
<MapPin className="h-4 w-4 flex-shrink-0" />
Add Spot
</button>
</Link>
</>
) : (
<button
onClick={() => {
setFabOpen(false);
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" />
Log in to add
</button>
)}
</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>
{user ? (
<>
{/* Add Shop — green */}
<Link to="/create-shop">
<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
</button>
</Link>
{/* Add Spot — red */}
<Link to="/create-spot">
<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
</button>
</Link>
</>
) : (
<button
onClick={() => document.querySelector<HTMLElement>('[data-login-trigger]')?.click()}
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"
>
<Plus className="h-5 w-5 flex-shrink-0" />
Add Spot
</button>
)}
</div>
{/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}