adds show/hides of loot add card

lootalot_front/src/components/Chest.vue

@@ -1,57 +1,63 @@
 <template>
   <div class="container">
-    <button v-if="canAdd" class="button is-medium is-info">
+    <button v-if="canAdd" 
+        class="button is-medium is-info"
+        @click="is_adding = true"
+        v-show="!is_adding">
         Nouveau loot
     </button>
-    <Loot></Loot>
+    <Loot v-if="is_adding" @done="is_adding = false"></Loot>
-    <table class="table is-fullwidth is-striped" >
+    <table v-else class="table is-fullwidth is-striped" >
-        <thead>
+      <thead>
-          <tr>
+        <tr>
-            <th>Objets de {{ player }}</th>
+          <th>Objets de {{ player }}</th>
-            <th v-if="canGrab"></th>
+          <th v-if="canGrab"></th>
-            <th v-if="canSell">
+          <th v-if="canSell">
-                <div class="buttons is-right">
+            <div class="buttons is-right">
-                  <button class="button" 
+              <button class="button" 
-                    :class="is_selling ? 'is-danger' :  'is-warning'"
+                  :class="is_selling ? 'is-danger' :  'is-warning'"
-                    @click="is_selling = !is_selling"
+                  @click="is_selling = !is_selling"
-                    >
+                >
-                    <span class="icon">
+                <span class="icon">
-                      <i class="fas fa-coins"></i>
+                  <i class="fas fa-coins"></i>
-                    </span>
+                </span>
-                    <p v-if="!is_selling">Vendre</p>
+                <p v-if="!is_selling">
-                    <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
+                  Vendre</p>
-                  </button>
+                <p v-else>
-                  <PercentInput v-show="is_selling"></PercentInput>
+                  {{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
-                </div>
+                </button>
+                <PercentInput v-show="is_selling">
+                  </PercentInput>
+              </div>
             </th>
           </tr>
         </thead>
-        <tbody>
+      <tbody>
-          <template v-for="(item, idx) in content">
+        <template v-for="(item, idx) in content">
-            <tr :key="`row-${idx}`">
+          <tr :key="`row-${idx}`">
-              <td>{{item.name}}</td>
+            <td>{{item.name}}</td>
-              <td v-if="canGrab">
+            <td v-if="canGrab">
-                <Request :item="item.id"></Request>
+              <Request :item="item.id"></Request>
               </td>
-              <td v-if="canSell">
+            <td v-if="canSell">
-                <div class="field is-grouped is-pulled-right" v-show="is_selling">
+              <div class="field is-grouped is-pulled-right" v-show="is_selling">
-                  <div class="control">
+                <div class="control">
-                    <label class="label">
+                  <label class="label">
-                      <input type="checkbox" 
+                    <input type="checkbox" 
                         id="`item-${idx}`" 
                         :value="item.id"
                         v-model="sell_selected">
                       {{item.sell_value}} GP
                     </label>
                   </div>
-                  <PercentInput></PercentInput>
+                <PercentInput></PercentInput>
                 </div>
               </td>
             </tr>
           </template>
         </tbody>
-    </table>
+      </table>
-  </div>
+    </div>
 </template>
 
 <script>
@@ -94,6 +100,7 @@
                      sell_value: 80000 },
                 ],
                 is_selling: false,
+                is_adding: false,
                 sell_selected: [],
             };
         },

lootalot_front/src/components/ItemInput.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="container">
+<div class="container is-paddingless">
   <div class="field has-addons">
     <div class="control is-expanded" 
         :class="{'is-loading': is_loading }">
@@ -19,13 +19,18 @@
         >+</button>
       </div>
     </div>
-  <ul class="box" v-show="auto_open">
+    <div class="dropdown" :class="{'is-active': auto_open}">
-    <li v-for="(result,i) in results" :key="i"
+      <div class="dropdown-menu">
-      @click="setResult(result.name)"
+        <div class="dropdown-content">
-      >
+            <a v-for="(result,i) in results" :key="i"
-      {{ result.name }}
+              @click="setResult(result.name)"
-      </li>
+              class="dropdown-item"
-    </ul>
+              >
+              {{ result.name }}
+              </a>
+            </div>
+            </div>
+      </div>
   </div>
 </template>
 
@@ -81,3 +86,8 @@
         },
     }
 </script>
+
+<style scoped>
+    .dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
+    .dropdown { top: -0.75rem; }
+</style>

lootalot_front/src/components/Loot.vue

@@ -2,7 +2,7 @@
     <div class="card">
         <div class="card-header">
           <p class="card-header-title">
-            Nouveau loot</p>
+            Nouveau loot - {{ looted.length }} objet(s)</p>
           </div>
         <div class="card-content">
           <ItemInput @addItem="onAddItem"></ItemInput>
@@ -11,6 +11,10 @@
             {{ item }}
           </p>
           </div>
+        <div class="card-footer">
+          <a class="card-footer-item">Confirmer</a>
+          <a @click="onClose" class="card-footer-item">Annuler</a>
+          </div>
       </div>
 </template>
 
@@ -26,7 +30,10 @@
         methods: {
             onAddItem (item) {
                 this.looted.push(item);
-            }
+            },
+            onClose () {
+                this.$emit('done');
+            },
         }
 
     }