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

Compare commits

base: pianello:e7a69f2e7829aabacea5c48b2776404e1400a768
Branches Tags
pianello:main
pianello:maybeitworked
pianello:develop
..
compare: pianello:28190d08044d067add2c7615a92b951095489e9d
Branches Tags
pianello:main
pianello:maybeitworked
pianello:develop

2 commits
e7a69f2e78 ... 28190d0804

Author SHA1 Message Date
Alessio Davoli
28190d0804 Fix css
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details
2023-07-18 15:08:52 +02:00
Alessio Davoli
38f587c7e0 Fix BottomAppBar.svelte css positioninx 2023-07-18 14:56:54 +02:00
6 changed files with 118 additions and 33 deletions
Show stats Expand all files Collapse all files

41
frontend/src/css/app.css Normal file
View file

@ -0,0 +1,41 @@
:root {
--footer-height: calc(68px + 20px + 20px);
--accent-color: #213c8b;
--pianello-red: #de0e1b;
--pianello-yellow: #f6ae04;
--pianello-blue: #213c8b;
--card-background-color: #f9f4f1;
}
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fff;
font-family: 'Roboto-Regular';
display: grid;
}
header,
main,
footer {
height: 100%;
width: 100%;
display: grid;
place-items: center;
}
@font-face {
font-family: 'Roboto-Regular';
src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');
}

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

@ -1,25 +1,33 @@
<div id="container">
<a href="/">
<img src="/images/home-icon.png" alt="home" />
</a>
<a href="/">
<img src="/images/routes-icon.png" alt="possible routes" />
</a>
<a href="/settings">
<img src="/images/settings-icon.png" alt="settings" />
</a>
<div id="container-of-container">
<div id="container">
<a href="/">
<img src="/images/home-icon.png" alt="home" />
</a>
<a href="/">
<img src="/images/routes-icon.png" alt="possible routes" />
</a>
<a href="/settings">
<img src="/images/settings-icon.png" alt="settings" />
</a>
</div>
</div>
<style>
#container-of-container {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
#container {
display: flex;
height: 68px;
height: 10vh;
justify-content: center;
width: 90%;
border-radius: 90px;
box-shadow: 0 0 50px #ccc;
background-color: var(--card-background-color);
position: absolute;
bottom: 0;
margin: 0 auto;
margin-bottom: 10px;
}

28
frontend/src/lib/components/Header.svelte
View file

@ -1,14 +1,12 @@
<script lang="ts">
export let title: string = 'Naturalistici';
export let transparent = false;
const goBack = () => {
history.back();
};
</script>
{#if transparent}
<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
<div style=''>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
@ -18,28 +16,20 @@
<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>
<p>Percorsi <b>{title}</b></p>
<img src="/images/app-bar-logo.png" alt="" />
</div>
{/if}
<style>
div {
color: white;
padding: 5px;
position: fixed;
padding: 15px;
background-color: transparent;
color: black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
width: 100%;
display: flex;
justify-content: space-evenly;
justify-content: space-between;
align-items: center;
background-color: #de0e1b;
}
div a {
cursor: pointer;

43
frontend/src/lib/components/HomeHeader.svelte Normal file
View file

@ -0,0 +1,43 @@
<script lang="ts">
export let title: string = 'Naturalistici';
const goBack = () => {
history.back();
};
</script>
<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>
<p>Percorsi <b>{title}</b></p>
<img src="/images/app-bar-logo.png" alt="" />
</div>
<style>
div {
color: white;
padding: 5px;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #de0e1b;
}
div a {
cursor: pointer;
}
div a img {
height: 40px;
}
img {
height: 40px;
}
.back {
height: 20px;
}
</style>

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

@ -59,6 +59,7 @@
padding: 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.tab {

4
frontend/src/routes/routes/[slug]/+page.svelte
View file

@ -5,7 +5,7 @@
</script>
<Header transparent></Header>
<Header></Header>
<img src='/splash.jpeg' alt='splash'>
<div id='divider'>
@ -21,10 +21,12 @@
#divider {
background: white;
margin-top: 0px;
margin-top: 20vh;
}
img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}