Updates on app usage and routes

frontend/src/app.html

@@ -33,7 +33,6 @@
 		background-color: #fff;
 		font-family: 'Roboto-Regular';
 		display: grid;
-		place-items: center;
 		grid-template-rows: var(--footer-height) auto var(--footer-height);
 	}
 

frontend/src/lib/components/BottomAppBar.svelte

@@ -2,7 +2,7 @@
 	<a href="/">
 		<img src="/images/home-icon.png" alt="home" />
 	</a>
-	<a href="/paths">
+	<a href="/">
 		<img src="/images/routes-icon.png" alt="possible routes" />
 	</a>
 	<a href="/settings">

frontend/src/lib/components/Header.svelte

@@ -1,8 +1,18 @@
 <script lang='ts'>
+    import { goto, afterNavigate } from '$app/navigation';
     export let title: string = 'Naturalistici';
+
+    const goBack = () => {
+        history.back();
+    };
 </script>
 <div>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a on:click={goBack}>
         <img class='back' src='/images/white-back-arrow.png' alt=''>
+    </a>
     <p>Percorsi {title}</p>
     <img src='/images/app-bar-logo.png' alt=''>
 </div>
@@ -17,7 +27,14 @@
         align-items: center;
         background-color: #de0e1b;
     }
-    div img {
+    div a {
+        cursor: pointer;
+    }
+    div a img {
+        height: 40px;
+    }
+
+    img {
         height: 40px;
     }
     .back {

frontend/src/lib/components/Path.svelte

@@ -19,6 +19,7 @@
 
 <style>
 	.route-card {
+		text-decoration: none;
 		display: block;
 		flex: 1;
 		--route-card-radius: 45px;

frontend/src/lib/components/Route.svelte

@@ -4,28 +4,60 @@
 
 <a href="/routes/{route.id}">
 	<div id="image" style="background-image: url(/images/test-1.jpg" />
+	<div id='path-holder'>
+		<div style='font-size: 15px;'>Percorso</div>
 		<p>{route.name}</p>
-	<p>{route.duration}</p>
+	</div>
+	<div id='duration-holder'>
+		<div style='font-size: 15px;'>Durata</div>
+		<p id="duration">{Math.floor(Number(route.duration) / 60)}'</p>
+	</div>
 </a>
 
 <style>
 	a {
+		text-decoration: none;
+		color: black;
 		display: block;
 		box-shadow: 0 0 50px #ccc;
 		border-radius: 30px;
-		max-width: 150px;
+		max-width: 250px;
+		width: 150px;
+		font-size: 18px;
 	}
 
 	#image {
 		width: 100%;
 		height: 150px;
+		object-position: center;
+		background-position: center;
 		object-fit: cover;
 		border-radius: 30px;
+		border-bottom-right-radius: 0px;
+		border-bottom-left-radius: 0px;
 	}
-	a p {
-		text-decoration: inherit;
-		color: inherit;
-		cursor: auto;
-		padding: 5px;
+
+	#duration {
+		font-weight: bold;
+		margin: 0;
+		padding-left: 5px;
+	}
+
+	#duration-holder {
+		display: flex;
+		justify-content: start;
+		align-items: center;
+		padding: 10px;
+	}
+	#path-holder {
+		padding: 10px;
+		padding-bottom: 0px;
+	}
+
+	#path-holder p {
+		margin: 0px;
+		margin-top: 4px;
+		padding-top: 4px;
+		padding-bottom: 4px;
 	}
 </style>

frontend/src/lib/components/Splash.svelte

@@ -19,6 +19,7 @@
 	img {
 		position: absolute;
 		z-index: 99;
+		width: 100%;
 		height: 100%;
 		margin: 0 auto;
 	}

frontend/src/routes/paths/[slug]/+page.server.ts

@@ -6,10 +6,10 @@ export async function load({ params }) {
     return {
         title: params.slug,
         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: 4, name: 'Percorso Pianello 4', image: '/images/test-1.jpg', duration: 123123123}
+            {id: 1, name: 'Pianello 1', image: '/images/test-1.jpg', duration: 1233},
+            {id: 2, name: 'Pianello 2', image: '/images/test-1.jpg', duration: 1233},
+            {id: 3, name: 'Pianello 3', image: '/images/test-1.jpg', duration: 2134},
+            {id: 4, name: 'Pianello 4', image: '/images/test-1.jpg', duration: 2134 * 4}
         ]
     }
 }

frontend/src/routes/paths/[slug]/+page.svelte

@@ -18,6 +18,6 @@
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
-		gap: 30px;
+		gap: 15px;
 	}
 </style>