From 872109b0fd0c64cb4bf2bae302ed3ec88a584aec Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Mon, 10 Jul 2023 20:01:15 +0200
Subject: [PATCH] Update view

---
 frontend/src/app.html                         |  4 ----
 .../src/lib/components/BottomAppBar.svelte    |  3 +++
 frontend/src/lib/components/Route.svelte      | 21 ++++++++++++-------
 frontend/src/lib/components/Splash.svelte     |  3 ++-
 frontend/src/routes/+page.svelte              | 12 ++++++++---
 .../src/routes/paths/[slug]/+page.server.ts   |  3 ++-
 frontend/src/routes/paths/[slug]/+page.svelte |  3 +++
 7 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app.html b/frontend/src/app.html
index 476e8e8..abafcbc 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -46,10 +46,6 @@
 		place-items: center;
 	}
 
-	.bold {
-		font-weight: bold;
-	}
-
 	@font-face {
 		font-family: 'Roboto-Regular';
 		src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
diff --git a/frontend/src/lib/components/BottomAppBar.svelte b/frontend/src/lib/components/BottomAppBar.svelte
index 399a7fc..20e5db8 100644
--- a/frontend/src/lib/components/BottomAppBar.svelte
+++ b/frontend/src/lib/components/BottomAppBar.svelte
@@ -18,6 +18,9 @@
 		border-radius: 90px;
 		box-shadow: 0 0 50px #ccc;
 		background-color: var(--card-background-color);
+		position: absolute;
+		bottom: 0;
+		margin-bottom: 10px;
 	}
 
 	#container > a {
diff --git a/frontend/src/lib/components/Route.svelte b/frontend/src/lib/components/Route.svelte
index 1008c65..629d022 100644
--- a/frontend/src/lib/components/Route.svelte
+++ b/frontend/src/lib/components/Route.svelte
@@ -2,10 +2,10 @@
 	export let route: App.Route;
 </script>
 
-<a href="/routes/{route.id}"
-	><img src="/images/test-1.jpg" alt="route" />
+<a href="/routes/{route.id}">
+	<div id="image" style="background-image: url(/images/test-1.jpg" />
 	<p>{route.name}</p>
-	{route.duration}
+	<p>{route.duration}</p>
 </a>
 
 <style>
@@ -13,12 +13,19 @@
 		display: block;
 		box-shadow: 0 0 50px #ccc;
 		border-radius: 30px;
-		padding: 10px;
-		height: 200px;
-        max-width: 150px;
+		max-width: 150px;
 	}
-	a img {
+
+	#image {
 		width: 100%;
+		height: 150px;
 		object-fit: cover;
+		border-radius: 30px;
+	}
+	a p {
+		text-decoration: inherit;
+		color: inherit;
+		cursor: auto;
+		padding: 5px;
 	}
 </style>
diff --git a/frontend/src/lib/components/Splash.svelte b/frontend/src/lib/components/Splash.svelte
index 04b47fd..6893e79 100644
--- a/frontend/src/lib/components/Splash.svelte
+++ b/frontend/src/lib/components/Splash.svelte
@@ -18,7 +18,8 @@
 <style>
 	img {
 		position: absolute;
-		height: 100vh;
+		z-index: 99;
+		height: 100%;
 		margin: 0 auto;
 	}
 </style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3c4b36c..bb1107c 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 	import Splash from '$lib/components/Splash.svelte';
 </script>
 
-<Splash></Splash>
+<Splash />
 <header>
 	<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
 </header>
@@ -17,9 +17,15 @@
 	</div>
 </main>
 
-
-
 <style>
+	main {
+		width: 100%;
+		margin: 0px;
+		font-family: 'Roboto-Regular';
+		display: grid;
+		place-items: center;
+	}
+
 	.bold {
 		font-weight: bold;
 	}
diff --git a/frontend/src/routes/paths/[slug]/+page.server.ts b/frontend/src/routes/paths/[slug]/+page.server.ts
index e98f730..c9fc0a0 100644
--- a/frontend/src/routes/paths/[slug]/+page.server.ts
+++ b/frontend/src/routes/paths/[slug]/+page.server.ts
@@ -8,7 +8,8 @@ export async function load({ params }) {
         routes: [
             {id: 1, name: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123},
             {id: 2, name: 'Percorso Pianello 2', image: '/images/test-1.jpg', duration: 123123123},
-            {id: 3, name: 'Percorso Pianello 3', image: '/images/test-1.jpg', duration: 123123123}
+            {id: 3, name: 'Percorso Pianello 3', image: '/images/test-1.jpg', duration: 123123123},
+            {id: 4, name: 'Percorso Pianello 4', image: '/images/test-1.jpg', duration: 123123123}
         ]
     }
 }
diff --git a/frontend/src/routes/paths/[slug]/+page.svelte b/frontend/src/routes/paths/[slug]/+page.svelte
index 0e5d095..de03f75 100644
--- a/frontend/src/routes/paths/[slug]/+page.svelte
+++ b/frontend/src/routes/paths/[slug]/+page.svelte
@@ -14,7 +14,10 @@
 
 <style>
 	div {
+		margin-top: 10px;
 		display: flex;
 		flex-wrap: wrap;
+		justify-content: center;
+		gap: 30px;
 	}
 </style>
\ No newline at end of file