You could recreate this grid
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-11 00:10:53 +02:00
parent bc7d15dc4f
commit 09139f9ad6
5 changed files with 242 additions and 38 deletions

View file

@ -1,21 +1,35 @@
<script lang='ts'> <script lang="ts">
import { goto, afterNavigate } from '$app/navigation';
export let title: string = 'Naturalistici'; export let title: string = 'Naturalistici';
export let transparent = false;
const goBack = () => { const goBack = () => {
history.back(); history.back();
}; };
</script> </script>
<div>
{#if transparent}
<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a on:click={goBack}> <a on:click={goBack}>
<img class='back' src='/images/white-back-arrow.png' alt=''> <img class="back" src="/images/black-back-arrow.png" alt="" />
</a>
<img src="/images/app-bar-logo.png" alt="" />
</div>
{:else}
<div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<a on:click={goBack}>
<img class="back" src="/images/white-back-arrow.png" alt="" />
</a> </a>
<p>Percorsi {title}</p> <p>Percorsi {title}</p>
<img src='/images/app-bar-logo.png' alt=''> <img src="/images/app-bar-logo.png" alt="" />
</div> </div>
{/if}
<style> <style>
div { div {

View file

@ -0,0 +1,76 @@
<script>
</script>
<div id="grid">
<div>
<p>Distanza</p>
<p>Value</p>
</div>
<div>
<p>Dislivello Positivo</p>
<p>Value</p>
</div>
<div>
<p>Velocità Media</p>
<p>Value</p>
</div>
<div>
<p>Difficolta</p>
<p>Value</p>
</div>
<div>
<p>Dislivello Negativo</p>
<p>Value</p>
</div>
<div>
<p>Durata</p>
<p>Value</p>
</div>
<div>
<p>Altitudine max</p>
<p>Value</p>
</div>
<div>
<p>Altitudine min</p>
<p>Value</p>
</div>
<div>
<p>Tipo Percorso</p>
<p>Value</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>

View file

@ -0,0 +1,57 @@
<script lang="ts">
import InfoTab from "./InfoTab.svelte";
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');
};
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div id="tabs" on:click={activeClicked}>
<button class="active">Info</button>
<button>Descrizione</button>
<button>Mappa</button>
</div>
<InfoTab></InfoTab>
<style>
#tabs {
display: flex;
justify-content: center;
color: grey;
background-color: white;
}
#tabs button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
width: 33%;
text-align: center;
padding: 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.tab {
padding: 10px;
background-color: white;
}
.active {
color: black !important;
font-weight: bold !important;
border-bottom: 1px solid black !important;
}
</style>

View file

@ -0,0 +1,12 @@
import { error } from "@sveltejs/kit";
export const prerender = false;
export async function load({ params }) {
return {
id: 1,
name: 'Pianello 1',
image: '/images/test-1.jpg',
duration: 1233
};
}

View file

@ -0,0 +1,45 @@
<script lang="ts">
import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte';
export let data;
</script>
<Header transparent></Header>
<img src='/splash.jpeg' alt='splash'>
<div>
<div id='banner'>
<p>Percorso <b>{data.name}</b></p>
<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
</div>
<Tabs></Tabs>
</div>
<style>
img {
width: 100%;
position: absolute;
z-index: -1;
}
#banner {
display: flex;
padding: 5px;
background-color: #de0e1b;
color: white;
font-size: 1.3em;
justify-content: space-evenly;
align-items: center;
padding: 20px;
}
#banner p {
margin: 0;
padding: 0;
}
#banner #duration {
font-size: 14px;
text-align: rightìì;
}
</style>