toggle elevation profile

website/src/lib/components/App.svelte

@@ -11,7 +11,7 @@
 
 	import { settings } from '$lib/db';
 
-	const { verticalFileView } = settings;
+	const { verticalFileView, elevationProfile } = settings;
 </script>
 
 <div class="flex flex-row w-screen h-screen">
@@ -29,9 +29,11 @@
 				</div>
 			{/if}
 		</div>
-		<div class="h-48 flex flex-row gap-2 overflow-hidden">
+		<div class="{$elevationProfile ? 'h-48' : 'h-10'} flex flex-row gap-2 overflow-hidden">
 			<GPXStatistics />
-			<ElevationProfile />
+			{#if $elevationProfile}
+				<ElevationProfile />
+			{/if}
 		</div>
 	</div>
 	{#if $verticalFileView}

website/src/lib/components/GPXStatistics.svelte

@@ -10,11 +10,19 @@
 
 	import { _ } from 'svelte-i18n';
 
-	const { velocityUnits } = settings;
+	const { velocityUnits, elevationProfile } = settings;
 </script>
 
-<Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4">
+<Card.Root
-	<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center p-0">
+	class="h-full {$elevationProfile
+		? ''
+		: 'w-full pr-4'} overflow-hidden border-none shadow-none min-w-48 pl-4"
+>
+	<Card.Content
+		class="h-full flex {$elevationProfile
+			? 'flex-col justify-center'
+			: 'flex-row w-full justify-between'} flex-wrap gap-4  p-0"
+	>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Ruler size="18" class="mr-1" />

website/src/lib/components/Map.svelte

@@ -21,7 +21,7 @@
 		easing: () => 1
 	};
 
-	const { distanceUnits, verticalFileView } = settings;
+	const { distanceUnits, elevationProfile, verticalFileView } = settings;
 	let scaleControl = new mapboxgl.ScaleControl({
 		unit: $distanceUnits
 	});
@@ -117,7 +117,7 @@
 		scaleControl.setUnit($distanceUnits);
 	}
 
-	$: if ($map && !$verticalFileView) {
+	$: if ($map && (!$verticalFileView || !$elevationProfile)) {
 		$map.resize();
 	}
 </script>

website/src/lib/components/Menu.svelte

@@ -24,7 +24,8 @@
 		Sun,
 		Moon,
 		Rows3,
-		Layers3
+		Layers3,
+		MountainSnow
 	} from 'lucide-svelte';
 
 	import {
@@ -49,6 +50,7 @@
 		distanceUnits,
 		velocityUnits,
 		temperatureUnits,
+		elevationProfile,
 		verticalFileView,
 		mode,
 		currentBasemap,
@@ -175,6 +177,9 @@
 			<Menubar.Menu>
 				<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
 				<Menubar.Content class="border-none">
+					<Menubar.CheckboxItem bind:checked={$elevationProfile}>
+						<MountainSnow size="16" class="mr-1" />{$_('menu.elevation_profile')}
+					</Menubar.CheckboxItem>
 					<Menubar.CheckboxItem bind:checked={$verticalFileView}>
 						<Rows3 size="16" class="mr-1" />{$_('menu.vertical_file_view')}
 					</Menubar.CheckboxItem>

website/src/lib/db.ts

@@ -78,6 +78,7 @@ export const settings = {
     distanceUnits: dexieSettingStore<'metric' | 'imperial'>('distanceUnits', 'metric'),
     velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
     temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
+    elevationProfile: dexieSettingStore('elevationProfile', true),
     verticalFileView: dexieSettingStore<boolean>('fileView', false),
     mode: dexieSettingStore('mode', (() => {
         let currentMode: string | undefined = get(mode);

website/src/locales/en.json

@@ -15,6 +15,7 @@
         "delete_all": "Delete all",
         "select_all": "Select all",
         "view": "View",
+        "elevation_profile": "Elevation profile",
         "vertical_file_view": "Vertical file list",
         "switch_basemap": "Switch to previous basemap",
         "toggle_overlays": "Toggle overlays",