skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 12 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> </div>
)} )}
{/* Add Spot + Add Shop FABs — always visible, bottom-left, clear of bottom nav */} {/* Add Spot + Add Shop FABs — bottom-left, 16px from bottom of map container
<div className={cn( The map container already excludes the bottom nav height, so bottom-4 is correct.
"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", Hidden when overlays open. */}
mobileFiltersOpen || selectedSpot || sasquatchPanelOpen {user && (
? "opacity-0 pointer-events-none scale-90" <div className={cn(
: "opacity-100 scale-100" "absolute bottom-4 left-3 z-[1001] md:hidden flex flex-col items-start gap-2.5 transition-all duration-200",
)}> mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
{user ? ( ? "opacity-0 pointer-events-none scale-90"
<> : "opacity-100 scale-100"
{/* Add Shop — green */} )}>
<Link to="/create-shop"> {/* Add Shop — green circle */}
<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"> <Link to="/create-shop" aria-label="Add a skate shop">
<Plus className="h-5 w-5 flex-shrink-0" /> <button
Add Shop 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"
</button> aria-label="Add shop"
</Link> >
{/* Add Spot — red */} <Plus className="h-6 w-6 text-black" strokeWidth={3} />
<Link to="/create-spot"> </button>
<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"> </Link>
<Plus className="h-5 w-5 flex-shrink-0" /> {/* Add Spot — red circle */}
Add Spot <Link to="/create-spot" aria-label="Add a skate spot">
</button> <button
</Link> 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"
) : ( >
<button <Plus className="h-6 w-6 text-white" strokeWidth={3} />
onClick={() => document.querySelector<HTMLElement>('[data-login-trigger]')?.click()} </button>
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" </Link>
> </div>
<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 */} {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
<div className={cn( <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) */} {/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
<div className={cn( <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" mobileFiltersOpen || selectedSpot ? "opacity-0 pointer-events-none" : "opacity-100"
)}> )}>
{/* Layer filter pills — compact icon-only */} {/* Layer filter pills — compact icon-only */}