k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-19 05:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(tours): the map search sits between the panels without a physical side, and the day row facts use the caption tier

Browse Source
This commit is contained in:
Maurice
2026-10-14 09:22:38 +02:00
parent dbee1664af
commit 09227ec0d1
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Tours/TourDayRowFacts.tsx
+2 -2
View File
@@ -55,7 +55,7 @@ function Fact({
event.stopPropagation();
if (event.key === 'Escape') setOpen(false);
}}
className={`inline-flex items-center gap-1 whitespace-nowrap rounded-[6px] px-1.5 py-0.5 text-[0.65625rem] tabular-nums focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent ${mobile ? 'bg-[color:var(--m-ic)] text-m-muted' : 'bg-surface-card text-content-secondary'}`}
className={`inline-flex items-center gap-1 whitespace-nowrap rounded-[6px] px-1.5 py-0.5 text-caption tabular-nums focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent ${mobile ? 'bg-[color:var(--m-ic)] text-m-muted' : 'bg-surface-card text-content-secondary'}`}
>
<Icon size={11} aria-hidden="true" />
{value}
@@ -65,7 +65,7 @@ function Fact({
id={id}
hidden={!open}
role="note"
className={`absolute start-0 top-full z-30 mt-1 w-40 whitespace-normal rounded-[6px] border p-2 text-[0.6875rem] shadow-sm ${mobile ? 'bg-[color:var(--m-ic)] text-m-ink' : 'border-edge bg-surface-card text-content'}`}
className={`absolute start-0 top-full z-30 mt-1 w-40 whitespace-normal rounded-[6px] border p-2 text-caption shadow-sm ${mobile ? 'bg-[color:var(--m-ic)] text-m-ink' : 'border-edge bg-surface-card text-content'}`}
>
{label}
</span>
client/src/pages/TripPlannerPage.tsx
+18 -18
View File
@@ -663,24 +663,24 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
viewBaseLayer={tourPlanner.mapBaseLayer}
onViewBaseLayerChange={tourPlanner.setMapBaseLayer}
/>
<div
style={{
position: 'absolute',
top: 12,
left: `calc(50% + ${((leftHidden ? 56 : leftPanelPx) - (rightHidden ? 56 : rightPanelPx)) / 2}px)`,
transform: 'translateX(-50%)',
width: `min(360px, calc(100vw - ${(leftHidden ? 56 : leftPanelPx) + (rightHidden ? 56 : rightPanelPx) + 32}px))`,
zIndex: 19,
}}
>
<LocationSelect
value={locationSearch.value}
onChange={locationSearch.onChange}
placeholder={t('reservations.searchLocation')}
ariaLabel={t('reservations.searchLocation')}
showSearchStatus
style={{ width: '100%' }}
/>
{/* Centred over the map between the two panels, which sit on fixed physical sides. */}
<div style={{ position: 'absolute', top: 12, insetInline: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none', zIndex: 19 }}>
<div
style={{
transform: `translateX(${((leftHidden ? 56 : leftPanelPx) - (rightHidden ? 56 : rightPanelPx)) / 2}px)`,
width: `min(360px, calc(100vw - ${(leftHidden ? 56 : leftPanelPx) + (rightHidden ? 56 : rightPanelPx) + 32}px))`,
pointerEvents: 'auto',
}}
>
<LocationSelect
value={locationSearch.value}
onChange={locationSearch.onChange}
placeholder={t('reservations.searchLocation')}
ariaLabel={t('reservations.searchLocation')}
showSearchStatus
style={{ width: '100%' }}
/>
</div>
</div>
<div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
<PanelTab hidden={leftHidden} label={leftHidden ? t('trip.mobilePlan') : t('common.collapse')} onToggle={toggleLeft} />