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

You could recreate this grid
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-11 00:10:53 +02:00
parent bc7d15dc4f
commit 09139f9ad6
5 changed files with 242 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
frontend/src/lib/components/Header.svelte
View file

@ -1,43 +1,57 @@
<script lang='ts'> <script lang="ts">
import { goto, afterNavigate } from '$app/navigation'; export let title: string = 'Naturalistici';
export let title: string = 'Naturalistici'; export let transparent = false;
const goBack = () => { const goBack = () => {
history.back(); history.back();
}; };
</script> </script>
<div>
<!-- svelte-ignore a11y-no-static-element-interactions --> {#if transparent}
<!-- svelte-ignore a11y-click-events-have-key-events --> <div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<a on:click={goBack}> <!-- svelte-ignore a11y-click-events-have-key-events -->
<img class='back' src='/images/white-back-arrow.png' alt=''> <!-- svelte-ignore a11y-missing-attribute -->
</a> <a on:click={goBack}>
<p>Percorsi {title}</p> <img class="back" src="/images/black-back-arrow.png" alt="" />
<img src='/images/app-bar-logo.png' alt=''> </a>
</div>
<img src="/images/app-bar-logo.png" alt="" />
</div>
{:else}
<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>
{/if}
<style> <style>
div { div {
color: white; color: white;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: #de0e1b; background-color: #de0e1b;
} }
div a { div a {
cursor: pointer; cursor: pointer;
} }
div a img { div a img {
height: 40px; height: 40px;
} }
img { img {
height: 40px; height: 40px;
} }
.back { .back {
height: 20px; height: 20px;
} }
</style> </style>

76
frontend/src/lib/components/InfoTab.svelte Normal file
View file

@ -0,0 +1,76 @@
<script>
</script>
<div id="grid">
<div>
<p>Distanza</p>
<p>Value</p>
</div>
<div>
<p>Dislivello Positivo</p>
<p>Value</p>
</div>
<div>
<p>Velocità Media</p>
<p>Value</p>
</div>
<div>
<p>Difficolta</p>
<p>Value</p>
</div>
<div>
<p>Dislivello Negativo</p>
<p>Value</p>
</div>
<div>
<p>Durata</p>
<p>Value</p>
</div>
<div>
<p>Altitudine max</p>
<p>Value</p>
</div>
<div>
<p>Altitudine min</p>
<p>Value</p>
</div>
<div>
<p>Tipo Percorso</p>
<p>Value</p>
</div>
</div>
<style>
#grid {
display: grid;
grid-template-rows: repeat(3, 33%);
grid-template-columns: repeat(3, 1fr);
width: 100%;
background: white;
place-items: center;
font-size: 14px;
}
#grid div {
margin: 0 auto;
display: flex;
text-align: center;
flex-direction: column;
}
#grid div > p {
padding: 10px;
margin: 0px;
}
#grid div p:nth-child(2) {
font-weight: bold;
font-size: 16px;
}
</style>

57
frontend/src/lib/components/Tabs.svelte Normal file
View file

@ -0,0 +1,57 @@
<script lang="ts">
import InfoTab from "./InfoTab.svelte";
const activeClicked = (evt) => {
const clickedTab = evt.target.closest('button');
for (const active of clickedTab.parentElement.querySelectorAll('.active')) {
active.classList.remove('active');
}
clickedTab.classList.add('active');
};
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div id="tabs" on:click={activeClicked}>
<button class="active">Info</button>
<button>Descrizione</button>
<button>Mappa</button>
</div>
<InfoTab></InfoTab>
<style>
#tabs {
display: flex;
justify-content: center;
color: grey;
background-color: white;
}
#tabs button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
width: 33%;
text-align: center;
padding: 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.tab {
padding: 10px;
background-color: white;
}
.active {
color: black !important;
font-weight: bold !important;
border-bottom: 1px solid black !important;
}
</style>

12
frontend/src/routes/routes/[slug]/+page.server.ts Normal file
View file

@ -0,0 +1,12 @@
import { error } from "@sveltejs/kit";
export const prerender = false;
export async function load({ params }) {
return {
id: 1,
name: 'Pianello 1',
image: '/images/test-1.jpg',
duration: 1233
};
}

45
frontend/src/routes/routes/[slug]/+page.svelte Normal file
View file

@ -0,0 +1,45 @@
<script lang="ts">
import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte';
export let data;
</script>
<Header transparent></Header>
<img src='/splash.jpeg' alt='splash'>
<div>
<div id='banner'>
<p>Percorso <b>{data.name}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
</div>
<Tabs></Tabs>
</div>
<style>
img {
width: 100%;
position: absolute;
z-index: -1;
}
#banner {
display: flex;
padding: 5px;
background-color: #de0e1b;
color: white;
font-size: 1.3em;
justify-content: space-evenly;
align-items: center;
padding: 20px;
}
#banner p {
margin: 0;
padding: 0;
}
#banner #duration {
font-size: 14px;
text-align: rightìì;
}
</style>