From 1237e9ab0d18c95359e7de71bd78069ea2e13e55 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 24 Apr 2024 11:24:26 +0200
Subject: [PATCH] elevation profile toggles below

---
 .../lib/components/ElevationProfile.svelte    | 36 ++++++++++---------
 website/src/lib/components/GPXData.svelte     |  4 +--
 website/src/routes/+page.svelte               |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index 8db73bff..cdf1727c 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -42,7 +42,8 @@
 				title: {
 					display: true,
 					text: 'Distance (km)',
-					padding: 0
+					padding: 0,
+					align: 'end'
 				}
 			},
 			y: {
@@ -165,7 +166,10 @@
 			title: {
 				display: true,
 				text: dataset.label + ' (' + dataset.units + ')',
-				padding: 0
+				padding: {
+					top: 6,
+					bottom: 0
+				}
 			},
 			grid: {
 				display: false
@@ -370,53 +374,53 @@
 	});
 </script>
 
-<div class="h-full grow min-w-0 flex flex-row items-center">
-	<div class="h-full grow min-w-0 py-4">
-		<canvas bind:this={canvas}> </canvas>
+<div class="h-full grow min-w-0 flex flex-col items-center py-2 pr-4">
+	<div class="w-full grow min-h-0">
+		<canvas bind:this={canvas} class="w-full h-full"> </canvas>
 	</div>
-	<div class="h-fit flex flex-col m-2 border rounded">
-		<ToggleGroup.Root class="flex-col gap-0" type="single" bind:value={elevationFill}>
+	<div class="w-fit flex flex-row border rounded -mt-3.5">
+		<ToggleGroup.Root class="gap-0" type="single" bind:value={elevationFill}>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="slope">
-				<Tooltip side="left">
+				<Tooltip>
 					<TriangleRight slot="data" size="16" />
 					<span slot="tooltip">Show slope</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="surface">
-				<Tooltip side="left">
+				<Tooltip>
 					<BrickWall slot="data" size="16" />
 					<span slot="tooltip">Show surface</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 		</ToggleGroup.Root>
-		<Separator />
-		<ToggleGroup.Root class="flex-col gap-0" type="multiple" bind:value={additionalDatasets}>
+		<Separator orientation="vertical" />
+		<ToggleGroup.Root class="gap-0" type="multiple" bind:value={additionalDatasets}>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="speed">
-				<Tooltip side="left">
+				<Tooltip>
 					<Zap slot="data" size="16" />
 					<span slot="tooltip">Show speed</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="hr">
-				<Tooltip side="left">
+				<Tooltip>
 					<HeartPulse slot="data" size="16" />
 					<span slot="tooltip">Show heart rate</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="cad">
-				<Tooltip side="left">
+				<Tooltip>
 					<Orbit slot="data" size="16" />
 					<span slot="tooltip">Show cadence</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="atemp">
-				<Tooltip side="left">
+				<Tooltip>
 					<Thermometer slot="data" size="16" />
 					<span slot="tooltip">Show temperature</span>
 				</Tooltip>
 			</ToggleGroup.Item>
 			<ToggleGroup.Item class="p-0 w-8 h-8" value="power">
-				<Tooltip side="left">
+				<Tooltip>
 					<SquareActivity slot="data" size="16" />
 					<span slot="tooltip">Show power</span>
 				</Tooltip>
diff --git a/website/src/lib/components/GPXData.svelte b/website/src/lib/components/GPXData.svelte
index 8c17fae2..ab91f3c6 100644
--- a/website/src/lib/components/GPXData.svelte
+++ b/website/src/lib/components/GPXData.svelte
@@ -30,8 +30,8 @@
 	}
 </script>
 
-<Card.Root class="h-full overflow-hidden border-none min-w-60">
-	<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center">
+<Card.Root class="h-full overflow-hidden border-none min-w-48 pl-4">
+	<Card.Content class="h-full flex flex-col flex-wrap gap-4 justify-center p-0">
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Ruler size="18" class="mr-1" />
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 406463e9..d9a13c23 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -17,7 +17,7 @@
 		<LayerControl />
 		<Data />
 	</div>
-	<div class="h-60 flex flex-row overflow-hidden border">
+	<div class="h-60 flex flex-row gap-2 overflow-hidden border">
 		<FileList />
 		<GPXData />
 		<ElevationProfile />