Client/inventory WIP (#8527)

* some stable work and faster less recompilation

*  user with zero tasks can use the app

* wip work to show loading status of resources

* revert changes to sync

website/client/components/inventory/index.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .row
   .sixteen.wide.column
-    .ui.secondary.menu
+    .ui.secondary.menu.center-content
       router-link.item(:to="{name: 'inventory'}", exact)
         span(v-once) {{ $t('inventory') }}
       router-link.item(:to="{name: 'equipment'}")

website/client/components/inventory/stable.vue

@@ -1,31 +1,84 @@
 <template lang="pug">
 .ui.grid
-  .four.wide.column
-    h2 Pets
-    ul
-      li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
+  .three.wide.column
+    .ui.left.icon.input
+      i.search.icon
+      input(type="text", :placeholder="$t('search')")
+    h3(v-once) {{ $t('filter') }}
+
+    .ui.form
+      .field
+        .ui.checkbox
+          input(type='checkbox')
+          label.label-primary(v-once) {{ $t('pets') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('hatchingPotions') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('quest') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('special') }}
+      .field
+        .ui.checkbox
+          input(type='checkbox')
+          label.label-primary(v-once) {{ $t('mounts') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('hatchingPotions') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('quest') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('special') }}
+
+  .thirteen.wide.column
+    h2 Pets
+    .inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
+      .PixelPaw
 
-  .four.wide.column
     h2 Magic Potions Pets
     ul
       li(v-for="pet in listAnimals('pet', content.dropEggs, content.premiumHatchingPotions)") {{pet}}
 
-  .four.wide.column
     h2 Quest Pets
     ul
       li(v-for="pet in listAnimals('pet', content.questEggs, content.dropHatchingPotions)") {{pet}}
 
-  //.four.wide.column
     h2 Rare Pets
     ul
       li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
 
-    ul.row Mounts
-    ul.row Quest Mounts
-    ul.row Rare Mounts
+    h2 Mounts
+    h2 Quest Mounts
+    h2 Rare Mounts
 
 </template>
 
+<style>
+.label-primary {
+  font-weight: bold;
+}
+
+.nested-field {
+  padding-left: 1.5rem;
+}
+
+.inventory-item-container {
+  padding: 20px;
+  border: 1px solid;
+  display: inline-block;
+}
+</style>
+
 <script>
 import { mapState } from '../../store';
 import each from 'lodash/each';