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

Add Path component
Some checks failed
ci/woodpecker/push/build Pipeline failed
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-10 18:56:54 +02:00
parent daf761f21d
commit d321ec72f7
2 changed files with 77 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script> <script>
import BottomAppBar from './components/BottomAppBar.svelte'; import BottomAppBar from './components/BottomAppBar.svelte';
import Path from './components/Path.svelte';
</script> </script>
<header> <header>
@ -8,42 +9,9 @@
<main> <main>
<div id="route-cards"> <div id="route-cards">
<div class="route-card"> <Path color='#de0e1b' type="naturalistici" />
<div class="route-card-left"> <Path color='#f6ae04' type="storici" />
<img src="/images/app-bar-logo.png" alt="logo" /> <Path color='#213c8b' type="tradizionalisti" />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">naturalistici</div>
</div>
</div>
<div class="route-card-right" />
</div>
<div class="route-card">
<div class="route-card-left">
<img src="/images/app-bar-logo.png" alt='logo' />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">storici</div>
</div>
</div>
<div class="route-card-right" />
</div>
<div class="route-card">
<div class="route-card-left">
<img src="/images/app-bar-logo.png" alt='logo' />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">tradizionalistici</div>
</div>
</div>
<div class="route-card-right" />
</div>
</div> </div>
</main> </main>
@ -52,6 +20,9 @@
</footer> </footer>
<style> <style>
.bold {
font-weight: bold;
}
#welcome-message { #welcome-message {
font-size: 18px; font-size: 18px;
} }
@ -63,67 +34,4 @@
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
.route-card {
flex: 1;
--route-card-radius: 45px;
border-radius: var(--route-card-radius);
box-shadow: 0 0 27px #ccc;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
display: flex;
background-color: var(--card-background-color);
}
.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);
display: grid;
place-items: center;
}
.route-card-left img {
display: block;
width: 80%;
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);
background-image: url('/images/test-1.jpg');
background-position: center;
background-size: cover;
}
#route-cards .route-card:nth-child(1) .route-card-left {
background-color: var(--pianello-red);
}
#route-cards .route-card:nth-child(2) .route-card-left {
background-color: var(--pianello-yellow);
}
#route-cards .route-card:nth-child(3) .route-card-left {
background-color: var(--pianello-blue);
}
.route-card .name {
display: grid;
height: 100%;
align-content: center;
padding: 20px;
font-size: 20px;
}
.route-card .name > * {
flex: 1;
}
</style> </style>

70
frontend/src/routes/components/Path.svelte Normal file
View file

@ -0,0 +1,70 @@
<script lang="ts">
export let type: string;
export let color: string;
</script>
<div class="route-card">
<div class="route-card-left" style="background-color: {color}">
<img src="/images/app-bar-logo.png" alt="logo" />
</div>
<div class="route-card-center">
<div class="name">
<div>Percorsi</div>
<div class="bold">{type}</div>
</div>
</div>
<div class="route-card-right" />
</div>
<style>
.route-card {
flex: 1;
--route-card-radius: 45px;
border-radius: var(--route-card-radius);
box-shadow: 0 0 27px #ccc;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
display: flex;
background-color: var(--card-background-color);
}
.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);
display: grid;
place-items: center;
}
.route-card-left img {
display: block;
width: 80%;
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);
background-image: url('/images/test-1.jpg');
background-position: center;
background-size: cover;
}
.route-card .name {
display: grid;
height: 100%;
align-content: center;
padding: 20px;
font-size: 20px;
}
.route-card .name > * {
flex: 1;
}
</style>