Use spaces instead of tabs
All checks were successful
ci/woodpecker/push/build Pipeline was successful
All checks were successful
ci/woodpecker/push/build Pipeline was successful
This commit is contained in:
parent
bfba81c09b
commit
7280d80e3f
1 changed files with 61 additions and 61 deletions
|
@ -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>
|
Loading…
Reference in a new issue