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

Fix route slug

Browse source
This commit is contained in:
Alessio Davoli 2023-11-27 05:30:25 +01:00
parent 33bbf50a2d
commit 0143a16042
2 changed files with 57 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,61 +1,63 @@
<script lang="ts"> <script lang="ts">
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte'; import Tabs from '$lib/components/Tabs.svelte';
import MapTab from '$lib/components/tabs/MapTab.svelte'; import { onMount } from 'svelte';
export let data;
let divider;
const mapClick = (evt) => { export let data: App.Route;
}
let divider;
onMount(async () => {
console.log(data);
});
const mapClick = (evt) => {};
</script> </script>
<Header></Header> <Header></Header>
<img src='/images/splash-background.webp' alt='splash'> <img src="/images/splash-background.webp" alt="splash" />
<div bind:this={divider} id='divider'> <div bind:this={divider} id="divider">
<div id='banner'> <div id="banner">
<p>Percorso <b>{data.name}</b></p> <p>Percorso <b>{data.name_it}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p> <p id="duration">Dislivello {data.elevation_gain}</p>
</div> </div>
<Tabs on:map-click={mapClick}></Tabs> <Tabs on:map-click={mapClick} route={data}></Tabs>
</div> </div>
<style> <style>
#divider { #divider {
background: white; background: white;
margin-top: 0px; margin-top: 0px;
margin-top: 0; margin-top: 0;
transition: transform 400ms; transition: transform 400ms;
align-self: end; align-self: end;
} }
img { img {
width: 100%; width: 100%;
height: calc(100% - 10vh - 10px); height: calc(100% - 10vh - 10px);
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
#banner { #banner {
display: flex; display: flex;
padding: 5px; padding: 5px;
background-color: #de0e1b; background-color: #de0e1b;
color: white; color: white;
font-size: 1.3em; font-size: 1.3em;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
} }
#banner p { #banner p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#banner #duration { #banner #duration {
font-size: 14px; font-size: 14px;
text-align: rightìì; text-align: rightìì;
} }
</style> </style>

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

@ -0,0 +1,7 @@
import { getRoute } from '$lib/repo.js';
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
return await getRoute(params.slug);
}