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; box-shadow: 0 0 50px #ccc;
border-radius: 30px; border-radius: 30px;
width: calc((100% - 50px) / 2); width: calc((100% - 50px) / 2);
height: calc(100vh/3 - 10vh );
font-size: 18px; font-size: 18px;
} }
#image { #image {
width: 100%; width: 100%;
height: 150px; height: 140px;
object-position: center; object-position: center;
background-position: center; background-position: center;
object-fit: cover; object-fit: cover;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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