gisle/stufflog2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

show N/M value on hover for completed tasks.
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
gisle
2021-01-06 22:59:42 +01:00
parent bd60ab4c98
commit c6fa75d1a3
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svelte-ui/src/components/TaskEntry.svelte
+21 -3
View File
@@ -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;