New color picker and sizePicker for edit pages.

frontend/components/ui/colorPicker.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="wrapper">
+    <button class="color-card"
+            :class="'bg-' + (selectedColor || 'blue')"
+            @click="showPicker = !showPicker"></button>
+
+    <div class="picker" v-if="showPicker">
+      <div v-for="color in availableColors"
+           class="color-card" :class="'bg-' + color"
+           @click="colorSelected(color)"></div> 
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      showPicker: false,
+      selectedColor: undefined,
+      availableColors: [
+        'yellow',
+        'blue',
+        'green',
+        'pink'
+      ]
+    }
+  },
+  beforeMount() {
+    if (this.color)
+      this.selectedColor = this.color;
+  },
+  methods: {
+    colorSelected(color) {
+      this.showPicker = false;
+      this.selectedColor = color;
+      this.$emit('selectedColor', color);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'frontend/styles/variables';
+
+.wrapper {
+  position: relative;
+}
+
+.color-card {
+  width: 3rem;
+  height: 3rem;
+
+  border-style: solid;
+  border-width: 4px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.picker {
+  position: absolute;
+  width: 11.1rem;
+  display: flex;
+  flex-wrap: wrap;
+  top: 0;
+  left: 4rem;
+  background-color: var(--color-background);
+  border: 2px solid rgba(0,0,0,.7);
+  border-radius: 6px;
+  padding: 0.2rem;
+
+  > div {
+    margin: 0.1rem;
+    z-index: 2;
+  }
+
+  &::before {
+    content: '';
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-background);
+    position: absolute;
+    left: -0.5rem;
+    top: 1rem;
+    transform: rotate(45deg);
+  }
+}
+
+@include mobile {
+  .picker {
+    top: 4rem;
+    left: unset;
+    right: 0;
+
+    &::before {
+      top: -0.5rem;
+      left: 9.5rem;
+    }
+  }
+}
+</style>

frontend/components/ui/sizePicker.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="wrapper">
+    <div class="size-box" :class="{ selected: selectedSize == size }"
+         v-for="size in sizes" @click="sizeSelected(size)">
+      <i class="icon icon--bug"></i>
+      <span>{{ size }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    sizes: {
+      type: Array,
+      default: undefined,
+      required: false
+    },
+    sizeVariable: {
+      type: Object,
+      required: false
+    }
+  },
+  watch: {
+    sizeVariable(newVal) {
+      this.selectedSize = newVal;
+    }
+  },
+  data() {
+    return {
+      selectedSize: undefined,
+      defaultSizes: ['set', 'wine', 'sm', 'md', 'large']
+    }
+  },
+  beforeMount() {
+    if (this.sizes == undefined)
+      this.sizes = this.defaultSizes;
+    if (this.sizeVariable)
+      this.selectedSize = this.sizeVariable;
+  },
+  methods: {
+    sizeSelected(size) {
+      this.selectedSize = size;
+      this.$emit('selectedSize', size);
+
+      this.$emit('update:sizeVariable', size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'frontend/styles/variables';
+
+.wrapper {
+  display: flex;
+
+  @include mobile {
+    overflow: scroll;
+    max-width: 79vw;
+  }
+}
+
+.size-box {
+  border: 4px solid rgba(0,0,0,.4);
+//  border-radius: 6px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.2rem 0.3rem;
+
+  text-transform: capitalize;
+  
+  &:not(:first-of-type) {
+    margin-left: 0.4rem;
+  }
+
+  &.selected ,&:hover {
+    border-color: var(--color-darkblue);
+    cursor: pointer;
+  }
+  
+  .icon {
+    font-size: 3em;
+  }
+}
+</style>
+