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

map: shrink filter pills to h-7 w-7, hide right column + Near Me when filter sheet open

Browse source 
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-23 21:07:57 +07:00
parent 08e20b0f39
commit 3e6fc305ac
1 changed files with 24 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/pages/MapPage.tsx
View file

@ -1322,8 +1322,11 @@ export default function MapPage() {
</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">
{/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
<div className={cn(
"absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5 transition-opacity duration-150",
mobileFiltersOpen ? "opacity-0 pointer-events-none" : "opacity-100"
)}>
<Button
onClick={handleNearMe}
disabled={nearMeLoading}
@ -1349,23 +1352,26 @@ export default function MapPage() {
</div>
</div>
{/* 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 */}
{/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
<div className={cn(
"absolute bottom-24 right-3 z-[1000] md:hidden flex flex-col items-center gap-1.5 transition-opacity duration-150",
mobileFiltersOpen ? "opacity-0 pointer-events-none" : "opacity-100"
)}>
{/* Layer filter pills — compact icon-only */}
{[
{ 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 }) => (
{ key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), activeColor: 'bg-red-500/90' },
{ key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), activeColor: 'bg-purple-600/90' },
{ key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), activeColor: 'bg-orange-500/90' },
{ key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), activeColor: 'bg-cyan-500/90' },
].map(({ key, label, active, toggle, activeColor }) => (
<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',
'h-7 w-7 rounded-full text-xs flex items-center justify-center shadow-md border transition-all',
active
? `${color} border-white/30`
: 'bg-black/70 border-white/10 opacity-40'
? `${activeColor} border-white/20 shadow-black/30`
: 'bg-black/60 border-white/8 opacity-35'
)}
title={key}
>
@ -1374,19 +1380,19 @@ export default function MapPage() {
))}
{/* Divider */}
{user && <div className="w-5 h-px bg-white/20" />}
{user && <div className="w-4 h-px bg-white/15 my-0.5" />}
{/* 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"
className="h-12 w-12 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-lg shadow-[#ff0040]/25 border-2 border-white/20"
>
<Camera className="h-6 w-6" />
<Camera className="h-5 w-5" />
</Button>
<span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
Quick Snap
<span className="text-[10px] text-white/60 font-bold whitespace-nowrap">
Snap
</span>
</>
)}