Add icons on tabs
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-12-18 16:25:17 +01:00
parent bd31580e32
commit b1f83886f9
5 changed files with 94 additions and 6 deletions

View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import InfoTab from './tabs/InfoTab.svelte'; import InfoTabTrekking from './tabs/InfoTabTrekking.svelte';
import InfoTabBike from './tabs/InfoTabBike.svelte';
import DescTab from './tabs/DescTab.svelte'; import DescTab from './tabs/DescTab.svelte';
import MapTab from './tabs/MapTab.svelte'; import MapTab from './tabs/MapTab.svelte';
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher, onMount } from 'svelte';
@ -8,18 +9,22 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let ref: HTMLDivElement; let ref: HTMLDivElement;
let component = InfoTab; let component = InfoTabTrekking;
const dispatchClick = (c: InfoTab | DescTab | MapTab) => { onMount(() => {
console.log(route)
})
const dispatchClick = (c: InfoTabTrekking | InfoTabBike | DescTab | MapTab) => {
component = c; component = c;
dispatch('tab-click', { component }); dispatch('tab-click', { component });
}; };
</script> </script>
<div id="tabs"> <div id="tabs">
<button class:active={component === InfoTab} on:click={() => dispatchClick(InfoTab)} id="info">Info</button> <button class:active={component === InfoTabTrekking} on:click={() => dispatchClick(InfoTabTrekking)} id="info-trekking"> <img src='/trekking.png' alt='trekking'> </button>
<button class:active={component === DescTab} on:click={() => dispatchClick(DescTab)} id="desc">Descrizione</button> <button class:active={component === InfoTabBike} on:click={() => dispatchClick(InfoTabBike)} id="info-bike"> <img src='/bike.png' alt='bike'> </button>
<button class:active={component === MapTab} on:click={() => dispatchClick(MapTab)} id="map">Mappa</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>
<div id="container"> <div id="container">
<div class="tab" bind:this={ref} role="tab"> <div class="tab" bind:this={ref} role="tab">
@ -66,4 +71,10 @@
font-weight: bold !important; font-weight: bold !important;
border-bottom: 1px solid black !important; border-bottom: 1px solid black !important;
} }
#info-bike, #info-trekking {
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>

View file

@ -0,0 +1,77 @@
<script lang="ts">
export let route: App.Route;
</script>
<div id="grid">
<div>
<p>Distanza</p>
<p>{route.route_sport_details[1].distance} m</p>
</div>
<div>
<p>Dislivello Positivo</p>
<p>{route.route_sport_details[1].elevation_gain}</p>
</div>
<div>
<p>Velocità Media</p>
<p>N/A</p>
</div>
<div>
<p>Difficolta</p>
<p>{route.route_sport_details[1].difficulty_it}</p>
</div>
<div>
<p>Dislivello Negativo</p>
<p>{route.route_sport_details[1].elevation_loss}</p>
</div>
<div>
<p>Durata</p>
<p>{route.route_sport_details[1].duration}'</p>
</div>
<div>
<p>Altitudine max</p>
<p>{route.route_sport_details[1].altitude_max}</p>
</div>
<div>
<p>Altitudine min</p>
<p>{route.route_sport_details[1].altitude_min}</p>
</div>
<div>
<p>Tipo Percorso</p>
<p>{route.route_sport_details[1].route_type_it}</p>
</div>
</div>
<style>
#grid {
display: grid;
grid-template-rows: repeat(3, 33%);
grid-template-columns: repeat(3, 1fr);
width: 100%;
background: white;
place-items: center;
font-size: 14px;
}
#grid div {
margin: 0 auto;
display: flex;
text-align: center;
flex-direction: column;
}
#grid div > p {
padding: 10px;
margin: 0px;
}
#grid div p:nth-child(2) {
font-weight: bold;
font-size: 16px;
}
</style>

BIN
frontend/static/bike.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 444 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 B