diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte index c7c0125..c7f1244 100644 --- a/gui/dashboard/app.svelte +++ b/gui/dashboard/app.svelte @@ -2,10 +2,10 @@ import { onMount } from 'svelte'; import TileRawValue from './tile-rawvalue.svelte'; import Settings from './settings.svelte'; - //import { flip } from 'svelte/animate'; - //import { shuffle } from './lib'; + import { flip } from 'svelte/animate'; + import { shuffle } from './lib'; - //const [ send, receive ] = shuffle; + const [ send, receive ] = shuffle; const size = 3 * 4 - 1; let pageNum = -1; let tiles = []; @@ -87,24 +87,14 @@ {#each tiles as tile (tile.id)} - - {/each} - - - + {/each} @@ -127,14 +117,27 @@ top: 50%; transform: translate(-50%,-50%); width: 100vw; + margin: 1rem 0; + display: flex; + justify-content: center; } .tiles { - margin: 1rem; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 1rem; justify-items: stretch; + height: calc(100% - 2rem); + width: calc(100% - 2rem); + } + + .tiles > * { + display: flex; + align-items: stretch; + } + + .tiles > * > :global(.tile) { + width: 100%; } diff --git a/gui/dashboard/lib.js b/gui/dashboard/lib.js index 540e7b2..9a72cf6 100644 --- a/gui/dashboard/lib.js +++ b/gui/dashboard/lib.js @@ -1,6 +1,6 @@ import { get, writable } from 'svelte/store'; -//import { quintOut } from 'svelte/easing'; -//import { crossfade } from 'svelte/transition'; +import { quintOut } from 'svelte/easing'; +import { crossfade } from 'svelte/transition'; function createSettingsStore() { const s = writable(0); @@ -19,7 +19,6 @@ function createSettingsStore() { export const settings = createSettingsStore(); -/* export const shuffle = crossfade({ fallback(node) { const style = getComputedStyle(node); @@ -35,4 +34,3 @@ export const shuffle = crossfade({ }; }, }); -*/