smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-07-17 20:34:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard compilation (WIP)

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren
2022-07-08 17:17:17 +02:00
parent aa7d4e33a3
commit 1e48f645fd
11 changed files with 133 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
gui/dashboard/app.svelte
View File

@ -1,10 +1,14 @@
<script>
import AspectRatio from './components/aspectratio.svelte';
import { onMount } from 'svelte';
onMount(() => console.log('test'));
</script>
<AspectRatio>
<h1>here comes the dashboard</h1>
</AspectRatio>
<div class="center">
<div class="ratio">
</div>
</div>
<style>
:global(html, body) {
@ -15,5 +19,25 @@
color: #fff;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.center {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.ratio {
height: 56.25vw;
left: 50%;
max-height: 100vh;
max-width: 177.77778vh;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 100vw;
}
</style>

29
gui/dashboard/components/aspectratio.svelte
View File

@ -1,29 +0,0 @@
<div class="center">
<div class="ratio">
<slot />
</div>
</div>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.ratio {
border-radius: var(--radius);
background-color: var(--dark);
background-color: red;
height: 56.25vw;
left: 50%;
max-height: 100vh;
max-width: 177.77778vh;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 100vw;
}
</style>

12
gui/dashboard/index.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Status dashboard</title>
</head>
<body>
<div id="outlet"></div>
<script type="module" src="./index.js"></script>
</body>
</html>

6
gui/dashboard/index.js
View File

@ -1,7 +1,5 @@
import App from './app.svelte';
const app = new App({
target: document.getElementById('outlet'),
export default new App({
target: document.body,
});
export default app;

30
gui/dashboard/tile.svelte Normal file
View File

@ -0,0 +1,30 @@
<script>
export let title;
export let subtitle;
</script>
<div class="tile">
{#if title}
<div class="title">{title}</div>
{/if}
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
<style>
.tile {
padding: 1rem;
background-color: var(--dark);
border-radius: var(--radius);
}
.title, .subtitle {
font-size: 1.3rem;
}
.title {
font-weight: 600;
}
</style>