turtles/controlpanel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scale document.body to 100% height, Implement footer

Browse Source
This commit is contained in:
Kai Vogelgesang 2022-09-05 21:42:59 +02:00
parent 3ac4d2ac82
commit 8651f60645
Signed by: kai
GPG Key ID: 0A95D3B6E62C0879
4 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/App.svelte
View File

@ -15,13 +15,23 @@
<Router> <Router>
<Navbar /> <Navbar />
<div class="is-flex-grow-1">
<Route path="/"> <Route path="/">
<section class="section"> <section class="section">
<p>Hallo i bims 1 frontend</p> <p>Hallo i bims 1 frontend</p>
</section> </section>
</Route> </Route>
<Route path="/foo">foo</Route> <Route path="/foo">
<section class="hero is-danger is-fullheight">
<div class="hero-body">
<div class="">
<p class="title">Fullheight hero</p>
<p class="subtitle">Fullheight subtitle</p>
</div>
</div>
</section>
</Route>
<Route path="/bar">bar</Route> <Route path="/bar">bar</Route>
@ -45,4 +55,11 @@
</div> </div>
</section> </section>
</Route> </Route>
</div>
<footer class="footer">
<div class="has-text-centered">
Test footer please ignore
</div>
</footer>
</Router> </Router>

6
frontend/src/app.scss
View File

@ -17,6 +17,12 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "@fortawesome/fontawesome-free/scss/brands.scss"; @import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "@fortawesome/fontawesome-free/scss/v4-shims.scss"; @import "@fortawesome/fontawesome-free/scss/v4-shims.scss";
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
// https://github.com/mefechoel/svelte-navigator#what-are-the-weird-rectangles-around-the-headings-in-my-app // https://github.com/mefechoel/svelte-navigator#what-are-the-weird-rectangles-around-the-headings-in-my-app
h1:focus { h1:focus {
outline: none; outline: none;

2
frontend/src/main.ts
View File

@ -4,7 +4,7 @@ import "./app.scss";
import App from "./App.svelte"; import App from "./App.svelte";
const app = new App({ const app = new App({
target: document.getElementById("app"), target: document.body,
}); });
export default app; export default app;

1
server/templates/index.html
View File

@ -14,7 +14,6 @@
</head> </head>
<body> <body>
<div id="app"></div>
{% if dev_mode %} {% if dev_mode %}
<script type="module" src="http://localhost:5173/@vite/client"></script> <script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/src/main.ts"></script> <script type="module" src="http://localhost:5173/src/main.ts"></script>