refactored grid with flex, displayed footer tabs, diplay results, toggle results display

src/components/nav/Search.vue

@@ -1,28 +1,42 @@
 <template>
   <div id="search" class="col-11">
-    <form class="" action="index.html" method="post">
-      <label htmlFor="keys">Search</label>
+    <form class="search-form">
+      <label for="keys">Search</label>
       <input
         id="keys"
         v-model="keys"
         type="text"
         placeholder="search"
+        @keydown.enter.prevent="submit"
       >
-      <input
-        id="search"
+      <span
+        v-if="!isloading"
+        class="mdi mdi-magnify"
+        title="rechercher"
+        @click.prevent="submit"
+        @keydown.enter.prevent="submit"
+      />
+      <span
+        v-else
+        class="mdi mdi-loading"
+        title="chargement"
+      />
+      <!-- <input
+        id="submit-search"
         type="submit"
         name="search"
         value="Search"
+        class="mdi mdi-magnify"
         @click.prevent="submit"
         @keyup.enter="submit"
-      >
+      > -->
     </form>
   </div>
 </template>
 
 <script>
 
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'Search',
@@ -33,7 +47,10 @@ export default {
     keys: {
       get () { return this.$store.state.Search.keys },
       set (value) { this.$store.commit('Search/setKeys', value) }
-    }
+    },
+    ...mapState({
+      isloading: state => state.Search.isloading
+    })
   },
   methods: {
     ...mapActions({