added footer tabs

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/max-attributes-per-line': 'off',
-    'vue/no-v-html': 'off'
+    'vue/no-v-html': 'off',
+    'vue-a11y/label-has-for': 'off'
   }
 }

assets/css/app.scss

@@ -51,17 +51,54 @@ header[role="banner"]{
 section[role="main-content"]{
 
 }
-footer[role="search-bar"]{
+footer[role="tools"]{
-  #search{
+  #history{
-    color: #fff;
+    // color: #1a1a1a;
-    background-color: $bleuroi;
+    background-color: $or;
   }
   #results{
     // color: #1a1a1a;
     background-color: $gris;
   }
-  #history{
+  #footer-bottom{
-    // color: #1a1a1a;
+    #footer-tabs{
-    background-color: $or;
+      ul{
+        padding:0; margin:0;
+        display: flex;
+        flex-direction: column;
+        li{
+          flex: 1 1 auto;
+          box-sizing: border-box;
+          padding:0.3em;
+          margin:0;
+          line-height: 0.6em;
+          height:2em;
+          &.history{
+            background-color: $or;
+          }
+          &.results{
+            background-color: $gris;
+          }
+          span{
+            font-size: 0.693em;
+            font-weight: 400;
+            text-transform: uppercase;
+          }
+        }
+      }
+    }
+    #search{
+      color: #fff;
+      background-color: $bleuroi;
+      label[for="keys"]{
+        display: none;
+      }
+    }
+  }
+  h2{
+    margin:0;
+    font-size: 0.756em;
+    font-weight: 400;
+    text-transform: uppercase;
   }
 }

assets/css/base/_layout.scss

@@ -33,12 +33,12 @@ body{
     overflow-y: auto;
     overflow-x: hidden;
   }
-  footer[role="search-bar"]{
+  footer[role="tools"]{
     flex:0 0 auto;
     @extend %layout-element;
     // padding-bottom: 1em;
-    >*{
+    // >*{
-      padding:0.5em 1em;
+    //   padding:0.5em 1em;
-    }
+    // }
   }
 }

assets/css/base/_variables.scss

@@ -1,7 +1,7 @@
 $base_font_size:16px;
 
 // grid
-$default_gap: 1em;
+$default_gap: 0;
 $default_sum: 12;
 
 $small-bp:768px;

src/App.vue

@@ -14,19 +14,23 @@
     <section role="main-content">
       <RouterView />
     </section>
-    <footer role="search-bar">
+    <footer role="tools">
       <History />
       <Results />
-      <Search />
+      <div id="footer-bottom" class="row">
+        <FooterTabs />
+        <Search />
+      </div>
     </footer>
   </div>
 </template>
 
 <script>
 import HeaderMenu from './components/nav/HeaderMenu'
-import Search from './components/nav/Search'
-import Results from './components/nav/Results'
 import History from './components/nav/History'
+import Results from './components/nav/Results'
+import Search from './components/nav/Search'
+import FooterTabs from './components/nav/FooterTabs'
 // import { mapState, mapActions } from 'vuex'
 
 export default {
@@ -38,9 +42,10 @@ export default {
   },
   components: {
     HeaderMenu,
-    Search,
+    History,
     Results,
-    History
+    Search,
+    FooterTabs
   }
 }
 </script>

src/components/nav/FooterTabs.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="footer-tabs" class="col-1">
+    <ul>
+      <li class="history">
+        <span>Historique de consultation</span>
+      </li>
+      <li class="results">
+        <span>Resultas</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterTabs',
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/nav/History.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="history">
-    History
+    <h2>Historique de consultation</h2>
   </div>
 </template>
 <script>

src/components/nav/Results.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="results">
     <h2>Resultats</h2>
-    <h3>{{ keys }}</h3>
+    <h3 v-if="keys">{{ keys }}</h3>
     <div class="results-list">
       <ul v-if="results.length">
         <li v-for="result in results" :key="result.uuid">

src/components/nav/Search.vue

@@ -1,15 +1,13 @@
 <template>
-  <div id="search">
+  <div id="search" class="col-11">
     <form class="" action="index.html" method="post">
-      <label for="keys">
+      <label htmlFor="keys">Search</label>
-        Search
+      <input
-        <input
+        id="keys"
-          id="keys"
+        v-model="keys"
-          v-model="keys"
+        type="text"
-          type="text"
+        placeholder="search"
-          placeholder="search"
+      >
-        >
-      </label>
       <input
         id="search"
         type="submit"