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

Use spaces instead of tabs
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-18 17:31:47 +02:00
parent bfba81c09b
commit 7280d80e3f
1 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,34 +1,34 @@
<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 MapTab from '$lib/components/tabs/MapTab.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let syncWorker: Worker | undefined = undefined; let syncWorker: Worker | undefined = undefined;
const loadWorker = async () => { const loadWorker = async () => {
if (!("geolocation" in navigator)) { if (!("geolocation" in navigator)) {
/* geolocation is not available */ /* geolocation is not available */
return; return;
} }
const watchID = navigator.geolocation.watchPosition((position) => { const watchID = navigator.geolocation.watchPosition((position) => {
latitude = position.coords.latitude; latitude = position.coords.latitude;
longitude = position.coords.longitude; longitude = position.coords.longitude;
console.log({latitude, longitude}); console.log({latitude, longitude});
}); });
}; };
onMount(loadWorker); onMount(loadWorker);
export let data; export let data;
let divider; let divider;
const mapClick = (evt) => { const mapClick = (evt) => {
if(evt.detail.component === MapTab) if(evt.detail.component === MapTab)
divider.style.transform = "translateY(calc(0vh + 70px))"; divider.style.transform = "translateY(calc(0vh + 70px))";
else else
divider.style.transform = "translateY(30vh)"; divider.style.transform = "translateY(30vh)";
} }
</script> </script>
@ -36,47 +36,47 @@
<img src='/splash.jpeg' alt='splash'> <img src='/splash.jpeg' 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}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p> <p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
</div> </div>
<Tabs on:map-click={mapClick}></Tabs> <Tabs on:map-click={mapClick}></Tabs>
</div> </div>
<style> <style>
#divider { #divider {
background: white; background: white;
margin-top: 0px; margin-top: 0px;
margin-top: 0; margin-top: 0;
transform: translateY(30vh); transform: translateY(30vh);
transition: transform 400ms; transition: transform 400ms;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
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>