smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-01-18 13:37:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard aspect ratio

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren 2022-07-08 14:50:15 +02:00
parent f29f962de4
commit 6241de18fe
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gui/dashboard/app.svelte
View File

@ -1 +1,19 @@
<h1>here comes the dashboard</h1>
<script>
import AspectRatio from './components/aspectratio.svelte';
</script>
<AspectRatio>
<h1>here comes the dashboard</h1>
</AspectRatio>
<style>
:global(html, body) {
--radius: 10px;
--dark: #181818;
background-color: #000;
color: #fff;
padding: 0;
margin: 0;
}
</style>

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

@ -0,0 +1,29 @@
<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>