Browse Source

show N/M value on hover for completed tasks.

main
Gisle Aune 4 years ago
parent
commit
c6fa75d1a3
  1. 24
      svelte-ui/src/components/TaskEntry.svelte

24
svelte-ui/src/components/TaskEntry.svelte

@ -32,7 +32,10 @@
<div class="header"> <div class="header">
{#if !task.active} {#if !task.active}
<div class="icon done"> <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> </div>
{:else} {:else}
<div class="icon"> <div class="icon">
@ -88,17 +91,32 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1em; font-size: 1em;
padding: 0.125em .5ch;
padding: 0.2em .5ch;
margin-right: 0.5em; margin-right: 0.5em;
background: #444; background: #444;
color: #CCC; color: #CCC;
} }
div.icon.done { div.icon.done {
padding-top: 0.2em;
padding-top: 0.285em;
padding-bottom: 0.115em;
background: #484; background: #484;
color: #78ff78; 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 { div.body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

Loading…
Cancel
Save