Merge pull request #1411 from TheHaf/feature/addPortionSizeModifiersToGui

Feature/add portion size modifiers to gui

vue/src/apps/RecipeView/RecipeView.vue

@@ -65,15 +65,7 @@
                             <i class="fas fa-pizza-slice fa-2x text-primary"></i>
                         </div>
                         <div class="my-auto" style="padding-right: 4px">
-                            <input
+                            <CustomInputSpinButton v-model.number="servings" />
-                                style="text-align: right; border-width: 0px; border: none; padding: 0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
-                                value="1"
-                                maxlength="3"
-                                min="0"
-                                type="number"
-                                class="form-control form-control-lg"
-                                v-model.number="servings"
-                            />
                         </div>
                         <div class="my-auto">
                             <span class="text-primary">
@@ -174,6 +166,7 @@ import StepComponent from "@/components/StepComponent"
 import KeywordsComponent from "@/components/KeywordsComponent"
 import NutritionComponent from "@/components/NutritionComponent"
 import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
+import CustomInputSpinButton from "@/components/CustomInputSpinButton"
 
 Vue.prototype.moment = moment
 
@@ -195,6 +188,7 @@ export default {
         LoadingSpinner,
         AddRecipeToBook,
         RecipeSwitcher,
+        CustomInputSpinButton,
     },
     computed: {
         ingredient_factor: function () {

vue/src/components/CustomInputSpinButton.vue

@@ -0,0 +1,87 @@
+// code taken from https://github.com/bootstrap-vue/bootstrap-vue/issues/4977#issuecomment-740215609 and modified
+<template>
+  <b-input-group>
+    <b-input-group-prepend>
+      <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value - 1)">
+        <b-icon icon="dash" font-scale="1.6" />
+      </b-button>
+    </b-input-group-prepend>
+
+    <b-form-input
+      style="text-align: right; border-width: 0px; border: none; padding: 0px; padding-left: 0.5vw; padding-right: 8px; width: 50px"
+      variant="outline-primary"
+      :id="id"
+      :size="size"
+      :value="value"
+      type="number"      
+      min="0"
+      class="border-secondary text-center"
+      number
+      @update="valueChange"
+    />
+
+    <b-input-group-append>
+      <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value + 1)">
+        <b-icon icon="plus" font-scale="1.6" />
+      </b-button>
+    </b-input-group-append>
+  </b-input-group>
+</template>
+
+<script>
+import { BIcon, BIconDash, BIconPlus } from 'bootstrap-vue'
+
+export default {
+  name: 'CustomInputSpinButton',
+
+  components: {
+    BIcon,
+
+    /* eslint-disable vue/no-unused-components */
+    BIconDash,
+    BIconPlus
+  },
+
+  props: {
+
+    size: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: function (value) {
+        return ['sm', 'md', 'lg'].includes(value)
+      }
+    },
+
+    value: {
+      type: Number,
+      required: true
+    }
+  },
+
+  methods: {
+    valueChange (newValue) {
+      if (newValue <= 0) {
+        this.$emit('input', 0)
+      } else {
+        this.$emit('input', newValue)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Remove up and down arrows inside number input */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>