Footer with time and pagination

gui/dashboard/app.svelte

@@ -7,13 +7,17 @@
 
   const [ send, receive ] = shuffle;
   let size = ($settings.cols || 4) * ($settings.rows || 3);
+  let placesLeft = size;
   let pageNum = -1;
+  let pageCount = 1;
+  let pageCountFreePlaces = 1;
   let tiles = [];
   let time = '';
   let globalData = {};
   let resizeTimer;
   let automaticallyProportionalised = false;
   let hasData = false;
+  let centerEl;
 
   function onResize() {
     clearTimeout(resizeTimer);
@@ -21,9 +25,8 @@
   }
 
   function proportionalGrid() {
-    const container = document.querySelector('.center');
+    const w = centerEl.clientWidth;
-    const w = container.clientWidth;
+    const h = centerEl.clientHeight;
-    const h = container.clientHeight;
     const tileW = 400;
     const tileH = 300;
     const availableCols = Math.floor(w / tileW);
@@ -67,16 +70,18 @@
     const { servicesUp, servicesDown, servicesUnknown, total } = globalData;
     const upOrUnknown = [ ...servicesUp, ...servicesUnknown ];
     servicesTemp = servicesDown.slice(0, size);
+    pageCount = Math.ceil(upOrUnknown.length / size);
+    placesLeft = size - servicesTemp.length;
+    pageCountFreePlaces = Math.ceil(upOrUnknown.length / placesLeft);
 
     if (pageNum === -1 || total >= size) {
       pageNum++;
 
-      if (pageNum > Math.ceil(upOrUnknown.length / size)) {
+      if (pageNum > pageCount) {
         pageNum = 0;
       }
     }
 
-    const placesLeft = size - servicesTemp.length;
     const offset = placesLeft * pageNum;
     if (placesLeft > 0) {
       servicesTemp.push(
@@ -122,7 +127,7 @@
     }, 100);
 
     settings.subscribe(s => {
-      size = (s.cols || 4) * (s.rows || 3) - 1;
+      size = (s.cols || 4) * (s.rows || 3);
       if (hasData) organiseGrid();
     });
 
@@ -131,23 +136,37 @@
 </script>
 
 <svelte:window on:resize={onResize} />
-<Settings />
 
 <div
   class="center theme-{$settings.theme}"
   style="--cols: {$settings.cols || 4}; --rows: {$settings.rows || 3};"
+  bind:this={centerEl}
 >
   <div class="ratio">
-    <div class="tiles">
+    <div class="content">
-      {#each tiles as tile (tile.id)}
+      <div class="tiles">
-        <div
+        {#each tiles as tile (tile.id)}
-          in:receive={{ key: tile.id }}
+          <div
-          out:send={{ key: tile.id }}
+            in:receive={{ key: tile.id }}
-          animate:flip
+            out:send={{ key: tile.id }}
-        >
+            animate:flip
-          <TileRawValue {...tileProps(tile)} />
+          >
-        </div>
+            <TileRawValue {...tileProps(tile)} />
-      {/each}
+          </div>
+        {/each}
+      </div>
+
+      <div class="footer">
+        <div class="time">{time}</div>
+        {#if pageCountFreePlaces > 1}
+          <div class="pagination">
+            {#each Array(pageCountFreePlaces).fill('') as _, i}
+              <em class:active={pageNum === i}></em>
+            {/each}
+          </div>
+        {/if}
+        <Settings />
+      </div>
     </div>
   </div>
 </div>
@@ -177,14 +196,19 @@
     justify-content: center;
   }
 
+  .content {
+    display: grid;
+    grid-template-rows: 1fr 40px;
+    gap: 0.5rem;
+    width: calc(100% - 2rem);
+  }
+
   .tiles {
     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 > * {
@@ -195,4 +219,23 @@
   .tiles > * > :global(.tile) {
     width: 100%;
   }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .pagination em {
+    display: inline-block;
+    margin-left: 0.5rem;
+    height: 5px;
+    width: 5px;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 0.4;
+  }
+
+  .pagination em.active {
+    opacity: 1;
+  }
 </style>

gui/dashboard/lib.js

@@ -46,7 +46,7 @@ export const shuffle = crossfade({
     const transform = style.transform === 'none' ? '' : style.transform;
 
     return {
-      duration: 100,
+      duration: 300,
       easing: quintOut,
       css: t => `
         transform: ${transform} scale(${t});

gui/dashboard/settings.svelte

@@ -18,11 +18,9 @@
   }
 </script>
 
-{#if !open}
+<button class="settings" on:click={toggle}>
-  <button class="settings" on:click={toggle}>
+  Settings
-    •
+</button>
-  </button>
-{/if}
 
 <Modal title="Settings" bind:open>
   <div class="mb">
@@ -57,11 +55,10 @@
 
 <style>
   button.settings {
-    position: fixed;
-    bottom: 0;
-    right: 0;
     opacity: 0.4;
     color: var(--body-fg);
+    padding: 0;
+    display: grid;
   }
 
   button.settings:hover {