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

65
frontend/src/App.svelte
View File

@ -15,34 +15,51 @@
<Router>
<Navbar />
<Route path="/">
<section class="section">
<p>Hallo i bims 1 frontend</p>
</section>
</Route>
<div class="is-flex-grow-1">
<Route path="/">
<section class="section">
<p>Hallo i bims 1 frontend</p>
</section>
</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>
<Route path="/monitoring">monitoring</Route>
<Route path="/monitoring">monitoring</Route>
<Route path="/mining">mining</Route>
<Route path="/mining">mining</Route>
<Route path="/stats">stats</Route>
<Route path="/stats">stats</Route>
<Route>
<section class="section">
<div class="container has-text-centered">
<h1 class="title is-1">404</h1>
<h2 class="subtitle is-5">
The page you are trying to reach either
<strong>does not exist</strong>
or
<strong>you are not authorized</strong>
to view it.
</h2>
</div>
</section>
</Route>
<Route>
<section class="section">
<div class="container has-text-centered">
<h1 class="title is-1">404</h1>
<h2 class="subtitle is-5">
The page you are trying to reach either
<strong>does not exist</strong>
or
<strong>you are not authorized</strong>
to view it.
</h2>
</div>
</section>
</Route>
</div>
<footer class="footer">
<div class="has-text-centered">
Test footer please ignore
</div>
</footer>
</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/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
h1:focus {
outline: none;

2
frontend/src/main.ts
View File

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

1
server/templates/index.html
View File

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