adds basic 'views' concept for main content

lootalot_front/src/components/Chest.vue

@@ -2,10 +2,10 @@
   <table class="table is-fullwidth is-striped">
     <thead>
       <tr>
-        <th>Objets</th>
+        <th width="100%">Objets</th>
         <th>Valeur</th>
         <th>
-          <div v-show="perms.canSell" class="buttons is-right" :class="{'has-addons': is_selling}">
+          <div v-show="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
             <button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
               @click="is_selling = !is_selling">
               <span class="icon"><i class="fas fa-coins"></i></span>
@@ -31,12 +31,12 @@
               @claim="(data) => $emit('claim', data)"
               @unclaim="(data) => $emit('unclaim', data)">
             </Request>
-            <div v-show="is_selling || perms.canBuy" class="field is-grouped is-pulled-right" >
+            <div v-show="is_selling || perms.canBuy" class="field is-grouped">
               <input type="checkbox" class="checkbox"
                 id="`select-${idx}`"
                 :value="item.id"
                 v-model="selected_items">
-              <label for="`select-${idx}`">
+              <label for="`select-${idx}`" class="label" style="padding: 0 1em;">
                   {{item.base_price / 2}} GP
               </label>
               <PercentInput></PercentInput>
@@ -95,5 +95,6 @@
 </script>
 
 <style scoped>
-    .table td, .table th { vertical-align: bottom; }
+    .table td, .table th { vertical-align: middle; }
+    .buttons { flex-wrap: nowrap; }
 </style>