quelques améliorations

assets/css/_font.scss

+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-Light.otf") format("truetype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-LightItalic.otf") format("truetype");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-Regular.otf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-Italic.otf") format("truetype");
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-SemiBold.otf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-SemiBoldItalic.otf") format("truetype");
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-Bold.otf") format("truetype");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-BoldItalic.otf") format("truetype");
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-ExtraBold.otf") format("truetype");
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url("~assets/fonts/Montserrat-ExtraBoldItalic.otf") format("truetype");
+    font-weight: 800;
+    font-style: italic;
+}
\ No newline at end of file

assets/css/style.scss

 $link-hover-decoration: none;
 $text-muted: #a6a4b0;
+$font-family-base: Montserrat, Helvetica, Arial, serif;
 
+@import 'font';
 @import 'bootstrap';
 
 :root {

components/btnloading.vue

 <template>
-    <button type="submit" class="btn btn-primary" :disabled="isWaiting">
+    <button type="submit" class="btn btn-primary" :disabled="isWaiting || disabled">
         <span v-if="isWaiting">
             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
             Chargement...
@@ -11,7 +11,8 @@
 <script>
 export default {
     props: {
-        isWaiting: Boolean
+        isWaiting: Boolean,
+        disabled: Boolean
     }
 }
 </script>
\ No newline at end of file

components/navigation/Bar.vue

@@ -130,7 +130,7 @@ $line-color: #000;
     width: var(--size);
     height: var(--size);
     top: .8rem;
-    right: .5rem;
+    right: 0;
     font-size: 2rem;
   }
 

components/navigation/menu/Group.vue

 <template>
     <div class="mb-4">
-        <h2 class="h6 text-muted text-uppercase">{{ menu.title }}</h2>
+        <h2 class="small text-muted text-uppercase ml-4 mb-3">{{ menu.title }}</h2>
         <div class="nav navbar-nav list-group list-group-flush">
             <NuxtLink class="list-group-item list-group-item-action p-0" :to="item.path" v-for="item in menu.items" :key="item.path"><span>{{ item.title }}</span></NuxtLink>
         </div>

pages/appolo.vue

@@ -3,11 +3,8 @@
   <h2 class="display-2 text-center mb-5">Test Appolo</h2>
   <div class="row">
     <div class="col-6 m-auto text-center">
-      Hello Appolo
       <ApolloQuery :query="query">
-        <!-- The result will automatically updated -->
         <template slot-scope="{ result: { data, loading } }">
-          <!-- Some content -->
           <div v-if="loading">Loading...</div>
           <p v-else>
             {{ data }}
@@ -22,9 +19,9 @@
 <script>
 import gql from 'graphql-tag'
 
-
 export default {
   data() {
+    // Variables locales
     return {
       // Fil d'ariane
       breadcrumb: [
@@ -37,11 +34,12 @@ export default {
           active: true
         }
       ],
+      // Requête graphQL
       query: gql`{version}`
     }
   },
+  // Fonctions locales
   methods: {
-    // Fonctions locales
   },
   mounted () {
     // Mise à jour du fil d'ariane au chargement

pages/explore.vue

@@ -6,10 +6,10 @@
       <form @submit.prevent="refresh" class="mb-5">
         <div class="mb-3">
           <label for="rech" class="form-label">Votre recherche</label>
-          <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="search">
+          <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="search" :disabled="isError">
           <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
         </div>
-        <btnloading :isWaiting="$fetchState.pending"/>
+        <btnloading :isWaiting="$fetchState.pending" :disabled="isError"/>
       </form>
     </div>
   </div>
@@ -48,10 +48,10 @@
 
 <script>
 import global from "~/mixins/wotwizard"
-import btnloading from "~/components/btnloading.vue"
 
 export default {
   data() {
+    // Variables locales
     return {
       breadcrumb: [
         {
@@ -66,18 +66,19 @@ export default {
       search : ""
     }
   },
+  // Fonctions locales
   methods: {
     refresh() {
       this.query = this.WWZ_REQUEST_DETAILS(this.search)
+    },
+    isError () {
+      return (this.retour && this.retour.errors)
     }
   },
   mounted () {
     $nuxt.$emit('changeRoute',this.breadcrumb)
   },
-  mixins: [global],
-  components: {
-    btnloading
-  }
+  mixins: [global]
 }
 </script>
 

pages/index.vue

@@ -3,7 +3,7 @@
   <h2 class="display-2 text-center mb-5">Page d'accueil</h2>
   <div class="row">
     <div class="col-6 m-auto text-center">
-      <button class="btn btn-primary" @click="helloWorld($event)" data-response="I'm here !">Hello ?</button>
+      <button class="btn btn-primary mb-3" @click="helloWorld($event)" data-response="I'm here !">Hello ?</button>
       <p>{{ hello }}</p>
     </div>
   </div>
@@ -17,6 +17,7 @@
 
 export default {
   data() {
+    // Variables locales
     return {
       // Fil d'ariane
       breadcrumb: [
@@ -25,12 +26,11 @@ export default {
           active: true
         }
       ],
-      // Variable locale
       hello: ''
     }
   },
+  // Fonctions locales
   methods: {
-    // Fonctions locales
     helloWorld(e) {
       this.hello = e.target.dataset.response
     }