From d6bbb9bcb48ae636c30cead4b9055c63ec441d03 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Tue, 18 Jul 2023 15:35:40 +0200
Subject: [PATCH] Fixed css of routes page

---
 frontend/src/lib/components/Tabs.svelte        |  5 +++++
 frontend/src/lib/components/tabs/MapTab.svelte |  4 ++--
 frontend/src/routes/routes/[slug]/+page.svelte | 18 +++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
index 1a1eb0c..453206f 100644
--- a/frontend/src/lib/components/Tabs.svelte
+++ b/frontend/src/lib/components/Tabs.svelte
@@ -2,6 +2,8 @@
 	import InfoTab from './tabs/InfoTab.svelte';
 	import DescTab from './tabs/DescTab.svelte';
 	import MapTab from './tabs/MapTab.svelte';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 
 	let component = InfoTab;
 	const activeClicked = (evt) => {
@@ -24,6 +26,8 @@
 				component = MapTab;
 				break;
 		}
+
+		dispatch('map-click', {component});
 	};
 </script>
 
@@ -64,6 +68,7 @@
 
 	.tab {
 		padding: 10px;
+		height: 100%;
 		background-color: white;
 	}
 
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index 5064397..13d018a 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -43,7 +43,7 @@
 <style>
 	@import 'leaflet/dist/leaflet.css';
 	#map {
-		height: 60vh;
-		z-index: 1;
+		height: calc(45vh + 60px);
+		z-index: 0;
 	}
 </style>
diff --git a/frontend/src/routes/routes/[slug]/+page.svelte b/frontend/src/routes/routes/[slug]/+page.svelte
index 930356c..d89b9ca 100644
--- a/frontend/src/routes/routes/[slug]/+page.svelte
+++ b/frontend/src/routes/routes/[slug]/+page.svelte
@@ -1,19 +1,29 @@
 <script lang="ts">
 	import Header from '$lib/components/Header.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
+	import MapTab from '$lib/components/tabs/MapTab.svelte';
+
 	export let data;
+	let divider;
+
+	const mapClick = (evt) => {
+		if(evt.detail.component === MapTab)
+			divider.style.transform = "translateY(calc(0vh + 70px))";
+		else
+			divider.style.transform = "translateY(20vh)";
+	}
 </script>
 
 
 <Header></Header>
 <img src='/splash.jpeg' alt='splash'>
 
-<div id='divider'>
+<div bind:this={divider} id='divider'>
 	<div id='banner'>
 		<p>Percorso <b>{data.name}</b></p>
 		<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
 	</div>
-	<Tabs></Tabs>
+	<Tabs on:map-click={mapClick}></Tabs>
 </div>
 
 
@@ -21,7 +31,9 @@
 	#divider {
 		background: white;
 		margin-top: 0px;
-		margin-top: 20vh;
+		margin-top: 0;
+		transform: translateY(20vh);
+		transition: transform 400ms;
 	}
 
 	img {