This commit is contained in:
parent
8f17da9da2
commit
0dfeccf40f
2 changed files with 11 additions and 28 deletions
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue