richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move List/Map toggle to floating overlay on map panel

Browse Source 
- View toggle: floating in top-left of map panel with shadow + paper bg
- Control bar: just Filters + Sort (consistent heights, no overflow)
- Results count: bumped mt from 1 to 2 for more breathing room
- Both ProvidersStep and VenueStep updated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-31 17:21:06 +11:00
parent e67c6342e9
commit 7b8cb65a63
2 changed files with 124 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/pages/VenueStep/VenueStep.tsx
View File

@@ -249,23 +249,69 @@ export const VenueStep: React.FC<VenueStepProps> = ({
onBack={onBack}
sx={sx}
secondaryPanel={
mapPanel || (
<Box
<Box sx={{ position: 'relative', flex: 1, display: 'flex' }}>
{/* Floating view toggle */}
<ToggleButtonGroup
value={viewMode}
exclusive
onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
size="small"
aria-label="View mode"
sx={{
bgcolor: 'var(--fa-color-surface-cool)',
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderLeft: '1px solid',
borderColor: 'divider',
position: 'absolute',
top: 12,
left: 12,
zIndex: 1,
bgcolor: 'background.paper',
boxShadow: 'var(--fa-shadow-md)',
borderRadius: 1,
'& .MuiToggleButton-root': {
px: 1.5,
py: 0.5,
fontSize: '0.75rem',
fontWeight: 500,
gap: 0.5,
border: '1px solid',
borderColor: 'divider',
textTransform: 'none',
'&.Mui-selected': {
bgcolor: 'var(--fa-color-brand-100)',
color: 'primary.main',
borderColor: 'primary.main',
'&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
},
},
}}
>
<Typography variant="body1" color="text.secondary">
Map coming soon
</Typography>
</Box>
)
<ToggleButton value="list" aria-label="List view">
<ViewListOutlinedIcon sx={{ fontSize: 16 }} />
List
</ToggleButton>
<ToggleButton value="map" aria-label="Map view">
<MapOutlinedIcon sx={{ fontSize: 16 }} />
Map
</ToggleButton>
</ToggleButtonGroup>
{/* Map content */}
{mapPanel || (
<Box
sx={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'var(--fa-color-surface-cool)',
borderLeft: '1px solid',
borderColor: 'divider',
}}
>
<Typography variant="body1" color="text.secondary">
Map coming soon
</Typography>
</Box>
)}
</Box>
}
>
{/* Heading — scrolls with listings */}
@@ -315,7 +361,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
sx={{ mb: 1.5 }}
/>
{/* Control bar — view toggle, filters, sort on one line */}
{/* Control bar — filters + sort */}
<Box
sx={{
display: 'flex',
@@ -323,42 +369,6 @@ export const VenueStep: React.FC<VenueStepProps> = ({
gap: 1,
}}
>
{/* View toggle */}
<ToggleButtonGroup
value={viewMode}
exclusive
onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
size="small"
aria-label="View mode"
sx={{
'& .MuiToggleButton-root': {
px: 1.5,
py: 0.5,
fontSize: '0.75rem',
fontWeight: 500,
gap: 0.5,
border: '1px solid',
borderColor: 'divider',
textTransform: 'none',
'&.Mui-selected': {
bgcolor: 'var(--fa-color-brand-100)',
color: 'primary.main',
borderColor: 'primary.main',
'&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
},
},
}}
>
<ToggleButton value="list" aria-label="List view">
<ViewListOutlinedIcon sx={{ fontSize: 16 }} />
List
</ToggleButton>
<ToggleButton value="map" aria-label="Map view">
<MapOutlinedIcon sx={{ fontSize: 16 }} />
Map
</ToggleButton>
</ToggleButtonGroup>
{/* Filters */}
<FilterPanel activeCount={activeCount} onClear={handleClear}>
{/* ── Location ── */}
@@ -514,7 +524,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
<Typography
variant="caption"
color="text.secondary"
sx={{ mt: 1, display: 'block' }}
sx={{ mt: 2, display: 'block' }}
aria-live="polite"
>
{venues.length} venue{venues.length !== 1 ? 's' : ''}