From c6fa75d1a3741b3b7cd88cb71953266043d57717 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Wed, 6 Jan 2021 22:59:42 +0100
Subject: [PATCH] show N/M value on hover for completed tasks.

---
 svelte-ui/src/components/TaskEntry.svelte | 24 ++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/svelte-ui/src/components/TaskEntry.svelte b/svelte-ui/src/components/TaskEntry.svelte
index 360a01b..4138e3b 100644
--- a/svelte-ui/src/components/TaskEntry.svelte
+++ b/svelte-ui/src/components/TaskEntry.svelte
@@ -32,7 +32,10 @@
     <div class="header">
       {#if !task.active}
         <div class="icon done">
-          <Icon name="check" />
+          <span class="on"><Icon block name="check" /></span>
+          <span class="off">
+            {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
+          </span>
         </div>
       {:else}
         <div class="icon">
@@ -88,17 +91,32 @@
     display: flex;
     flex-direction: column;
     font-size: 1em;
-    padding: 0.125em .5ch;
+    padding: 0.2em .5ch;
 
     margin-right: 0.5em;
     background: #444;
     color: #CCC;
   }
   div.icon.done {
-    padding-top: 0.2em;
+    padding-top: 0.285em;
+    padding-bottom: 0.115em;
+
     background: #484;
     color: #78ff78;
   }
+  div.icon.done span.off {
+    display: none;
+  }
+  div.icon.done:hover {
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+  }
+  div.icon.done:hover span.on {
+    display: none;
+  }
+  div.icon.done:hover span.off {
+    display: inline;
+  }
   div.body {
     display: flex;
     flex-direction: column;