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

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

View file

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

View file

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

View file

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