pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages Wiki Activity

Update home page view

Browse source
This commit is contained in:
Alessio Davoli 2023-12-22 15:19:32 +01:00
parent aff0c03ad2
commit f99c20f827
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/lib/components/Path.svelte
View file

@ -1,21 +1,37 @@
<script lang="ts">
import {PUBLIC_BACKEND_URL} from '$env/static/public'
export let name: string;
export let id: string;
export let id: number;
export let color: string;
export const path = `/paths/${id}`;
export let src: string;
console.log(id)
let image = '/archi.png'
switch (id) {
case 1:
image = '/archi.png';
break;
case 2:
image = '/montagne.png';
break;
case 3:
image = '/bibbito.png';
break;
}
</script>
<a href={path} class="route-card">
<div class="route-card-left" style="background-color: {color}">
<img {src} alt="logo" />
<img src={image} alt="logo" />
</div>
<div class="route-card-center">
<div class="name">
<div class="bold">{name}</div>
</div>
</div>
<div class="route-card-right" />
<div class="route-card-right" style:background-image='url({PUBLIC_BACKEND_URL}{src}' />
</a>
<style>
@ -34,7 +50,6 @@
.route-card-right {
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
background-image: url('/images/test-1.jpg');
background-position: center;
background-size: cover;
}
@ -48,6 +63,7 @@
.route-card-left img {
width: 100%;
max-width: 120px;
}
.route-card-center {

2
frontend/src/routes/+page.svelte
View file

@ -14,7 +14,7 @@
<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
<div id="route-cards">
{#each categories as category}
<Path src={category.cover} color={category.color} name="{category.name_it}" id={String(category.id)} />
<Path src={category.cover} color={category.color} name="{category.name_it}" id={category.id} />
{/each}
</div>
</main>