mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
fix(maps): the phone map carries no credit and no night pause labels
The credit was a round (i) under the locate button, and on a full-bleed phone map a lone control there is the first thing the eye lands on. It is off on the phone now: one rule in mobile.css against both engines' containers, so Leaflet, MapLibre and Mapbox cannot drift apart. The desktop map is untouched and still shows the full credit with its links. Owner's call, made knowingly. With the credit gone the band the round controls floated on had nothing under it to clear, so the 38px credit row comes out of --bottom-nav-h and out of the camera padding the offered roads are framed with. The controls now stand on the map floor. The night pause pills go with it. On the desktop one is a drag handle with a hint; a phone has neither hover to explain it nor room to drag, and the markers come from the whole drive rather than the stage on screen, so day 1 drew day 2's pill as well. Both via lists go through the same filter, because the plan tab carries them too.
This commit is contained in:
@@ -34,7 +34,6 @@ function alternativeLabelIcon(label: string, note: string, background: string, a
|
||||
})
|
||||
}
|
||||
import L from 'leaflet'
|
||||
import MapAttributionToggle from './MapAttributionToggle'
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.css'
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
|
||||
import { mapsApi } from '../../api/client'
|
||||
@@ -999,16 +998,6 @@ export const MapView = memo(function MapView({
|
||||
? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
|
||||
: 'calc(var(--bottom-nav-h, 84px) + 12px)'
|
||||
|
||||
/**
|
||||
* Whether the credit is showing, on a phone where it starts as the (i).
|
||||
*
|
||||
* Held here rather than pushed into Leaflet's own container: Leaflet rewrites that
|
||||
* container's markup from scratch whenever a layer with an attribution is added or
|
||||
* removed, so anything injected into it dies on the next basemap switch. A class on
|
||||
* the wrapper survives that, and the CSS lives with the rest of the mobile chrome.
|
||||
*/
|
||||
const [attribOpen, setAttribOpen] = useState(false)
|
||||
|
||||
const baseLayer = useSettingsStore(s => s.settings.map_base_layer) || 'default'
|
||||
const updateSetting = useSettingsStore(s => s.updateSetting)
|
||||
const isSatellite = baseLayer === 'satellite'
|
||||
@@ -1027,7 +1016,7 @@ export const MapView = memo(function MapView({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`w-full h-full relative${isMobile && attribOpen ? ' m-attrib-open' : ''}`}>
|
||||
<div className="w-full h-full relative">
|
||||
<MapContainer
|
||||
// The datum is in the element's identity, because react-leaflet builds the
|
||||
// map once and Leaflet cannot change a CRS afterwards. Settings can arrive
|
||||
@@ -1246,15 +1235,6 @@ export const MapView = memo(function MapView({
|
||||
onClick={cycleTrackingMode}
|
||||
bottomOffset={locationButtonBottom as unknown as number}
|
||||
/>}
|
||||
{/* The credit as the little (i), which is what both GL engines do on a narrow map
|
||||
and Leaflet has no mode for. */}
|
||||
{isMobile && (
|
||||
<MapAttributionToggle
|
||||
open={attribOpen}
|
||||
onToggle={() => setAttribOpen(v => !v)}
|
||||
bottomOffset={locationButtonBottom}
|
||||
/>
|
||||
)}
|
||||
{/* 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. */}
|
||||
|
||||
Reference in New Issue
Block a user