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

fix(map): FABs bottom-4 inside map container, icon-only circles

Browse source 
- Root cause: map container is already clipped to exclude bottom nav
  (h-[calc(100dvh-var(--header-mobile)-var(--bottom-nav))]) so
  bottom-[calc(5rem+...)] was pushing buttons ~80px up inside the
  clipped box — wrong and covered filter pills
- Both FABs and right-side pills now use bottom-4 (16px from container edge)
- FABs redesigned as clean 48×48 icon-only circles, no text labels:
    red circle  (+) → Add Spot
    green circle (+) → Add Shop
  thick Plus strokeWidth=3, high-contrast (black on green, white on red)
- Only shown when user is logged in (no logged-out ghost button)

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-23 23:28:55 +07:00
parent acf731871b
commit f2c9c3d118
1 changed files with 31 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/pages/MapPage.tsx
View file

@ -1421,40 +1421,36 @@ export default function MapPage() {
</div>
)}
{/* 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"
)}>
{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>
{/* Add Spot + Add Shop FABs — bottom-left, 16px from bottom of map container
The map container already excludes the bottom nav height, so bottom-4 is correct.
Hidden when overlays open. */}
{user && (
<div className={cn(
"absolute bottom-4 left-3 z-[1001] md:hidden flex flex-col items-start gap-2.5 transition-all duration-200",
mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
? "opacity-0 pointer-events-none scale-90"
: "opacity-100 scale-100"
)}>
{/* Add Shop — green circle */}
<Link to="/create-shop" aria-label="Add a skate shop">
<button
className="h-12 w-12 rounded-full bg-[#00cc66] shadow-xl shadow-[#00cc66]/40 border-2 border-white/25 flex items-center justify-center active:scale-90 transition-transform touch-manipulation"
aria-label="Add shop"
>
<Plus className="h-6 w-6 text-black" strokeWidth={3} />
</button>
</Link>
{/* Add Spot — red circle */}
<Link to="/create-spot" aria-label="Add a skate spot">
<button
className="h-12 w-12 rounded-full bg-[#ff0040] shadow-xl shadow-[#ff0040]/40 border-2 border-white/25 flex items-center justify-center active:scale-90 transition-transform touch-manipulation"
aria-label="Add spot"
>
<Plus className="h-6 w-6 text-white" strokeWidth={3} />
</button>
</Link>
</div>
)}
{/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
<div className={cn(
@ -1541,7 +1537,7 @@ export default function MapPage() {
{/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
<div className={cn(
"absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-opacity duration-150",
"absolute bottom-4 right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-opacity duration-150",
mobileFiltersOpen || selectedSpot ? "opacity-0 pointer-events-none" : "opacity-100"
)}>
{/* Layer filter pills — compact icon-only */}