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

Layout tweaks for the dashboard, plus animation

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren 2022-07-12 10:30:37 +02:00
parent 1595bb9466
commit e0e51d7ad6
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
gui/dashboard/app.svelte
View File

@ -2,10 +2,10 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import TileRawValue from './tile-rawvalue.svelte'; import TileRawValue from './tile-rawvalue.svelte';
import Settings from './settings.svelte'; import Settings from './settings.svelte';
//import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
//import { shuffle } from './lib'; import { shuffle } from './lib';
//const [ send, receive ] = shuffle; const [ send, receive ] = shuffle;
const size = 3 * 4 - 1; const size = 3 * 4 - 1;
let pageNum = -1; let pageNum = -1;
let tiles = []; let tiles = [];
@ -87,24 +87,14 @@
<TileRawValue value={time} center weight={200} /> <TileRawValue value={time} center weight={200} />
{#each tiles as tile (tile.id)} {#each tiles as tile (tile.id)}
<TileRawValue {...tileProps(tile)} />
{/each}
<!--{#each servicesUp as service (service.id)}
<TileRawValue {...tileProps(service)} />
{/each}
{#each servicesUnknown as service (service.id)}
<TileRawValue {...tileProps(service)} />
{/each}-->
<!--{#each services as service (service.id)}
<div <div
in:receive={{ key: service.id }} in:receive={{ key: tile.id }}
out:send={{ key: service.id }} out:send={{ key: tile.id }}
animate:flip animate:flip
> >
<TileRawValue {...tileProps(service)} /> <TileRawValue {...tileProps(tile)} />
</div> </div>
{/each}--> {/each}
</div> </div>
</div> </div>
</div> </div>
@ -127,14 +117,27 @@
top: 50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
width: 100vw; width: 100vw;
margin: 1rem 0;
display: flex;
justify-content: center;
} }
.tiles { .tiles {
margin: 1rem;
display: grid; display: grid;
grid-template-columns: repeat(var(--cols), 1fr); grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(var(--rows), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
gap: 1rem; gap: 1rem;
justify-items: stretch; justify-items: stretch;
height: calc(100% - 2rem);
width: calc(100% - 2rem);
}
.tiles > * {
display: flex;
align-items: stretch;
}
.tiles > * > :global(.tile) {
width: 100%;
} }
</style> </style>

6
gui/dashboard/lib.js
View File

@ -1,6 +1,6 @@
import { get, writable } from 'svelte/store'; import { get, writable } from 'svelte/store';
//import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
//import { crossfade } from 'svelte/transition'; import { crossfade } from 'svelte/transition';
function createSettingsStore() { function createSettingsStore() {
const s = writable(0); const s = writable(0);
@ -19,7 +19,6 @@ function createSettingsStore() {
export const settings = createSettingsStore(); export const settings = createSettingsStore();
/*
export const shuffle = crossfade({ export const shuffle = crossfade({
fallback(node) { fallback(node) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
@ -35,4 +34,3 @@ export const shuffle = crossfade({
}; };
}, },
}); });
*/