fix(map): improve controls on mobile

hello-nrfcloud · Dec 11, 2024 · ff64d26 · ff64d26
1 parent 02f1a79
commit ff64d26
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 72 deletions.
diff --git a/src/map/HistoryControls.css b/src/map/HistoryControls.css
@@ -0,0 +1,9 @@
+.history-controls {
+  display: none;
+}
+
+@media screen and (min-width: 500px) {
+  .history-controls {
+    display: block;
+  }
+}
diff --git a/src/map/HistoryControls.tsx b/src/map/HistoryControls.tsx
@@ -5,6 +5,8 @@ import { formatInt } from '#utils/format.js'
 import { HistoryIcon } from 'lucide-preact'
 import { useState } from 'preact/hooks'
 
+import './HistoryControls.css'
+
 const byTimeSpan = (timeSpan: TimeSpan | undefined) => (t: TimeSpanInfo) =>
 	t.id === timeSpan
 
@@ -15,71 +17,75 @@ export const HistoryControls = () => {
 
 	if (!expanded) {
 		return (
-			<div
-				class="mt-2 d-flex justify-content-start align-items-center controls"
-				style={{ color: 'var(--color-nordic-dark-grey)' }}
-			>
-				<HistoryIcon class="ms-2" />
-				<button
-					type="button"
-					class="control"
-					onClick={() => {
-						setExpanded(true)
-					}}
+			<div class="history-controls">
+				<div
+					class="mt-2 d-flex justify-content-start align-items-center controls"
+					style={{ color: 'var(--color-nordic-dark-grey)' }}
 				>
-					{trail.length >= 500 && (
-						<span>last {formatInt(trail.length)} locations</span>
-					)}
-					{trail.length < 500 && (
-						<span>
-							History: {timeSpans.find(byTimeSpan(timeSpan))?.title ?? 'off'}
-						</span>
-					)}
-				</button>
+					<HistoryIcon class="ms-2" />
+					<button
+						type="button"
+						class="control"
+						onClick={() => {
+							setExpanded(true)
+						}}
+					>
+						{trail.length >= 500 && (
+							<span>last {formatInt(trail.length)} locations</span>
+						)}
+						{trail.length < 500 && (
+							<span>
+								History: {timeSpans.find(byTimeSpan(timeSpan))?.title ?? 'off'}
+							</span>
+						)}
+					</button>
+				</div>
 			</div>
 		)
 	}
 
 	return (
-		<div
-			class="mt-2 d-flex justify-content-start align-items-center controls horizontal"
-			style={{ color: 'var(--color-nordic-dark-grey)' }}
-		>
-			<HistoryIcon class="ms-2" title={'History'} />
-			<button
-				type="button"
-				class="control"
-				onClick={() => {
-					setTimeSpan(undefined)
-					setExpanded(false)
-				}}
+		<div class="history-controls">
+			<div
+				class="history-controls mt-2 d-flex justify-content-start align-items-center controls horizontal"
+				style={{ color: 'var(--color-nordic-dark-grey)' }}
 			>
-				off
-			</button>
-			{timeSpans.map(({ id, title }) => (
+				<HistoryIcon class="ms-2" title={'History'} />
 				<button
 					type="button"
-					class="control ms-1"
+					class="control"
 					onClick={() => {
-						setTimeSpan(id)
+						setTimeSpan(undefined)
 						setExpanded(false)
 					}}
 				>
-					{title}
+					off
 				</button>
-			))}
-			<div class="button control">
-				<label htmlFor="clusterLocations" class="d-flex align-items-center">
-					<input
-						type="checkbox"
-						id="clusterLocations"
-						checked={clustering}
-						onChange={(ev) => {
-							enableClustering((ev.target as HTMLInputElement).checked)
+				{timeSpans.map(({ id, title }) => (
+					<button
+						type="button"
+						class="control ms-1"
+						onClick={() => {
+							setTimeSpan(id)
+							setExpanded(false)
 						}}
-					/>{' '}
-					<span class="ms-2">cluster nearby locations </span>
-				</label>
+					>
+						{title}
+					</button>
+				))}
+				<div class="button control">
+					<label htmlFor="clusterLocations" class="d-flex align-items-center">
+						<input
+							type="checkbox"
+							id="clusterLocations"
+							checked={clustering}
+							onChange={(ev) => {
+								enableClustering((ev.target as HTMLInputElement).checked)
+							}}
+						/>{' '}
+						<span class="ms-2">cluster nearby locations </span>
+					</label>
+				</div>
 			</div>
 		</div>
 	)

diff --git a/src/map/LocationSourceSelector.css b/src/map/LocationSourceSelector.css
@@ -2,3 +2,13 @@
   background-color: #959595;
   color: #3d3a3a;
 }
+
+.location-source-selector.controls .label {
+  display: none;
+}
+
+@media screen and (min-width: 500px) {
+  .location-source-selector.controls .label {
+    display: inline;
+  }
+}
diff --git a/src/map/LocationSourceSelector.tsx b/src/map/LocationSourceSelector.tsx
@@ -5,13 +5,7 @@ import {
 	LocationSourceLabels,
 } from '#map/LocationSourceLabels.js'
 import cx from 'classnames'
-import {
-	BlendIcon,
-	EyeOffIcon,
-	HexagonIcon,
-	SatelliteIcon,
-	WifiIcon,
-} from 'lucide-preact'
+import { BlendIcon, HexagonIcon, SatelliteIcon, WifiIcon } from 'lucide-preact'
 
 import './LocationSourceSelector.css'
 
@@ -45,15 +39,10 @@ export const LocationSourceSelector = () => {
 							disabled: !enabled,
 						})}
 					>
-						{enabled && (
-							<span>
-								{src === LocationSource.SCELL && <HexagonIcon />}
-								{src === LocationSource.MCELL && <BlendIcon />}
-								{src === LocationSource.WIFI && <WifiIcon />}
-								{src === LocationSource.GNSS && <SatelliteIcon />}
-							</span>
-						)}
-						{!enabled && <EyeOffIcon />}
+						{src === LocationSource.SCELL && <HexagonIcon />}
+						{src === LocationSource.MCELL && <BlendIcon />}
+						{src === LocationSource.WIFI && <WifiIcon />}
+						{src === LocationSource.GNSS && <SatelliteIcon />}
 						{LocationSourceLabels.has(src) && (
 							<span class="ms-2 label">{LocationSourceLabels.get(src)}</span>
 						)}

diff --git a/src/map/LockInfo.tsx b/src/map/LockInfo.tsx
@@ -1,5 +1,5 @@
 import { useMapState } from '#context/MapState.js'
-import { LockIcon } from 'lucide-preact'
+import { UnlockIcon } from 'lucide-preact'
 
 export const LockInfo = () => {
 	const mapState = useMapState()
@@ -14,7 +14,7 @@ export const LockInfo = () => {
 						mapState.unlock()
 					}}
 				>
-					<LockIcon />
+					<UnlockIcon />
 				</button>{' '}
 				to enable the map.
 			</span>

diff --git a/src/map/Map.css b/src/map/Map.css
@@ -1,7 +1,13 @@
 #map {
   width: 100%;
-  min-height: 50vh;
   overflow: clip;
+  aspect-ratio: 3/4;
+}
+
+@media screen and (min-width: 500px) {
+  #map {
+    min-height: 50vh;
+  }
 }
 
 section.map {

diff --git a/src/map/MapZoomControls.tsx b/src/map/MapZoomControls.tsx
@@ -87,7 +87,7 @@ export const MapZoomControls = ({
 						setStyle(MapStyle.LIGHT)
 					}}
 				>
-					<MoonIcon />
+					<SunIcon />
 				</button>
 			) : (
 				<button
@@ -98,7 +98,7 @@ export const MapZoomControls = ({
 						setStyle(MapStyle.DARK)
 					}}
 				>
-					<SunIcon />
+					<MoonIcon />
 				</button>
 			)}
 			{(canBeLocked ?? true) && (
@@ -110,7 +110,7 @@ export const MapZoomControls = ({
 						toggleLock()
 					}}
 				>
-					{locked ? <LockIcon /> : <UnlockIcon />}
+					{locked ? <UnlockIcon /> : <LockIcon />}
 				</button>
 			)}
 		</>