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

lgtm

Browse source
This commit is contained in:
Andras Schmelczer 2026-07-12 15:03:33 +01:00
parent 982e0cc89c
commit cfaf58dfba
44 changed files with 793 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -57,7 +57,9 @@ interface MobileMapPageProps {
actualListings: ActualListing[];
actualListingsEnabled: boolean;
actualListingsLoading: boolean;
onToggleActualListings?: () => void;
onToggleListingsPane?: () => void;
listingsPaneOpen: boolean;
listingsPane: ReactNode;
travelTimeEntries: TravelTimeEntry[];
bottomScreenInset: number;
onBottomSheetCoveredHeightChange: (height: number) => void;
@ -110,7 +112,9 @@ export function MobileMapPage({
actualListings,
actualListingsEnabled,
actualListingsLoading,
onToggleActualListings,
onToggleListingsPane,
listingsPaneOpen,
listingsPane,
travelTimeEntries,
bottomScreenInset,
onBottomSheetCoveredHeightChange,
@ -145,7 +149,7 @@ export function MobileMapPage({
// Each button is p-2 + a 1.25rem icon (36px); they sit in a `gap-2` (8px) row.
const ACTION_BUTTON_WIDTH = 36;
const ACTION_BUTTON_GAP = 8;
const actionButtonCount = (onToggleActualListings ? 1 : 0) + 2;
const actionButtonCount = (onToggleListingsPane ? 1 : 0) + 2;
const topCardsRightInset =
actionButtonCount * ACTION_BUTTON_WIDTH + actionButtonCount * ACTION_BUTTON_GAP; // inter-button gaps + breathing room before the search
@ -199,19 +203,15 @@ export function MobileMapPage({
</div>
<div className="absolute right-3 top-3 z-20 flex max-w-[calc(100%_-_1.5rem)] flex-row flex-wrap justify-end gap-2">
{onToggleActualListings && (
{onToggleListingsPane && (
<button
type="button"
onClick={onToggleActualListings}
onClick={onToggleListingsPane}
className={`rounded-lg bg-white p-2 shadow-lg dark:bg-warm-800 ${actualListingsEnabled ? 'text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300' : 'text-warm-500 hover:text-red-600 dark:text-warm-400 dark:hover:text-red-400'}`}
aria-pressed={actualListingsEnabled}
aria-expanded={listingsPaneOpen}
aria-busy={actualListingsLoading}
aria-label={
actualListingsEnabled ? t('map.actualListings.hide') : t('map.actualListings.show')
}
title={
actualListingsEnabled ? t('map.actualListings.hide') : t('map.actualListings.show')
}
aria-label={t('map.actualListings.label')}
title={t('map.actualListings.label')}
>
{actualListingsLoading ? (
<SpinnerIcon className="h-5 w-5 animate-spin" />
@ -236,6 +236,12 @@ export function MobileMapPage({
</button>
</div>
{listingsPaneOpen && (
<div className="absolute top-24 right-3 left-3 z-20 flex max-h-[60dvh] 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">
{listingsPane}
</div>
)}
{overlayPaneOpen && (
<div className="absolute top-24 right-3 left-3 z-20 flex max-h-[60dvh] 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}