pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 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">
import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte';
import MapTab from '$lib/components/tabs/MapTab.svelte';
import { onMount } from 'svelte';
import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte';
import MapTab from '$lib/components/tabs/MapTab.svelte';
import { onMount } from 'svelte';
let syncWorker: Worker | undefined = undefined;
let syncWorker: Worker | undefined = undefined;
const loadWorker = async () => {
if (!("geolocation" in navigator)) {
/* geolocation is not available */
return;
}
const watchID = navigator.geolocation.watchPosition((position) => {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log({latitude, longitude});
});
};
const loadWorker = async () => {
if (!("geolocation" in navigator)) {
/* geolocation is not available */
return;
}
const watchID = navigator.geolocation.watchPosition((position) => {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log({latitude, longitude});
});
};
onMount(loadWorker);
onMount(loadWorker);
export let data;
let divider;
export let data;
let divider;
const mapClick = (evt) => {
if(evt.detail.component === MapTab)
divider.style.transform = "translateY(calc(0vh + 70px))";
else
divider.style.transform = "translateY(30vh)";
}
const mapClick = (evt) => {
if(evt.detail.component === MapTab)
divider.style.transform = "translateY(calc(0vh + 70px))";
else
divider.style.transform = "translateY(30vh)";
}
</script>
@ -36,47 +36,47 @@
<img src='/splash.jpeg' alt='splash'>
<div bind:this={divider} id='divider'>
<div id='banner'>
<p>Percorso <b>{data.name}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
</div>
<Tabs on:map-click={mapClick}></Tabs>
<div id='banner'>
<p>Percorso <b>{data.name}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
</div>
<Tabs on:map-click={mapClick}></Tabs>
</div>
<style>
#divider {
background: white;
margin-top: 0px;
margin-top: 0;
transform: translateY(30vh);
transition: transform 400ms;
}
#divider {
background: white;
margin-top: 0px;
margin-top: 0;
transform: translateY(30vh);
transition: transform 400ms;
}
img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
img {
width: 100%;
height: 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 {
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ìì;
}
#banner #duration {
font-size: 14px;
text-align: rightìì;
}
</style>