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

Remove useless node, adapt general page style with grids
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details

Browse source
This commit is contained in:
Alessio Davoli 2023-07-24 11:55:34 +02:00
parent 34cb1a754a
commit d9e726850e
4 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/lib/components/BottomAppBar.svelte
View file

@ -18,6 +18,9 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: grid;
height: 10vh;
margin-bottom: 10px;
} }
#container { #container {
display: flex; display: flex;
@ -28,7 +31,7 @@
box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
background-color: var(--card-background-color); background-color: var(--card-background-color);
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px;
} }
#container > a { #container > a {

6
frontend/src/lib/components/Path.svelte
View file

@ -75,8 +75,10 @@
display: grid; display: grid;
height: 100%; height: 100%;
align-content: center; align-content: center;
padding: 20px; padding: 0;
font-size: 28px; margin-left: 10px;
margin-right:10px;
font-size: 27px;
} }
.route-card .name > * { .route-card .name > * {

7
frontend/src/routes/+layout.svelte
View file

@ -32,10 +32,15 @@
</script> </script>
<div bind:this={node}></div> <div bind:this={node}></div>
<slot />
<main><slot /></main>
<BottomAppBar /> <BottomAppBar />
<style> <style>
main {
max-height: calc(100% - 10vh - 10px);
}
div { div {
position: absolute; position: absolute;
width: 0; width: 0;

23
frontend/src/routes/+page.svelte
View file

@ -5,11 +5,8 @@
</script> </script>
<Splash /> <Splash />
<header>
<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
</header>
<main> <main>
<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
<div id="route-cards"> <div id="route-cards">
<Path color="#de0e1b" type="naturalistici" /> <Path color="#de0e1b" type="naturalistici" />
<Path color="#f6ae04" type="storici" /> <Path color="#f6ae04" type="storici" />
@ -18,28 +15,32 @@
</main> </main>
<style> <style>
header {
text-align: center;
display: grid;
place-items: center;
}
main { main {
width: 100%; width: 100%;
height: 72vh; height: 100%;
margin: 0px; margin: 0px;
font-family: 'Roboto-Regular'; font-family: 'Roboto-Regular';
display: grid; display: flex;
flex-direction: column;
place-items: center; place-items: center;
} }
.bold { .bold {
font-weight: bold; font-weight: bold;
font-size: 22px;
} }
#welcome-message { #welcome-message {
font-size: 18px; font-size: 18px;
height: 15%;
display: grid;
width: 100%;
place-content: center;
grid-template-columns: 1fr;
text-align: center;
} }
#route-cards { #route-cards {
height: 80%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;