Remove animation in favor of bottom-alignment
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
365f9a0cc6
commit
dfd1c2a237
8 changed files with 25 additions and 15 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -1,6 +1,3 @@
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="grid">
|
<div id="grid">
|
||||||
<div>
|
<div>
|
||||||
<p>Distanza</p>
|
<p>Distanza</p>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue