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

fix(maps): the phone map carries no credit and no night pause labels

Browse Source 
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:
Maurice
2026-09-17 12:43:45 +02:00
parent 222313d198
commit 782bb365b5
7 changed files with 97 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Map/MapView.test.tsx
+6 -16
View File
@@ -989,29 +989,19 @@ describe('MapView live location', () => {
expect(geoMock.cycleMode).toHaveBeenCalled()
})
it('FE-COMP-MAPVIEW-077: the credit (i) is a phone control, and it opens the credit through a class on the wrapper', () => {
it('FE-COMP-MAPVIEW-077: the map draws no credit control of its own, on either width', () => {
const desktop = render(<MapView />)
// The desktop credit is Leaflet's own, in its own container; this component adds none.
expect(screen.queryByRole('button', { name: 'Map credits' })).toBeNull()
desktop.unmount()
Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: 420 })
const { container } = render(<MapView />)
const toggle = screen.getByRole('button', { name: 'Map credits' })
// The phone used to get an (i) here that opened the credit through a class on the
// wrapper. The phone map now carries no visible credit at all (mobile.css), so neither
// the button nor the class it toggled is left behind.
expect(screen.queryByRole('button', { name: 'Map credits' })).toBeNull()
const wrapper = container.querySelector('div.w-full.h-full.relative') as HTMLElement
// Starts closed: on a phone the map is the screen, and the credit is one tap away.
expect(toggle.getAttribute('aria-expanded')).toBe('false')
expect(wrapper.classList.contains('m-attrib-open')).toBe(false)
// The locate button's band is only the fallback; a credit corner around the map wins.
expect(toggle.style.bottom).toBe('var(--m-credit-bottom, calc(var(--bottom-nav-h, 84px) + 12px))')
// A class on the wrapper rather than markup in Leaflet's own container, which Leaflet
// rewrites whenever a layer with an attribution comes or goes.
fireEvent.click(toggle)
expect(toggle.getAttribute('aria-expanded')).toBe('true')
expect(wrapper.classList.contains('m-attrib-open')).toBe(true)
fireEvent.click(toggle)
expect(toggle.getAttribute('aria-expanded')).toBe('false')
expect(wrapper.classList.contains('m-attrib-open')).toBe(false)
})
})