From 4f8e727bad984883572c944fac20344b7f406b69 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Sun, 10 Dec 2023 16:17:53 +0100
Subject: [PATCH] Update path styling

---
 frontend/src/lib/components/Path.svelte | 78 ++++++++-----------------
 frontend/src/routes/+page.svelte        |  1 +
 2 files changed, 25 insertions(+), 54 deletions(-)

diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 5eb0527..b701941 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -11,7 +11,6 @@
 	</div>
 	<div class="route-card-center">
 		<div class="name">
-			<div>Percorsi</div>
 			<div class="bold">{name}</div>
 		</div>
 	</div>
@@ -22,69 +21,40 @@
 	a {
 		text-decoration: inherit;
     	color: inherit;
-    	cursor: auto;
-	}
-	.bold {
-		font-weight: bold;
-	}
-	.route-card {
-		text-decoration: none;
-		display: block;
-		flex: 1;
-		--route-card-radius: 45px;
-		border-radius: var(--route-card-radius);
-		box-shadow: 0 0 27px #ccc;
-		margin: 0 auto;
-		margin-top: 10px;
-		margin-bottom: 10px;
-		width: 90%;
-		display: flex;
-		background-color: var(--card-background-color);
-		
-	}
-	.route-card-center {
-		font-size: 18px;
-	}
-
-	.route-card > * {
-		flex: 1;
-	}
-
-	.route-card-left {
-		flex: 0 1 20%;
-		border-top-left-radius: var(--route-card-radius);
-		border-bottom-left-radius: var(--route-card-radius);
+    	cursor: pointer;
 		display: grid;
-		place-items: center;
-		max-width: 30%;
+		grid-template-columns: 100px auto 100px;
+		max-width: 100%;
+		width: calc(100% - 20px);
+		margin: 0 auto;
 	}
-	.route-card-left img {
-		display: block;
-		max-width: 55%;
-		height: auto;
-	}
-
 	.route-card-right {
-		flex: 0 1 20%;
-		border-top-right-radius: var(--route-card-radius);
-		border-bottom-right-radius: var(--route-card-radius);
+		border-top-right-radius: 45px;
+		border-bottom-right-radius: 45px;
 		background-image: url('/images/test-1.jpg');
 		background-position: center;
 		background-size: cover;
-		max-width: 30%;
 	}
 
-	.route-card .name {
+	.route-card-left {
+		border-top-left-radius: 45px;
+		border-bottom-left-radius: 45px;
 		display: grid;
-		height: 100%;
-		align-content: center;
-		padding: 0;
-		margin-left: 10px;
-		margin-right:10px;
-		font-size: 27px;
+		place-content: center;
 	}
 
-	.route-card .name > * {
-		flex: 1;
+	.route-card-left img {
+		width: 100%;
+	}
+
+	.route-card-center {
+		display: grid;
+		place-content: center;
+		font-weight: bold;
+		font-size: 20px;
+		padding: 4px;
+		max-width: 100%;
+		text-overflow: ellipsis;
+		text-align: center;
 	}
 </style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index f28b725..396c332 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -48,5 +48,6 @@
 		grid-row-end: 7;
 		display: grid;
 		width: 100%;
+		gap: 5px;
 	}
 </style>