andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

has issues

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-25 13:20:17 +01:00
parent 2e112d7398
commit c645b0f1d4
96 changed files with 2147083 additions and 5787 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/components/map/map-page/MobileMapPage.tsx
View file

@ -10,9 +10,11 @@ import type {
} from '../../../types';
import type { useMapData } from '../../../hooks/useMapData';
import type { TravelTimeEntry } from '../../../hooks/useTravelTime';
import type { OverlayId } from '../../../lib/overlays';
import type { SearchedLocation } from '../LocationSearch';
import MobileBottomSheet from '../MobileBottomSheet';
import { MapPinIcon } from '../../ui/icons/MapPinIcon';
import { EyeIcon } from '../../ui/icons/EyeIcon';
import { IndeterminateProgressBar } from '../../ui/IndeterminateProgressBar';
import type { MapFlyTo } from './types';
import { MapFallback, PaneFallback } from './Fallbacks';
@ -26,6 +28,7 @@ interface MobileMapPageProps {
initialLoading: boolean;
mapData: MapData;
pois: POI[];
activeOverlays: Set<OverlayId>;
mapViewFeature: string | null;
filterRange: [number, number] | null;
viewSource: 'drag' | 'eye' | null;
@ -56,6 +59,9 @@ interface MobileMapPageProps {
onTogglePoiPane: () => void;
poiButtonLabel: string;
poiPane: ReactNode;
overlayPaneOpen: boolean;
onToggleOverlayPane: () => void;
overlayPane: ReactNode;
filtersPane: ReactNode;
mobileLegend: ReactNode;
renderAreaPane: () => ReactNode;
@ -69,6 +75,7 @@ export function MobileMapPage({
initialLoading,
mapData,
pois,
activeOverlays,
mapViewFeature,
filterRange,
viewSource,
@ -99,6 +106,9 @@ export function MobileMapPage({
onTogglePoiPane,
poiButtonLabel,
poiPane,
overlayPaneOpen,
onToggleOverlayPane,
overlayPane,
filtersPane,
mobileLegend,
renderAreaPane,
@ -119,6 +129,7 @@ export function MobileMapPage({
postcodeData={mapData.postcodeData}
usePostcodeView={mapData.usePostcodeView}
pois={pois}
activeOverlays={activeOverlays}
onViewChange={mapData.handleViewChange}
viewFeature={mapViewFeature}
colorRange={mapData.colorRange}
@ -150,16 +161,31 @@ export function MobileMapPage({
</Suspense>
</div>
<button
onClick={onTogglePoiPane}
className={`absolute top-3 right-3 z-20 p-2 rounded-lg shadow-lg bg-white dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 dark:text-warm-400 hover:text-teal-600 dark:hover:text-teal-400'}`}
aria-label={poiButtonLabel}
>
<MapPinIcon className="w-5 h-5" />
</button>
<div className="absolute right-3 top-3 z-20 flex flex-col gap-2">
<button
onClick={onToggleOverlayPane}
className={`rounded-lg bg-white p-2 shadow-lg dark:bg-warm-800 ${overlayPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 hover:text-teal-600 dark:text-warm-400 dark:hover:text-teal-400'}`}
aria-label="Overlays"
>
<EyeIcon className="h-5 w-5" filled={overlayPaneOpen} />
</button>
<button
onClick={onTogglePoiPane}
className={`rounded-lg bg-white p-2 shadow-lg dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 hover:text-teal-600 dark:text-warm-400 dark:hover:text-teal-400'}`}
aria-label={poiButtonLabel}
>
<MapPinIcon className="h-5 w-5" />
</button>
</div>
{overlayPaneOpen && (
<div className="absolute top-24 right-3 left-3 z-20 flex h-[220px] min-h-0 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
{overlayPane}
</div>
)}
{poiPaneOpen && (
<div className="absolute top-14 right-3 left-3 z-20 flex h-[45dvh] min-h-0 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
<div className="absolute top-24 right-3 left-3 z-20 flex h-[45dvh] min-h-0 flex-col overflow-hidden rounded-lg border border-warm-200 bg-white shadow-xl dark:border-warm-700 dark:bg-warm-900">
{poiPane}
</div>
)}