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({
};
},
});
-*/