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

View file

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