Remove animation in favor of bottom-alignment
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-24 13:41:14 +02:00
parent 365f9a0cc6
commit dfd1c2a237
8 changed files with 25 additions and 15 deletions

View file

@ -22,13 +22,12 @@
box-shadow: 0 0 50px #ccc;
border-radius: 30px;
width: calc((100% - 50px) / 2);
height: calc(100vh/3 - 10vh );
font-size: 18px;
}
#image {
width: 100%;
height: 150px;
height: 140px;
object-position: center;
background-position: center;
object-fit: cover;

View file

@ -2,10 +2,18 @@
import InfoTab from './tabs/InfoTab.svelte';
import DescTab from './tabs/DescTab.svelte';
import MapTab from './tabs/MapTab.svelte';
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
const dispatch = createEventDispatcher();
let ref;
let component = InfoTab;
onMount(() => {
const gbcr = ref.getBoundingClientRect();
console.log(gbcr);
ref.style.height = `${gbcr.height}px`;
});
const activeClicked = (evt) => {
const clickedTab = evt.target.closest('button');
@ -24,6 +32,7 @@
break;
case 'map':
component = MapTab;
requestAnimationFrame()
break;
}
@ -39,7 +48,7 @@
<button id="desc">Descrizione</button>
<button id="map">Mappa</button>
</div>
<div class="tab">
<div class="tab" bind:this={ref}>
<svelte:component this={component} />
</div>
</div>
@ -47,7 +56,6 @@
<style>
#container {
background-color: white;
height: calc(20vh);
}
#tabs {
display: flex;

View file

@ -1,3 +1,7 @@
<script>
import { fade } from 'svelte/transition';
</script>
<div>
The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@ -11,4 +15,4 @@
div {
padding: 10px;
}
</style>
</style>

View file

@ -1,6 +1,3 @@
<script>
</script>
<div id="grid">
<div>
<p>Distanza</p>

View file

@ -87,7 +87,7 @@
<style>
@import 'leaflet/dist/leaflet.css';
#map {
height: calc(45vh + 60px);
height: 100%;
z-index: 0;
}
</style>

View file

@ -41,6 +41,9 @@
<style>
main {
height: calc(100% - 10vh - 10px);
overflow-y: scroll;
width: 100%;
display: grid;
}
div {

View file

@ -20,7 +20,6 @@
gap: 15px;
padding-top: 10px;
margin-top: 70px;
height: calc(100% - 70px - 10vh);
overflow-y: scroll;
}
</style>

View file

@ -8,9 +8,9 @@
const mapClick = (evt) => {
if(evt.detail.component === MapTab)
divider.style.transform = "translateY(calc(0vh + 70px))";
requestAnimationFrame(() => divider.style.transform = "translateY(-10vh)");
else
divider.style.transform = "translateY(30vh)";
requestAnimationFrame(() => divider.style.transform = "translateY(calc(0vh - 70px))");
}
</script>
@ -32,13 +32,13 @@
background: white;
margin-top: 0px;
margin-top: 0;
transform: translateY(30vh);
transition: transform 400ms;
align-self: end;
}
img {
width: 100%;
height: calc(100% - 10vh);
height: calc(100% - 10vh - 10px);
position: absolute;
z-index: -1;
}