tweak colors, add buttons for future front page fast item management.

package.json

@@ -16,7 +16,7 @@
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
-    "@yarbsemaj/adapter-lambda": "^0.5.1",
+    "@yarbsemaj/adapter-lambda": "^0.2.1",
     "eslint": "^7.32.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "fa-svelte": "^3.1.0",

src/app.html

@@ -7,7 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<style>
 			body {
-				background-color: #141415;
+				background-color: hsl(240, 12%, 7%);
 				color: #aaa;
 				padding: 0;
 				margin: 0;

src/lib/components/colors.sass

@@ -0,0 +1,14 @@
+$color-entry0: hsl(240, 5%, 7%)
+$color-entry1: hsl(240, 5%, 14%)
+$color-entry2: hsl(240, 5%, 21%)
+$color-entry3: hsl(240, 5%, 28%)
+$color-entry4: hsl(240, 5%, 35%)
+$color-entry5: hsl(240, 5%, 42%)
+$color-entry6: hsl(240, 5%, 49%)
+$color-entry7: hsl(240, 5%, 56%)
+$color-entry8: hsl(240, 5%, 63%)
+$color-entry9: hsl(240, 5%, 70%)
+$color-entry10: hsl(240, 5%, 77%)
+$color-entry11: hsl(240, 5%, 84%)
+$color-entry12: hsl(240, 5%, 91%)
+$color-entry13: hsl(240, 5%, 98%)

src/lib/components/frontpage/ItemLink.svelte

@@ -2,9 +2,11 @@
   import type { StandaloneItem } from "$lib/models/item";
   import Entry from "../layout/Entry.svelte";
   import EntryAmounts from "../layout/EntryAmounts.svelte";
+  import EntryButton from "../layout/EntryButton.svelte";
   import EntryCompletionIcon from "../layout/EntryCompletionIcon.svelte";
   import EntryDescription from "../layout/EntryDescription.svelte";
   import EntryName from "../layout/EntryName.svelte";
+  import Icon from "../layout/Icon.svelte";
 
   export let item: StandaloneItem
   export let compact: boolean = false;
@@ -25,6 +27,15 @@ import EntryCompletionIcon from "../layout/EntryCompletionIcon.svelte";
 
 <a href={link}>
   <Entry>
+    {#if !item.acquireDate}
+      <EntryButton>
+        <Icon name="check" />
+      </EntryButton>
+    {:else}
+      <EntryButton>
+        <Icon name="pen" />
+      </EntryButton>
+    {/if}
     <EntryCompletionIcon condition={!!item.acquireDate} />
     <EntryName subtitle={subtitle}>{item.name}</EntryName>
     {#if !compact}

src/lib/components/frontpage/RequirementLink.svelte

@@ -3,11 +3,13 @@
   import Status from "$lib/models/status";
 
   import Entry from "../layout/Entry.svelte";
+  import EntryButton from "../layout/EntryButton.svelte";
   import EntryDescription from "../layout/EntryDescription.svelte";
   import EntryName from "../layout/EntryName.svelte";
   import EntryProgress from "../layout/EntryProgress.svelte";
   import EntryProgressRow from "../layout/EntryProgressRow.svelte";
   import EntryStatusIcon from "../layout/EntryStatusIcon.svelte";
+  import Icon from "../layout/Icon.svelte";
 
   export let requirement: StandaloneRequirement
   export let compact: boolean = false;
@@ -16,6 +18,11 @@
 
 <a href="/{requirement.scope.id}/{requirement.project.id}?requirement={requirement.id}">
   <Entry>
+    {#if requirement.status === Status.Active}
+      <EntryButton>
+        <Icon name="plus" />
+      </EntryButton>
+    {/if}
     <EntryStatusIcon status={requirement.status} />
     <EntryName subtitle={requirement.project.name}>{requirement.name}</EntryName>
     {#if !compact}

src/lib/components/frontpage/SprintLink.svelte

@@ -12,6 +12,8 @@
   import EntryProgressRow from "../layout/EntryProgressRow.svelte";
   import ItemLink from "./ItemLink.svelte";
   import RequirementLink from "./RequirementLink.svelte";
+import EntryButton from "../layout/EntryButton.svelte";
+import Icon from "../layout/Icon.svelte";
 
   export let sprint: Sprint
   
@@ -42,7 +44,7 @@
 
   $: {
     switch (sprint.kind) {
-      case "item": {
+      case "items": {
         aggregate = calculateAggregate(sprint.items.map(i => i.stats).flat());
         break;
       }
@@ -69,10 +71,15 @@
 
 <a href="/{sprint.scope.id}/sprints?sprint={sprint.id}">
   <Entry>
+    {#if sprint.kind === "stats"}
+      <EntryButton>
+        <Icon name="plus" />
+      </EntryButton>
+    {/if}
     <EntryName subtitle="{sprint.scope.abbreviation} {sprint.kind} sprint">{sprint.name}</EntryName>
     <EntryDescription>{sprint.description}</EntryDescription>
     <EntryProgressRow>
-      {#if sprint.kind === "item"}
+      {#if sprint.kind === "items"}
         <EntryProgress
           fullwidth green
           name="Items"
@@ -83,7 +90,7 @@
       {:else}
         <EntryProgress
           fullwidth
-          name="Total"
+          name={sprint.aggregateName || "Total"}
           acquired={aggregate.acquired}
           required={aggregate.required}
           boat={boat}

src/lib/components/layout/Entry.svelte

@@ -2,12 +2,14 @@
   <slot></slot>
 </div>
 
-<style>
+<style lang="scss">
+  @import "../colors.sass";
+
   div.entry {
     display: block;
     text-decoration: none;
-    color: #aaa;
-    background-color: #222;
+    color: $color-entry9;
+    background-color: $color-entry1;
     border-bottom-right-radius: 0.75em;
     margin: 0.5em 0;
     padding: 0.25em 0.5ch;
@@ -15,8 +17,8 @@
     overflow-y: hidden;
   }
   div.entry:hover {
-    background-color: #333;
-    color: #eee;
+    background-color: $color-entry2;
+    color: $color-entry13;
   }
 
   :global(div.entry div.entry) {
@@ -26,7 +28,7 @@
     border-bottom-right-radius: 0.5em;
   }
   :global(div.entry div.entry:hover) {
-    background-color: #444;
+    background-color: $color-entry3;
   }
 
   div.entry:last-of-type {

src/lib/components/layout/EntryAmounts.svelte

@@ -18,7 +18,9 @@
   {/each}
 </div>
 
-<style>
+<style lang="scss">
+  @import "../colors.sass";
+
   div.amounts {
     display: flex;
     flex-direction: row;
@@ -35,6 +37,6 @@
   }
 
   span.label {
-    color: #777;
+    color: $color-entry6;
   }
 </style>

src/lib/components/layout/EntryBgIcon.svelte

@@ -9,19 +9,16 @@
   <Icon name={name} />
 </div>
 
-<style lang="scss">
+<style>
   div.bgicon {
     position: relative;
     top: 0.1em;
     height: 0;
-    width: 2ch;
+    width: 1.75ch;
     font-size: 3em;
     margin-left: auto;
     background: none;
     pointer-events: none;
-
-    :global(.icon) {
     opacity: 0.10;
   }
-  }
 </style>

src/lib/components/layout/EntryButton.svelte

@@ -0,0 +1,36 @@
+<div class="button-wrapper">
+  <div class="button-row">
+    <div class="button" on:click>
+      <slot></slot>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @import "../colors.sass";
+
+  div.button {
+    color: $color-entry4;
+    font-size: 1.5em;
+    margin: 0 0.1ch;
+    padding: 0;
+    transition: 250ms;
+
+    &:hover {
+      color: $color-entry10;
+    }
+  }
+
+  div.button-row {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  div.button-wrapper {
+    position: relative;
+    top: 0.05em;
+    height: 0;
+    margin-left: auto;
+    background: none;
+  }
+</style>

src/lib/components/layout/EntryName.svelte

@@ -7,7 +7,9 @@
   <span class="abbreviation">{subtitle}</span>
 </div>
 
-<style>
+<style lang="scss">
+  @import "../colors.sass";
+
   div.name {
     font-size: 1em;
     font-weight: 600;
@@ -15,7 +17,7 @@
 
   span.abbreviation {
     font-size: 1em;
-    opacity: 0.333;
+    color: $color-entry4;
   }
 
   @media screen and (max-width: 1500px) {

src/lib/components/layout/EntryProgress.svelte

@@ -130,6 +130,8 @@
 </div>
 
 <style lang="scss">
+  @import "../colors.sass";
+
   div.progress {
     padding: 0.25em 0.5ch;
     font-size: 0.9em;
@@ -200,6 +202,6 @@
   }
 
   span.ackreq {
-    color: #555;
+    color: $color-entry4;
   }
 </style>

src/lib/components/layout/Icon.svelte

@@ -24,7 +24,7 @@
   import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
   import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
   import { faArchive } from "@fortawesome/free-solid-svg-icons/faArchive";
-  import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
+  import { faCheckToSlot } from "@fortawesome/free-solid-svg-icons/faCheckToSlot";
   import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
   import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
   import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
@@ -47,7 +47,7 @@
     "plus": faPlus,
     "pen": faPen,
     "archive": faArchive,
-    "check": faCheck,
+    "check": faCheckToSlot,
     "cog": faCog,
     "link": faLink,
     "star": faStar,

src/lib/models/sprint.ts

@@ -11,11 +11,12 @@ export default interface Sprint {
   to: string
   timed: boolean
   coarse: boolean
-  kind: "item" | "requirements" | "stats"
+  kind: "items" | "requirements" | "stats"
   scope: ScopeEntry
   items: StandaloneItem[]
   requirements: StandaloneRequirement[]
   aggregateRequired: number,
+  aggregateName: string
   stats: StatProgressEntry[]
 }
 

src/routes/indexdata.json.ts

@@ -134,7 +134,8 @@ export const get: RequestHandler = async({}) => {
       ],
       items: [],
       requirements: [],
-      aggregateRequired: 40,
+      aggregateRequired: 30,
+      aggregateName: "3D Modeling",
     },
     {
       id: 643,
@@ -153,6 +154,7 @@ export const get: RequestHandler = async({}) => {
         requirements[2],
       ],
       aggregateRequired: 0,
+      aggregateName: "",
     },
     {
       id: 771,
@@ -161,7 +163,7 @@ export const get: RequestHandler = async({}) => {
       from: "2022-03-01T00:00:00+0200",
       to: "2022-03-30T23:59:59+0200",
       coarse: false,
-      kind: "item",
+      kind: "items",
       scope: scopes[0],
       timed: true,
       stats: [
@@ -175,6 +177,7 @@ export const get: RequestHandler = async({}) => {
       ],
       requirements: [],
       aggregateRequired: 0,
+      aggregateName: "",
     }
   ]