From ff64d2603aa338c577e1d2fa32ac524631949c66 Mon Sep 17 00:00:00 2001
From: Markus Tacker <Markus.Tacker@NordicSemi.no>
Date: Wed, 11 Dec 2024 10:22:49 +0100
Subject: [PATCH] fix(map): improve controls on mobile

---
 src/map/HistoryControls.css        |   9 +++
 src/map/HistoryControls.tsx        | 106 +++++++++++++++--------------
 src/map/LocationSourceSelector.css |  10 +++
 src/map/LocationSourceSelector.tsx |  21 ++----
 src/map/LockInfo.tsx               |   4 +-
 src/map/Map.css                    |   8 ++-
 src/map/MapZoomControls.tsx        |   6 +-
 7 files changed, 92 insertions(+), 72 deletions(-)
 create mode 100644 src/map/HistoryControls.css

diff --git a/src/map/HistoryControls.css b/src/map/HistoryControls.css
new file mode 100644
index 00000000..e6e501a5
--- /dev/null
+++ 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
index 47bf833d..fff920f8 100644
--- 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
index c9915a35..f4489f53 100644
--- 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
index d791217a..cc643ead 100644
--- 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
index 7557e408..21d63126 100644
--- 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
index e25de510..b630ed1d 100644
--- 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
index 3d96b8e8..f5b2d5b5 100644
--- 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>
 			)}
 		</>