mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
fix(map): the base layer switch stays in its corner when a place opens
Opening a place sent it from the bottom left of the map to the top, which reads as the control moving house rather than as room being made. Nothing was in its way: the inspector is a card centred between the sidebars and at most 800 wide, so the corner it was clearing is one the card never reaches. Both renderers, since the switch is not supposed to move when an instance changes its map.
This commit is contained in:
@@ -1224,7 +1224,11 @@ export const MapView = memo(function MapView({
|
||||
{/* 20px off the sidebar, not 12: the pill is round and frosted, so at the
|
||||
smaller gap its shadow ran into the sidebar edge and the two read as one
|
||||
surface. */}
|
||||
<div style={{ position: 'absolute', left: leftWidth + 20, top: hasInspector ? 80 : undefined, bottom: hasInspector ? undefined : switcherBottom, zIndex: 1000, pointerEvents: 'none' }}>
|
||||
{/* Bottom left, whatever else is on screen. Opening a place used to send it to the
|
||||
top of the map, which read as the control moving house rather than as room being
|
||||
made: the inspector is a centred card at most 800 wide, so the corner it would
|
||||
have been clearing is one the card never reaches. */}
|
||||
<div style={{ position: 'absolute', left: leftWidth + 20, bottom: switcherBottom, zIndex: 1000, pointerEvents: 'none' }}>
|
||||
<MapLayerSwitcher active={baseLayer} onToggle={toggleBaseLayer} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2305,11 +2305,12 @@ export function MapViewGL({
|
||||
{/* Same pill, same corner, same offsets as the Leaflet map: the switch should not
|
||||
move when an instance changes renderer. The day panel is a centred card on the
|
||||
desktop map and never reaches the pill, but on a phone it is full width and
|
||||
does, which is why the lift is only there. */}
|
||||
does, which is why the lift is only there. An open place inspector is a centred
|
||||
card too, and used to send the pill to the top of the map for a corner it never
|
||||
covers. */}
|
||||
<div style={{
|
||||
position: 'absolute', left: leftWidth + 20, zIndex: 1000, pointerEvents: 'none',
|
||||
top: hasInspector ? 80 : undefined,
|
||||
bottom: hasInspector ? undefined : isMobile && hasDayDetail
|
||||
bottom: isMobile && hasDayDetail
|
||||
? 'calc(var(--bottom-nav-h, 0px) + 20px + var(--day-panel-h, 0px) + 12px)'
|
||||
: 'calc(var(--bottom-nav-h, 0px) + 12px)',
|
||||
}}>
|
||||
|
||||
Reference in New Issue
Block a user