From c9e7a335c1c73867c2449d1a1d4fa2f94bf0c4c1 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Fri, 20 Sep 2019 12:17:46 +0200
Subject: [PATCH] added footer tabs

---
 .eslintrc.js                      |  3 +-
 assets/css/app.scss               | 51 ++++++++++++++++++++++++++-----
 assets/css/base/_layout.scss      |  8 ++---
 assets/css/base/_variables.scss   |  2 +-
 src/App.vue                       | 17 +++++++----
 src/components/nav/FooterTabs.vue | 24 +++++++++++++++
 src/components/nav/History.vue    |  2 +-
 src/components/nav/Results.vue    |  2 +-
 src/components/nav/Search.vue     | 18 +++++------
 9 files changed, 96 insertions(+), 31 deletions(-)
 create mode 100644 src/components/nav/FooterTabs.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 1fcc320..1a0b350 100644
--- a/.eslintrc.js
+++ b/.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'
   }
 }
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 9672612..c40d03c 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -51,17 +51,54 @@ header[role="banner"]{
 section[role="main-content"]{
 
 }
-footer[role="search-bar"]{
-  #search{
-    color: #fff;
-    background-color: $bleuroi;
+footer[role="tools"]{
+  #history{
+    // color: #1a1a1a;
+    background-color: $or;
   }
   #results{
     // color: #1a1a1a;
     background-color: $gris;
   }
-  #history{
-    // color: #1a1a1a;
-    background-color: $or;
+  #footer-bottom{
+    #footer-tabs{
+      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;
   }
 }
diff --git a/assets/css/base/_layout.scss b/assets/css/base/_layout.scss
index 144b9c0..4d75ca5 100644
--- a/assets/css/base/_layout.scss
+++ b/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;
+    // }
   }
 }
diff --git a/assets/css/base/_variables.scss b/assets/css/base/_variables.scss
index 27c3e43..0bd322d 100644
--- a/assets/css/base/_variables.scss
+++ b/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;
diff --git a/src/App.vue b/src/App.vue
index 8c44152..47a3926 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/nav/FooterTabs.vue b/src/components/nav/FooterTabs.vue
new file mode 100644
index 0000000..5879153
--- /dev/null
+++ b/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>
diff --git a/src/components/nav/History.vue b/src/components/nav/History.vue
index 8eabe08..c089540 100644
--- a/src/components/nav/History.vue
+++ b/src/components/nav/History.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="history">
-    History
+    <h2>Historique de consultation</h2>
   </div>
 </template>
 <script>
diff --git a/src/components/nav/Results.vue b/src/components/nav/Results.vue
index 1225274..ce67f3f 100644
--- a/src/components/nav/Results.vue
+++ b/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">
diff --git a/src/components/nav/Search.vue b/src/components/nav/Search.vue
index 281380b..bf8b92a 100644
--- a/src/components/nav/Search.vue
+++ b/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">
-        Search
-        <input
-          id="keys"
-          v-model="keys"
-          type="text"
-          placeholder="search"
-        >
-      </label>
+      <label htmlFor="keys">Search</label>
+      <input
+        id="keys"
+        v-model="keys"
+        type="text"
+        placeholder="search"
+      >
       <input
         id="search"
         type="submit"