mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 13:21:46 +00:00
Maurice
0f44d7d264
Merge the separate Timeline and Map tabs into a single fullscreen combined view on mobile (<1024px). A Leaflet map fills the background while a horizontal snap-scroll carousel of entry cards sits at the bottom. Scrolling the carousel auto-focuses the corresponding map marker; tapping a marker scrolls to the card. Tapping a card opens a new fullscreen entry view with edit/delete actions. - New: MobileMapTimeline, MobileEntryCard, MobileEntryView components - New: useIsMobile hook (matchMedia < 1024px) - JourneyMap: fullScreen + paddingBottom props, focusMarker guard - Desktop layout completely unchanged - Public share page gets the same combined view (read-only) - Fix: entry editor now portaled to body (iOS stacking context) - Fix: pros/cons dark mode input backgrounds - Fix: mood button borders in dark mode - Fix: location icon color (neutral instead of green/indigo)
19 lines
586 B
TypeScript
19 lines
586 B
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
/** Returns true when the viewport is below the lg breakpoint (1024px). */
|
|
export function useIsMobile(): boolean {
|
|
const [isMobile, setIsMobile] = useState(
|
|
() => typeof window !== 'undefined' && window.innerWidth < 1024,
|
|
)
|
|
|
|
useEffect(() => {
|
|
const mq = window.matchMedia('(max-width: 1023px)')
|
|
const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
|
|
setIsMobile(mq.matches)
|
|
mq.addEventListener('change', handler)
|
|
return () => mq.removeEventListener('change', handler)
|
|
}, [])
|
|
|
|
return isMobile
|
|
}
|