first commit

2020-12-31 17:49:54 +01:00
commit 2240985aa1
120 changed files with 11574 additions and 0 deletions
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { IconName } from "../external/icons";
+  import type { GroupResult } from "../models/group";
+  import type { default as Item } from "../models/item";
+  import type { ModalData } from "../stores/modal";
+  import Option from "./Option.svelte";
+  import OptionRow from "./OptionRow.svelte";
+
+  export let item: Item = null;
+  export let group: GroupResult = null;
+
+  let mdItemEdit: ModalData;
+  let mdItemDelete: ModalData;
+
+  $: mdItemEdit = {name: "item.edit", item, group};
+  $: mdItemDelete = {name: "item.delete", item, group};
+</script>
+
+<div class="item">
+  <div class="body">
+    <div class="header">
+      <div class="icon">
+        {item.groupWeight}
+      </div>
+      <div class="name">{item.name}</div>
+    </div>
+    <div class="description">
+      <p>{item.description}</p>
+
+      <OptionRow>
+        <Option open={mdItemEdit}>Edit</Option>
+        <Option open={mdItemDelete}>Delete</Option>
+      </OptionRow>
+    </div>
+  </div>
+</div>
+
+<style>
+  div.item {
+    display: flex;
+    flex-direction: row;
+    margin: 0.25em 0 0.75em 0;
+  }
+  div.body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  div.header {
+    display: flex;
+    flex-direction: row;
+    background: #333;
+  }
+
+  div.icon {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+    padding: 0.125em .5ch;
+    min-width: 2ch;
+    text-align: center;
+
+    margin-right: 0.5em;
+    background: #444;
+    color: #CCC;
+  }
+
+  div.name {
+    font-size: 1em;
+    font-weight: 100;
+    margin: auto 0;
+    vertical-align: middle;
+    padding: 0.125em .5ch;
+  }
+
+  div.description {
+    padding: 0.25em 1ch;
+    background: #222;
+    color: #aaa;
+    border-bottom-right-radius: 0.5em;
+  }
+  div.description p {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+</style>