show N/M value on hover for completed tasks.

2021-01-06 22:59:42 +01:00
parent bd60ab4c98
commit c6fa75d1a3
1 changed files with 21 additions and 3 deletions
@@ -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;