pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 Wiki Activity

bad style but this works
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-11 00:18:24 +02:00
parent 09139f9ad6
commit 5900ac3ce5
4 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/lib/components/Tabs.svelte
View file

@ -1,6 +1,9 @@
<script lang="ts"> <script lang="ts">
import InfoTab from "./InfoTab.svelte"; import InfoTab from './tabs/InfoTab.svelte';
import DescTab from './tabs/DescTab.svelte';
import MapTab from './tabs/MapTab.svelte';
let component = InfoTab;
const activeClicked = (evt) => { const activeClicked = (evt) => {
const clickedTab = evt.target.closest('button'); const clickedTab = evt.target.closest('button');
@ -9,17 +12,31 @@
} }
clickedTab.classList.add('active'); clickedTab.classList.add('active');
switch (clickedTab.getAttribute('id')) {
case 'info':
component = InfoTab;
break;
case 'desc':
component = DescTab;
break;
case 'map':
component = MapTab;
break;
}
}; };
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div id="tabs" on:click={activeClicked}> <div id="tabs" on:click={activeClicked}>
<button class="active">Info</button> <button id="info" class="active">Info</button>
<button>Descrizione</button> <button id="desc">Descrizione</button>
<button>Mappa</button> <button id="map">Mappa</button>
</div>
<div class="tab">
<svelte:component this={component} />
</div> </div>
<InfoTab></InfoTab>
<style> <style>
#tabs { #tabs {

14
frontend/src/lib/components/tabs/DescTab.svelte Normal file
View file

@ -0,0 +1,14 @@
<div>
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
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>
<style>
div {
padding: 10px;
}
</style>

0
frontend/src/lib/components/InfoTab.svelte → frontend/src/lib/components/tabs/InfoTab.svelte
View file

8
frontend/src/lib/components/tabs/MapTab.svelte Normal file
View file

@ -0,0 +1,8 @@
<div>
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
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>