materialdesignicons, colors, more layout

src/App.vue

@@ -1,22 +1,32 @@
 <template>
   <div id="root">
     <header role="banner">
-      <h1
-        tabindex="0"
-      >
-        Les Guides de Paris
-      </h1>
-      <HeaderMenu />
+      <div class="wrapper">
+        <h1
+          class="site-title"
+          tabindex="0"
+        >
+          Les Guides de Paris
+        </h1>
+        <HeaderMenu />
+      </div>
     </header>
-    <section class="container center-content">
+    <section role="main-content">
       <RouterView />
     </section>
-    <footer role="search-bar" />
+    <footer role="search-bar">
+      <History />
+      <Results />
+      <Search />
+    </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 { mapState, mapActions } from 'vuex'
 
 export default {
@@ -27,7 +37,10 @@ export default {
     titleTemplate: '%s | Guides de Paris'
   },
   components: {
-    HeaderMenu
+    HeaderMenu,
+    Search,
+    Results,
+    History
   }
 }
 </script>

src/api/rest-axios.js

@@ -1,9 +1,12 @@
 import axios from 'axios'
 
+let path = 'http://' + window.location.hostname + ':8984'
+
 export const REST = axios.create({
-  baseURL: window.location.origin,
+  baseURL: path + '/gdp',
   withCredentials: true,
+  crossDomain: true,
   headers: {
-    "Content-Type": "application/json"
+    'Content-Type': 'application/json'
   }
 })

src/components/nav/HeaderMenu.vue

@@ -4,30 +4,17 @@
       <li>
         <span>Index</span>
         <ul>
-          <li>
-            <router-link to="/nominum">
-              Nominum
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/locorum">
-              Locorum
-            </router-link>
-          </li>
-          <li>
-            <router-link to="/operum">
-              Operum
-            </router-link>
-          </li>
+          <li><router-link to="/nominum">Nominum</router-link></li>
+          <li><router-link to="/locorum">Locorum</router-link></li>
+          <li><router-link to="/operum">Operum</router-link></li>
         </ul>
       </li>
+      <li><router-link to="/bibliographie">Bibliographie</router-link></li>
+      <li><a href="#">Blog</a></li>
       <li>
-        <router-link to="/bibliographie">
-          Bibliographie
-        </router-link>
-      </li>
-      <li>
-        <a href="#">Blog</a>
+        <a href="#" class="mdi mdi-login-variant" title="connexion">
+          <span class="visualy-hidden">connexion</span>
+        </a>
       </li>
     </ul>
   </nav>
@@ -45,4 +32,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

src/components/nav/History.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="history">
+    History
+  </div>
+</template>
+<script>
+export default {
+  name: 'History',
+  data: () => ({
+
+  })
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/nav/Results.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="results">
+    Results
+  </div>
+</template>
+<script>
+export default {
+  name: 'Results',
+  data: () => ({
+
+  })
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/nav/Search.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="search">
+    Search
+  </div>
+</template>
+<script>
+export default {
+  name: 'Search',
+  data: () => ({
+
+  })
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/index.js

@@ -3,6 +3,9 @@ import router from './router'
 import store from './store'
 import Meta from 'vue-meta'
 import App from './App'
+
+import 'assets/css/mdi/css/materialdesignicons.css'
+// import 'mdi/font'
 import 'assets/css/app.scss'
 
 Vue.use(Meta)

src/pages/Nominum.vue

@@ -6,13 +6,15 @@
     <h1>Nominum</h1>
   </div>
 </template>
+
 <script>
+
 export default {
   name: 'Nominum',
   data: () => ({
-
   })
 }
 </script>
+
 <style lang="scss" scoped>
 </style>

src/pages/Operum.vue

@@ -4,14 +4,39 @@
     class="full-width"
   >
     <h1>Operum</h1>
+    <span v-if="!items.length">Loading ...</span>
   </div>
 </template>
+
 <script>
+
+import { REST } from 'api/rest-axios'
+
 export default {
   name: 'Operum',
   data: () => ({
+    items: []
 
-  })
+  }),
+  beforeCreate () {
+    REST.get(`/indexOperum`, {})
+      .then(({ data }) => {
+        console.log('operum REST: data', data)
+        // if(data.length){
+        //   commit('setItems',data)
+        //   // console.log('items.length', this.items.length);
+        //   if(state.infiniteLoadingState)
+        //     state.infiniteLoadingState.loaded()
+        // }else{
+        //   if(state.infiniteLoadingState)
+        //     state.infiniteLoadingState.complete()
+        // }
+      })
+      .catch((error) => {
+        console.warn('Issue with operum', error)
+        Promise.reject(error)
+      })
+  }
 }
 </script>
 <style lang="scss" scoped>