Updates on app usage and routes
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-10 23:17:10 +02:00
parent 872109b0fd
commit bc7d15dc4f
8 changed files with 67 additions and 17 deletions

View file

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

View file

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

View file

@ -1,8 +1,18 @@
<script lang='ts'> <script lang='ts'>
import { goto, afterNavigate } from '$app/navigation';
export let title: string = 'Naturalistici'; export let title: string = 'Naturalistici';
const goBack = () => {
history.back();
};
</script> </script>
<div> <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=''> <img class='back' src='/images/white-back-arrow.png' alt=''>
</a>
<p>Percorsi {title}</p> <p>Percorsi {title}</p>
<img src='/images/app-bar-logo.png' alt=''> <img src='/images/app-bar-logo.png' alt=''>
</div> </div>
@ -17,7 +27,14 @@
align-items: center; align-items: center;
background-color: #de0e1b; background-color: #de0e1b;
} }
div img { div a {
cursor: pointer;
}
div a img {
height: 40px;
}
img {
height: 40px; height: 40px;
} }
.back { .back {

View file

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

View file

@ -4,28 +4,60 @@
<a href="/routes/{route.id}"> <a href="/routes/{route.id}">
<div id="image" style="background-image: url(/images/test-1.jpg" /> <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.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> </a>
<style> <style>
a { a {
text-decoration: none;
color: black;
display: block; display: block;
box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
border-radius: 30px; border-radius: 30px;
max-width: 150px; max-width: 250px;
width: 150px;
font-size: 18px;
} }
#image { #image {
width: 100%; width: 100%;
height: 150px; height: 150px;
object-position: center;
background-position: center;
object-fit: cover; object-fit: cover;
border-radius: 30px; border-radius: 30px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
} }
a p {
text-decoration: inherit; #duration {
color: inherit; font-weight: bold;
cursor: auto; margin: 0;
padding: 5px; 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> </style>

View file

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

View file

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

View file

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