From 0ff2202da07e6a39394e4ce92a8bc483e4995741 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 12 Jul 2022 11:34:04 +0200
Subject: [PATCH] Relative typography for the dashboard

Signed-off-by: Romein van Buren <romein@vburen.nl>
---
 gui/dashboard/tile-rawvalue.svelte | 12 +++++-------
 gui/dashboard/tile.svelte          | 15 ++++++++++++---
 lib/dashboard/build.js             |  4 ++--
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/gui/dashboard/tile-rawvalue.svelte b/gui/dashboard/tile-rawvalue.svelte
index cc2aaf3..7d03c68 100644
--- a/gui/dashboard/tile-rawvalue.svelte
+++ b/gui/dashboard/tile-rawvalue.svelte
@@ -10,22 +10,20 @@
   export let weight = 600;
 </script>
 
-<Tile {title} {subtitle} {color} {date}>
-  <div class="value {color}" class:center style:font-weight={weight}>
+<Tile {title} {subtitle} {color} {date} {center}>
+  <div class="value {color}" style:font-weight={weight} class:center>
     {value}
   </div>
 </Tile>
 
 <style>
   .value {
-    font-size: 3rem;
+    font-size: 3vw;
     font-weight: 600;
+    margin-top: auto;
   }
 
   .value.center {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    margin: auto 0;
   }
 </style>
diff --git a/gui/dashboard/tile.svelte b/gui/dashboard/tile.svelte
index aa2c2e2..4bf51e5 100644
--- a/gui/dashboard/tile.svelte
+++ b/gui/dashboard/tile.svelte
@@ -3,6 +3,7 @@
   export let subtitle;
   export let color;
   export let date;
+  export let center = false;
 </script>
 
 <div class="tile {color}">
@@ -26,7 +27,7 @@
     </div>
   {/if}
 
-  <div class="content"><slot /></div>
+  <div class="content" class:center><slot /></div>
 </div>
 
 <style>
@@ -60,25 +61,33 @@
   }
 
   .desc {
-    font-size: 1.3rem;
     margin-bottom: 1rem;
     display: flex;
   }
 
   .desc .title {
     font-weight: 300;
+    font-size: 1.7vw;
   }
 
   .desc .subtitle {
-    font-weight: 100;
+    font-weight: 200;
+    font-size: 1.5vw;
   }
 
   .desc .time {
     opacity: 0.6;
     margin-left: auto;
+    font-size: 1.3vw;
   }
 
   .content {
     flex-grow: 1;
+    display: flex;
+  }
+
+  .content.center {
+    justify-content: center;
+    align-items: center;
   }
 </style>
diff --git a/lib/dashboard/build.js b/lib/dashboard/build.js
index 7eb0b7c..a9d8313 100644
--- a/lib/dashboard/build.js
+++ b/lib/dashboard/build.js
@@ -56,14 +56,14 @@ async function build({ server, settings }) {
     });
 
     const { output } = await bundle.generate({
-      sourcemap: true,
+      sourcemap: false,
       format: 'iife',
       name: 'app',
       file: 'public/build/bundle.js',
     });
 
     return {
-      map: output[0].map.toUrl(),
+      map: output[0].map ? output[0].map.toUrl() : '',
       code: output[0].code,
       css: cssOutput.css,
     };