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

Update home page css layout

Browse source
This commit is contained in:
Alessio Davoli 2023-12-12 16:19:16 +01:00
parent 2a22519d88
commit d6fb920b18
3 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,11 +16,10 @@
#container-of-container { #container-of-container {
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0; bottom: 10px;
left: 0; left: 0;
display: grid; display: grid;
height: 10vh; height: 10dvh;
margin-bottom: 10px;
} }
#container { #container {
display: flex; display: flex;

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

@ -27,6 +27,7 @@
max-width: 100%; max-width: 100%;
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 0 auto; margin: 0 auto;
height: 100%;
} }
.route-card-right { .route-card-right {
border-top-right-radius: 45px; border-top-right-radius: 45px;

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

@ -1,5 +1,4 @@
<script> <script lang="ts">
import BottomAppBar from '$lib/components/BottomAppBar.svelte';
import Path from '$lib/components/Path.svelte'; import Path from '$lib/components/Path.svelte';
import Splash from '$lib/components/Splash.svelte'; import Splash from '$lib/components/Splash.svelte';
@ -22,10 +21,10 @@
main { main {
display: grid; display: grid;
margin: 0 auto; margin: 0 auto;
height: 100%; height: calc(90dvh - 10px);
width: 100%; width: 100%;
font-family: 'Roboto-Regular'; font-family: 'Roboto-Regular';
grid-template-rows: 16% 16% 16% 16% 16% 16%; grid-template-rows: 70px auto;
} }
.bold { .bold {
@ -37,17 +36,14 @@
display: grid; display: grid;
width: 100%; width: 100%;
place-content: center; place-content: center;
grid-template-columns: 1fr;
text-align: center; text-align: center;
grid-row-start: 1;
grid-row-end: 1;
} }
#route-cards { #route-cards {
grid-row-start: 2; padding: 20px;
grid-row-end: 7;
display: grid; display: grid;
width: 100%; width: 100%;
gap: 5px; height: 100%;
gap: 10px;
} }
</style> </style>