mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
8f53d98d45
Every journey map (the desktop aside, the phone screens and the shared page) now carries four switches: Plan, Recorded, Entries and Photos, each with its count, a spinner while it loads, the warning tone when it could not be read and the reason when it has nothing to show. A switch only hides, in place: the map is not rebuilt and keeps its view, and the choice is kept in this browser per journey (per link on a shared page, by a hash of its token). The plan draws the places the linked trips put on their days as hollow dashed pins and the trips' GPX routes dashed; a place an entry was written about is not drawn twice, the entry's pin carries a check instead. The stays a day report was taken over from show as dots in the colour of their day. Marks on one spot join into a disc with their number and open as a list; a picked place or stay opens a card with its trip, days and times and leads to its entry. A key beside the switches explains every pin and line and says that a plan is no proof of a visit. The phone timelines now show the photos too. The GPX routes come with the map's layers through the linked trips, read only while the journey's track switch is on; the frozen /tracks answer stays Studio's. The share settings on desktop and phone get Trip plan and Recorded routes under Map, off by default and only switchable while the map is shared.
38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
import type { CSSProperties } from 'react'
|
|
|
|
/**
|
|
* The drop shadow every floating map control carries.
|
|
*
|
|
* Tighter and darker than `--sidebar-shadow`, which is built for a panel resting on
|
|
* the app background: over map tiles its 0.10 alpha spread over 32px all but
|
|
* disappears, so a round control read as painted onto the map rather than floating
|
|
* above it. This is the locate button's shadow, which was always the odd one out for
|
|
* exactly that reason — the others were the ones that needed to match it.
|
|
*/
|
|
export const MAP_CONTROL_SHADOW = '0 2px 10px rgba(0,0,0,0.25)'
|
|
|
|
/** The frosted glass of the map's floating cards (a ferrata's, a paddle obstacle's), so they read as its controls. */
|
|
export const MAP_CARD_GLASS = {
|
|
background: 'var(--sidebar-bg)',
|
|
backdropFilter: 'blur(20px) saturate(180%)',
|
|
WebkitBackdropFilter: 'blur(20px) saturate(180%)',
|
|
boxShadow: MAP_CONTROL_SHADOW,
|
|
}
|
|
|
|
/** The frosted round shell the map's control groups sit in. */
|
|
export const FROSTED_SHELL = {
|
|
display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto' as const,
|
|
background: 'var(--sidebar-bg)',
|
|
backdropFilter: 'blur(20px) saturate(180%)',
|
|
WebkitBackdropFilter: 'blur(20px) saturate(180%)',
|
|
boxShadow: MAP_CONTROL_SHADOW,
|
|
}
|
|
|
|
/** A pill segment of a map control group; `filled` lets its class paint the background. */
|
|
export const segmentStyle = (filled: boolean): CSSProperties => ({
|
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
|
|
minHeight: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
|
|
background: filled ? undefined : 'transparent', padding: '0 10px',
|
|
fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
|
|
})
|