Adapt map layout
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-12-13 18:24:37 +01:00
parent 8f17da9da2
commit 0dfeccf40f
2 changed files with 11 additions and 28 deletions

View file

@ -10,37 +10,18 @@
let ref: HTMLDivElement;
let component = InfoTab;
const activeClicked = (evt) => {
const clickedTab = evt.target.closest('button');
for (const active of clickedTab.parentElement.querySelectorAll('.active')) {
active.classList.remove('active');
}
clickedTab.classList.add('active');
switch (clickedTab.getAttribute('id')) {
case 'info':
component = InfoTab;
break;
case 'desc':
component = DescTab;
break;
case 'map':
component = MapTab;
break;
}
const dispatchClick = (c: InfoTab | DescTab | MapTab) => {
component = c;
dispatch('tab-click', { component });
};
</script>
<div id="tabs">
<button class:active={component === InfoTab} on:click={() => dispatchClick(InfoTab)} id="info">Info</button>
<button class:active={component === DescTab} on:click={() => dispatchClick(DescTab)} id="desc">Descrizione</button>
<button class:active={component === MapTab} on:click={() => dispatchClick(MapTab)} id="map">Mappa</button>
</div>
<div id="container">
<div id="tabs" on:click={activeClicked}>
<button id="info" class="active">Info</button>
<button id="desc">Descrizione</button>
<button id="map">Mappa</button>
</div>
<div class="tab" bind:this={ref} role="tab">
<svelte:component this={component} route={route} />
</div>
@ -49,7 +30,7 @@
<style>
#container {
background-color: white;
height: 80%;
height: 100%;
}
#tabs {
display: flex;

View file

@ -31,11 +31,13 @@
margin-top: 0px;
margin-top: 0;
align-self: end;
display: grid;
}
.move-to-top {
align-self: start !important;
height: 100%;
height: calc(90dvh - 80px);
grid-template-rows: auto auto 1fr;
}
img {