add thin progress bars to stuff, fix tiny issue with progress bars when they're too smol.

svelte-ui/src/components/GoalEntry.svelte

@@ -6,6 +6,7 @@
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
   import Progress from "./Progress.svelte";
+import TimeProgress from "./TimeProgress.svelte";
 
   export let goal: GoalResult = null;
   export let showAllOptions = false;
@@ -13,31 +14,11 @@
 
   let mdGoalEdit: ModalData;
   let mdGoalDelete: ModalData;
-  let msLength: number;
-  let msElapsed: number;
-  let now = Date.now();
 
   $: mdGoalEdit = {name:"goal.edit", goal};
   $: mdGoalDelete = {name:"goal.delete", goal};
-
-  $: {
-    const start = Date.parse(goal.startTime)
-    const length = Date.parse(goal.endTime) - start;
-
-    msLength = length;
-    msElapsed = 0;
-
-    if (now > start) {
-      if (now > start + length) {
-        msElapsed = length;
-      } else {
-        msElapsed = Math.round(now - start);
-      }
-    }
-  }
 </script>
 
-<EveryMinute bind:now={now} />
 <ParentEntry
   full={showAllOptions} 
   entry={goal} 
@@ -51,7 +32,7 @@
   {/if}
   <div class="progress">
     <Progress count={goal.completedAmount} target={goal.amount} />
-    <Progress thinner gray count={msElapsed} target={msLength} titleTime />
+    <TimeProgress startTime={goal.startTime} endTime={goal.endTime} />
   </div>
 </ParentEntry>
 

svelte-ui/src/components/ParentEntry.svelte

@@ -6,6 +6,7 @@
   import LinkHook from "./LinkHook.svelte";
   import Markdown from "./Markdown.svelte";
   import ProjectProgress from "./ProjectProgress.svelte";
+import TimeProgress from "./TimeProgress.svelte";
 
   interface EntryIconHolder {
     icon: IconName
@@ -30,6 +31,7 @@
   export let headerLink = "";
   export let hideProgress: boolean = false;
   export let hideIcon: boolean = false;
+  export let showTimeProgress: boolean = false;
 
   let iconName: IconName;
 
@@ -68,6 +70,9 @@
     </div>
     {#if (!hideProgress && entry.tasks != null)}
       <ProjectProgress project={entry} />
+      {#if showTimeProgress && entry.endTime}
+        <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
+      {/if}
     {/if}
     {#if (full)}
       <Markdown source={entry.description} />

svelte-ui/src/components/Progress.svelte

@@ -78,6 +78,10 @@
       title = `${count} / ${target} (${percentage}%)`
     }
   }
+
+  $: {
+    console.log(ons, offs);
+  }
 </script>
 
 <div class="bar" title="{title}" class:thin class:thinner>
@@ -101,7 +105,8 @@
     margin: 0;
     box-sizing: border-box;
     width: 100%;
-    height: 1em;
+    height: 16px;
+    margin: 0.5px 0;
   }
 
   div.bar > div {
@@ -109,7 +114,8 @@
     flex-basis: 0;
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid #111;
+    margin: 0 0.5px;
+    border: 0.25px solid #111;
   }
 
   div.non-segmented {
@@ -134,12 +140,29 @@
   }
 
   div.bar.thin {
-    height: 0.25em;
+    height: 3px;
   }
   div.bar.thinner {
-    height: 0.125em;
+    height: 1px;
+  }
+  div.bar.thinner div {
+    border-bottom: none;
+    border-top: none;
   }
   div.bar.thinner div.none {
     background-color: #111111;
   }
+
+  @media screen and (min-width: 1200) {
+    div.bar div {
+      margin: 1px 1px;
+    }
+
+    div.bar.thin {
+      height: 4px;
+    }
+    div.bar.thinner {
+      height: 4px;
+    }
+  }
 </style>

svelte-ui/src/components/ProjectEntry.svelte

@@ -31,6 +31,7 @@ import taskStore from "../stores/tasks";
   headerLink={linkProject ? "/projects#"+project.id : ""}
   hideProgress={hideProgress}
   hideIcon={hideIcon}
+  showTimeProgress={!hideProgress}
 >
   {#if showAllOptions}
     <OptionRow>

svelte-ui/src/components/QLListItem.svelte

@@ -4,6 +4,7 @@
   import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import ProjectProgress from "./ProjectProgress.svelte";
+import TimeProgress from "./TimeProgress.svelte";
 
   export let project: ProjectResult;
 
@@ -33,6 +34,9 @@
       {/if}
     </div>
     <ProjectProgress project={project} />
+    {#if project.endTime}
+      <TimeProgress startTime={project.createdTime} endTime={project.endTime} />
+    {/if}
   </div>
 </div>
 
@@ -63,6 +67,7 @@
 
     padding: 0.3em 0.5ch;
     padding-right: 1ch;
+    padding-top: 0.4em;
   }
   div.ql-list-item.selected div.icon {
     color: #666;

svelte-ui/src/components/TimeProgress.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import EveryMinute from "./EveryMinute.svelte";
+  import Progress from "./Progress.svelte";
+
+  export let startTime: string | Date;
+  export let endTime: string | Date;
+
+  let msLength: number;
+  let msElapsed: number;
+  let now = Date.now();
+
+  $: {
+    const start = (startTime instanceof Date) ? startTime.getTime() : Date.parse(startTime)
+    const length = ((endTime instanceof Date) ? endTime.getTime() : Date.parse(endTime)) - start;
+
+    msLength = length;
+    msElapsed = 0;
+
+    if (now > start) {
+      if (now > start + length) {
+        msElapsed = length;
+      } else {
+        msElapsed = Math.round(now - start);
+      }
+    }
+  }
+
+  $: console.log(startTime, endTime, msLength, msElapsed, msElapsed < msLength)
+</script>
+
+<EveryMinute bind:now={now} />
+<Progress thinner gray count={msElapsed} target={msLength} titleTime />