adds PercentInput for value modding in sell action

lootalot_front/src/components/Chest.vue

@@ -7,7 +7,8 @@
             <th>Objets de {{ player }}</th>
             <th v-if="canGrab"></th>
             <th v-if="canSell">
-                  <button class="button is-fullwidth" 
+                <div class="buttons is-right">
+                  <button class="button" 
                     :class="is_selling ? 'is-danger' :  'is-warning'"
                     @click="is_selling = !is_selling"
                     >
@@ -17,6 +18,8 @@
                     <p v-if="!is_selling">Vendre</p>
                     <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
                   </button>
+                  <PercentInput v-show="is_selling"></PercentInput>
+                </div>
             </th>
           </tr>
         </thead>
@@ -28,13 +31,18 @@
                 <Request :item="item.id"></Request>
               </td>
               <td v-if="canSell">
-                <label class="checkbox" v-show="is_selling">
+                <div class="field is-grouped is-pulled-right" v-show="is_selling">
+                  <div class="control">
+                    <label class="label">
                       <input type="checkbox" 
                         id="`item-${idx}`" 
                         :value="item.id"
                         v-model="sell_selected">
                       {{item.sell_value}} GP
                     </label>
+                  </div>
+                  <PercentInput></PercentInput>
+                </div>
               </td>
             </tr>
           </template>
@@ -46,6 +54,7 @@
 <script>
     import { store } from '../App.vue'
     import Request from './Request.vue'
+    import PercentInput from './PercentInput.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -67,7 +76,8 @@
             }
         },
         components: {
-            Request
+            Request,
+            PercentInput,
         },
         data () {
             return {

lootalot_front/src/components/PercentInput.vue

@@ -0,0 +1,28 @@
+<template>
+        <div class="field has-addons">
+          <div v-show="is_opened" class="control has-icons-left">
+            <input class="input is-small" type="number" size="3" min=-50 max=50 step=5>
+            <span class="icon is-small is-left">
+              <i class="fas fa-percent"></i>
+            </span>
+          </div>
+          <div class="control">
+            <button class="button is-small is-outlined"
+              @click="is_opened = !is_opened"
+            >
+              <small v-if="!is_opened">Mod.</small>
+              <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
+            </button>
+          </div>
+        </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                is_opened: false,
+            };
+        }
+    }
+</script>