Update tabs mock
Some checks failed
ci/woodpecker/push/build Pipeline failed

This commit is contained in:
Alessio Davoli 2023-11-27 05:30:41 +01:00
parent 0143a16042
commit 9b6d7b9d53
4 changed files with 15 additions and 11 deletions

View file

@ -4,9 +4,11 @@
import MapTab from './tabs/MapTab.svelte'; import MapTab from './tabs/MapTab.svelte';
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher, onMount } from 'svelte';
export let route: App.Route;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let ref; let props;
let ref: HTMLDivElement;
let component = InfoTab; let component = InfoTab;
onMount(() => { onMount(() => {
const gbcr = ref.getBoundingClientRect(); const gbcr = ref.getBoundingClientRect();
@ -35,7 +37,7 @@
break; break;
} }
dispatch('map-click', {component}); dispatch('map-click', { component });
}; };
</script> </script>
@ -48,7 +50,7 @@
<button id="map">Mappa</button> <button id="map">Mappa</button>
</div> </div>
<div class="tab" bind:this={ref}> <div class="tab" bind:this={ref}>
<svelte:component this={component} /> <svelte:component this={component} route={route} />
</div> </div>
</div> </div>
@ -76,12 +78,12 @@
padding: 15px; padding: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
cursor: pointer; cursor: pointer;
} }
.tab { .tab {
padding: 10px; padding: 10px;
background-color: white; background-color: white;
overflow-y: scroll;
} }
.active { .active {

View file

@ -1,14 +1,11 @@
<script> <script lang='ts'>
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
export let route: App.Route;
</script> </script>
<div> <div>
The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur {route.description_it}
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum."
</div> </div>
<style> <style>

View file

@ -1,3 +1,7 @@
<script>
export let route;
</script>
<div id="grid"> <div id="grid">
<div> <div>
<p>Distanza</p> <p>Distanza</p>

View file

@ -2,6 +2,7 @@
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
export let route;
const pianelloCoordinates = [43.14, 12.53]; const pianelloCoordinates = [43.14, 12.53];
let mapElement: string | HTMLElement; let mapElement: string | HTMLElement;
let leaflet; let leaflet;