From f69dba437b6d674ae59ad80f11e4cb23c84a962d Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 12 Jul 2022 12:38:57 +0200
Subject: [PATCH] Moved time to bottom

Signed-off-by: Romein van Buren <romein@vburen.nl>
---
 gui/dashboard/tile-rawvalue.svelte |  6 +--
 gui/dashboard/tile.svelte          | 59 ++++++++++++++++++------------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/gui/dashboard/tile-rawvalue.svelte b/gui/dashboard/tile-rawvalue.svelte
index 2d2cadd..5678182 100644
--- a/gui/dashboard/tile-rawvalue.svelte
+++ b/gui/dashboard/tile-rawvalue.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <Tile {title} {subtitle} {color} {date} {since} {center}>
-  <div class="value {color}" style:font-weight={weight} class:center>
+  <div class="value {color}" style:font-weight={weight}>
     {value}
   </div>
 </Tile>
@@ -23,8 +23,4 @@
     font-weight: 600;
     margin-top: auto;
   }
-
-  .value.center {
-    margin: auto 0;
-  }
 </style>
diff --git a/gui/dashboard/tile.svelte b/gui/dashboard/tile.svelte
index 501da9b..7268cff 100644
--- a/gui/dashboard/tile.svelte
+++ b/gui/dashboard/tile.svelte
@@ -29,30 +29,29 @@
   });
 </script>
 
-<div class="tile {color}">
-  {#if title || subtitle || date}
+<div class="tile {color}" class:center>
+  {#if title || subtitle}
     <div class="desc">
-      <div>
-        {#if title}
-          <div class="title">{title}</div>
-        {/if}
+      {#if title}
+        <div class="title">{title}</div>
+      {/if}
 
-        {#if subtitle}
-          <div class="subtitle">{subtitle}</div>
-        {/if}
-      </div>
-
-      {#if date || since}
-        <div class="time">
-          {formattedDate}
-          {#if date && since}<br />{/if}
-          {formattedDuration}
-        </div>
+      {#if subtitle}
+        <div class="subtitle">{subtitle}</div>
       {/if}
     </div>
   {/if}
 
-  <div class="content" class:center><slot /></div>
+  <div class="bottom" class:center>
+    <div class="content"><slot /></div>
+    {#if date || since}
+      <div class="time">
+        {formattedDate}
+        {#if date && since}<br />{/if}
+        {formattedDuration}
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -82,13 +81,17 @@
     border-color: var(--grey);
   }
 
-  .tile.grey .content {
+  .tile.grey .bottom {
     color: var(--grey);
   }
 
+  .tile.center {
+    align-items: center;
+    justify-content: center;
+  }
+
   .desc {
     margin-bottom: 1rem;
-    display: flex;
   }
 
   .desc .title {
@@ -101,19 +104,29 @@
     font-size: 1.5vw;
   }
 
-  .desc .time {
+  .bottom {
+    display: flex;
+    margin-top: auto;
+  }
+
+  .bottom .time {
+    margin-left: auto;
     opacity: 0.6;
     margin-left: auto;
     font-size: 1.3vw;
     text-align: right;
   }
 
-  .content {
+  .bottom .content {
     flex-grow: 1;
     display: flex;
   }
 
-  .content.center {
+  .bottom.center {
+    margin-top: 0;
+  }
+
+  .bottom.center .content {
     justify-content: center;
     align-items: center;
   }