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

src/components/nav/FooterTabs.vue

@@ -2,21 +2,46 @@
   <div id="footer-tabs" class="col-1">
     <ul>
       <li class="history">
-        <span>Historique de consultation</span>
+        <div class="wrapper">
+          <span>Historique de consultation</span>
+        </div>
       </li>
       <li class="results">
-        <span>Resultas</span>
+        <div class="wrapper">
+          <span
+            v-if="resultsItems.length && !resultsOpened"
+            title="Ouvrir les resultats"
+            @click.prevent="openResults"
+            @keydown.enter.prevent="openResults"
+          >
+            Resultas
+          </span>
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+
+import { mapState } from 'vuex'
+
 export default {
   name: 'FooterTabs',
-  data: () => ({
-
-  })
+  computed: {
+    resultsOpened: {
+      get () { return this.$store.state.Search.opened },
+      set (value) { this.$store.commit('Search/setOpened', value) }
+    },
+    ...mapState({
+      resultsItems: state => state.Search.results
+    })
+  },
+  methods: {
+    openResults () {
+      this.resultsOpened = true
+    }
+  }
 }
 </script>
 

src/components/nav/Results.vue

@@ -1,16 +1,33 @@
 <template>
-  <div id="results">
-    <h2>Resultats</h2>
-    <h3 v-if="keys">{{ keys }}</h3>
-    <div class="results-list">
-      <ul v-if="results.length">
-        <li v-for="result in results" :key="result.uuid">
-          <ResultItem :result="result" />
-        </li>
-      </ul>
+  <transition name="fade-roll">
+    <div
+      v-if="opened"
+      id="results"
+      class="row"
+    >
+      <section class="col-1">
+        <h2>Resultats</h2>
+        <span class="results-count">{{ results.length }} resultat(s)</span>
+      </section>
+      <section class="col-10 results-list">
+        <div class="wrapper">
+          <ul v-if="results.length">
+            <li v-for="result in results" :key="result.uuid" class="result">
+              <ResultItem :result="result" />
+            </li>
+          </ul>
+        </div>
+      </section>
+      <section class="col-1 tools">
+        <span
+          class="mdi mdi-close"
+          title="close"
+          @click.prevent="close"
+          @keydown.enter.prevent="close"
+        />
+      </section>
     </div>
-
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -23,14 +40,21 @@ export default {
   components: {
     ResultItem
   },
-  data: () => ({
-
-  }),
   computed: {
+    opened: {
+      get () { return this.$store.state.Search.opened },
+      set (value) { this.$store.commit('Search/setOpened', value) }
+    },
     ...mapState({
       keys: state => state.Search.keys,
       results: state => state.Search.results
     })
+  },
+  methods: {
+    close () {
+      console.log('clicked on close results')
+      this.opened = false
+    }
   }
 }
 </script>

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({