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

map: consolidate right-side controls into single column (pills → divider → Quick Snap)

Browse source 
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-23 20:10:24 +07:00
parent c9bb5abfff
commit 2e32605948
1 changed files with 40 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/pages/MapPage.tsx
View file

@ -1249,30 +1249,6 @@ export default function MapPage() {
</div>
)}
{/* Floating layer filter pills — bottom-left above attribution */}
<div className="absolute bottom-8 left-3 z-[1000] flex gap-1.5 flex-wrap max-w-[calc(100%-1.5rem)]">
{[
{ key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), color: 'bg-red-500' },
{ key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' },
{ key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' },
{ key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' },
].map(({ key, label, active, toggle, color }) => (
<button
key={key}
onClick={toggle}
className={cn(
'h-8 w-8 rounded-full text-sm flex items-center justify-center shadow-lg border transition-all backdrop-blur',
active
? `${color} border-white/30 shadow-black/40`
: 'bg-black/70 border-white/10 opacity-50'
)}
title={key}
>
{label}
</button>
))}
</div>
{/* Near Me button + attribution — floating top-right */}
<div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5">
<Button
@ -1300,21 +1276,48 @@ export default function MapPage() {
</div>
</div>
{/* Quick Capture FAB - only show for logged in users on mobile */}
{user && (
<div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2">
<Button
onClick={() => setShowQuickCamera(true)}
className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
{/* Right-side control column — filter pills + Quick Snap (mobile only) */}
<div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2">
{/* Layer filter pills */}
{[
{ key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), color: 'bg-red-500' },
{ key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' },
{ key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' },
{ key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' },
].map(({ key, label, active, toggle, color }) => (
<button
key={key}
onClick={toggle}
className={cn(
'h-9 w-9 rounded-full text-sm flex items-center justify-center shadow-lg border transition-all backdrop-blur',
active
? `${color} border-white/30`
: 'bg-black/70 border-white/10 opacity-40'
)}
title={key}
>
<Camera className="h-6 w-6" />
</Button>
<span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
Quick Snap
</span>
{label}
</button>
))}
</div>
)}
{/* Divider */}
{user && <div className="w-5 h-px bg-white/20" />}
{/* Quick Snap */}
{user && (
<>
<Button
onClick={() => setShowQuickCamera(true)}
className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
>
<Camera className="h-6 w-6" />
</Button>
<span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
Quick Snap
</span>
</>
)}
</div>
</>
) : (
<div className="h-full overflow-auto">