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

Add re size when clicking on map
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-12-12 19:29:22 +01:00
parent 5bcd76d099
commit 8f17da9da2
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/Tabs.svelte
View file

@ -49,6 +49,7 @@
<style> <style>
#container { #container {
background-color: white; background-color: white;
height: 80%;
} }
#tabs { #tabs {
display: flex; display: flex;
@ -76,6 +77,7 @@
padding: 10px; padding: 10px;
background-color: white; background-color: white;
overflow-y: scroll; overflow-y: scroll;
height: 100%;
} }
.active { .active {

5
frontend/src/lib/components/tabs/MapTab.svelte
View file

@ -72,7 +72,10 @@
onMount(async () => { onMount(async () => {
await watchPosition(); await watchPosition();
leaflet = await import('leaflet'); leaflet = await import('leaflet');
renderMap()
setTimeout(() => {
renderMap()
}, 500);
}); });
onDestroy(async () => { onDestroy(async () => {

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

@ -7,17 +7,17 @@
let divider; let divider;
const tabClick = (event) => { let isMap = false;
if (event.detail.component === MapTab) {
} const tabClick = (event) => {
isMap = event.detail.component === MapTab;
}; };
</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" class:move-to-top={isMap}>
<div id="banner"> <div id="banner">
<p class='path-name'>Percorso <b>{data.name_it}</b></p> <p class='path-name'>Percorso <b>{data.name_it}</b></p>
<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p> <p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
@ -30,10 +30,14 @@
background: white; background: white;
margin-top: 0px; margin-top: 0px;
margin-top: 0; margin-top: 0;
transition: transform 400ms;
align-self: end; align-self: end;
} }
.move-to-top {
align-self: start !important;
height: 100%;
}
img { img {
width: 100%; width: 100%;
height: calc(100% - 10vh - 10px); height: calc(100% - 10vh - 10px);