From 8f17da9da23d928c6ab77421d8060fdea4a0c9be Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Tue, 12 Dec 2023 19:29:22 +0100
Subject: [PATCH] Add re size when clicking on map

---
 frontend/src/lib/components/Tabs.svelte        |  2 ++
 frontend/src/lib/components/tabs/MapTab.svelte |  5 ++++-
 frontend/src/routes/routes/[slug]/+page.svelte | 14 +++++++++-----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index d58e5d7..adcb8bd 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -49,6 +49,7 @@
 <style>
 	#container {
 		background-color: white;
+		height: 80%;
 	}
 	#tabs {
 		display: flex;
@@ -76,6 +77,7 @@
 		padding: 10px;
 		background-color: white;
 		overflow-y: scroll;
+		height: 100%;
 	}
 
 	.active {
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index 28cbfbd..9027484 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -72,7 +72,10 @@
 	onMount(async () => {
 		await watchPosition();
 		leaflet = await import('leaflet');
-		renderMap()
+
+		setTimeout(() => {
+			renderMap()
+		}, 500);
 	});
 
 	onDestroy(async () => {
diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
index cb8aa19..83b8b79 100644
--- a/frontend/src/routes/routes/[slug]/+page.svelte
+++ b/frontend/src/routes/routes/[slug]/+page.svelte
@@ -7,17 +7,17 @@
 
 	let divider;
 
+	let isMap = false;
+
     const tabClick = (event) => {
-		if (event.detail.component === MapTab) {
-			
-		}
+		isMap = event.detail.component === MapTab;
 	};
 </script>
 
 <Header></Header>
 <img src="/images/splash-background.webp" alt="splash" />
 
-<div bind:this={divider} id="divider">
+<div bind:this={divider} id="divider" class:move-to-top={isMap}>
 	<div id="banner">
 		<p class='path-name'>Percorso <b>{data.name_it}</b></p>
 		<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
@@ -30,10 +30,14 @@
 		background: white;
 		margin-top: 0px;
 		margin-top: 0;
-		transition: transform 400ms;
 		align-self: end;
 	}
 
+	.move-to-top {
+		align-self: start !important;
+		height: 100%;
+	}
+
 	img {
 		width: 100%;
 		height: calc(100% - 10vh - 10px);