skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 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> </div>
)} )}
{/* Near Me button + attribution — floating top-right */} {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
<div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5"> <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 <Button
onClick={handleNearMe} onClick={handleNearMe}
disabled={nearMeLoading} disabled={nearMeLoading}
@ -1349,23 +1352,26 @@ export default function MapPage() {
</div> </div>
</div> </div>
{/* Right-side control column — filter pills + Quick Snap (mobile only) */} {/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
<div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2"> <div className={cn(
{/* Layer filter pills */} "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: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), activeColor: 'bg-red-500/90' },
{ key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' }, { key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), activeColor: 'bg-purple-600/90' },
{ key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' }, { key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), activeColor: 'bg-orange-500/90' },
{ key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' }, { key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), activeColor: 'bg-cyan-500/90' },
].map(({ key, label, active, toggle, color }) => ( ].map(({ key, label, active, toggle, activeColor }) => (
<button <button
key={key} key={key}
onClick={toggle} onClick={toggle}
className={cn( 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 active
? `${color} border-white/30` ? `${activeColor} border-white/20 shadow-black/30`
: 'bg-black/70 border-white/10 opacity-40' : 'bg-black/60 border-white/8 opacity-35'
)} )}
title={key} title={key}
> >
@ -1374,19 +1380,19 @@ export default function MapPage() {
))} ))}
{/* Divider */} {/* 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 */} {/* Quick Snap */}
{user && ( {user && (
<> <>
<Button <Button
onClick={() => setShowQuickCamera(true)} 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> </Button>
<span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded"> <span className="text-[10px] text-white/60 font-bold whitespace-nowrap">
Quick Snap Snap
</span> </span>
</> </>
)} )}