POC improvements

assets/css/style.scss

+// Bootstrap variables customisation
+// Fonts & Typo
 $link-hover-decoration: none;
 $text-muted: #a6a4b0;
 $enable-responsive-font-sizes: true;
 $font-family-base: Montserrat, Helvetica, Arial, serif;
 
+// Body
+$body-bg: var(--background-color-primary);
+$body-color: var(--text-primary-color);
+
+// Tables
+$table-bg: var(--text-primary-color);
+$table-color: var(--background-color-primary);
+$table-head-bg: red;
+
+// Breadcrumb
+$breadcrumb-bg: var(--background-color-secondary);
+$breadcrumb-active-color: var(--text-primary-color);
+$breadcrumb-divider-color: var(--text-primary-color);
+
+// List-groups
+$list-group-bg: var(--background-color-primary);
+$list-group-action-active-bg: transparent;
+$list-group-hover-bg: transparent;
+$list-group-action-color: var(--text-primary-color);
+
 @import 'font';
 @import 'bootstrap';
\ No newline at end of file

components/btn/Theme.vue

 <template>
   <div>
     <input @change="toggleTheme" id="checkbox" type="checkbox" class="switch-checkbox" />
-    <label for="checkbox" class="switch-label">
+    <label for="checkbox" class="switch-label d-flex align-items-center justify-content-between position-relative mb-0 ">
       <span>🌙</span>
       <span>☀️</span>
-      <div class="switch-toggle" :class="{ 'switch-toggle-checked': userTheme === 'dark-theme' }"></div>
+      <div class="switch-toggle position-absolute rounded-circle" :class="{ 'switch-toggle-checked': userTheme === 'dark-theme' }"></div>
     </label>
   </div>
 </template>
@@ -62,27 +62,19 @@ export default {
 }
 
 .switch-label {
-  align-items: center;
   background: var(--text-primary-color);
-  border: calc(var(--element-size) * 0.025) solid var(--accent-color);
   border-radius: var(--element-size);
   cursor: pointer;
-  display: flex;
   font-size: calc(var(--element-size) * 0.3);
   height: calc(var(--element-size) * 0.35);
-  position: relative;
   padding: calc(var(--element-size) * 0.1);
   transition: background 0.5s ease;
-  justify-content: space-between;
   width: var(--element-size);
   z-index: 1;
-  margin-bottom: 0;
 }
 
 .switch-toggle {
-  position: absolute;
   background-color: var(--background-color-primary);
-  border-radius: 50%;
   top: calc(var(--element-size) * 0.07);
   left: calc(var(--element-size) * 0.07);
   height: calc(var(--element-size) * 0.4);

components/navigation/Bar.vue

@@ -5,7 +5,7 @@
       <NavigationBreadcrumb :breadcrumb="breadcrumb" class="breadcrumb p-1" />
     </div>
     <NavigationMenuSidebar @toggleMenu="toggleMenu" :menus="menus" />
-    <div class="bg_overlay" @click="toggleMenu"></div>
+    <div class="bg_overlay position-fixed" @click="toggleMenu"></div>
   </header>
 </template>
 
@@ -24,28 +24,15 @@ export default {
 </script>
 
 <style lang="scss">
-$bg-menu: #fff;
 $btn-width: 50px;
-$line-color: #000;
 
 nav.breadcrumb {
   margin: .5rem .5rem .5rem 5rem;
-  justify-content: space-between;
-  align-items: center;
 
   a {color: var(--text-primary-color)}
 
-  .breadcrumb-item {
-    &.active {
-      color: var(--text-primary-color);
+  .breadcrumb-item.active {
       opacity: .7;
-    }
-
-    & + .breadcrumb-item::before {color: var(--text-primary-color)}
-  }
-
-  &, .breadcrumb {
-    background-color: var(--background-color-secondary);
   }
 }
 
@@ -102,9 +89,8 @@ nav.breadcrumb {
 }
 
 .menu {
-  width: var(--menu-size);
   background: var(--background-color-primary);
-  position: fixed;
+  width: var(--menu-size);
   top: 0;
   z-index: 1200;
   height: 100vh;
@@ -117,26 +103,9 @@ nav.breadcrumb {
 
   h1 {color: var(--text-primary-color);}
 
-  .list-group-item {
-    background-color: var(--background-color-primary);
-
-    &-action {
-      color: var(--text-primary-color);
-    }
-
-    &.nuxt-link-active {
-      z-index: 2;
-      color: #fff;
-      background-color: var(--primary);
-      border-color: var(--primary);
-    }
-
-    span {
+  .list-group-item div {
       transition: left .3s ease-in-out;
-      display: block;
-      position: relative;
       left: 0;
-      padding: 0.75rem 1.25rem;
 
       &::before {
         content: "›";
@@ -148,7 +117,6 @@ nav.breadcrumb {
         left: .5em;
       }
     }
-  }
 
   .open & {
     left: 0;
@@ -169,13 +137,11 @@ nav.breadcrumb {
 }
 
 .bg_overlay {
-  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 120vh;
   z-index: 1100;
-  display: block;
   visibility: hidden;
   opacity: 0;
   transition: all .5s ease;

components/navigation/Breadcrumb.vue

 <template>
-    <nav aria-label="breadcrumb">
+    <nav aria-label="Fil d'Ariane" class="justify-content-between align-items-center">
       <ol class="breadcrumb m-0">
           <li class="breadcrumb-item" :class="{ 'active': item.active }" :aria-current="item.active ? 'page' : null" v-for="item in breadcrumb" :key="item.text">
               <NuxtLink :to="item.to" v-if="item.to">{{ item.text }}</NuxtLink>

components/navigation/Loader.vue

+<template>
+  <div class="spinner-border text-primary mx-auto" role="status" v-if="isLoading">
+    <span class="sr-only">Chargement...</span>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {isLoading: Boolean}
+}
+</script>
\ No newline at end of file

components/navigation/menu/Group.vue

@@ -2,7 +2,7 @@
     <div class="mb-4">
         <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>
+            <NuxtLink class="list-group-item list-group-item-action" :to="item.path" v-for="item in menu.items" :key="item.path"><div class="position-relative">{{ item.title }}</div></NuxtLink>
         </div>
     </div>
 </template>

components/navigation/menu/Sidebar.vue

 <template>
-    <aside class="menu shadow">
+    <aside class="menu shadow position-fixed">
         <div class="nav_header border-bottom pb-3 mb-5">
             <nuxt-link to="/"><h1 class="h2 d-flex"><img src="@/assets/img/logo.png" alt="Accueil" class="logo">&nbsp;Wotwizard</h1></nuxt-link>
             <button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">

layouts/default.vue

@@ -14,10 +14,8 @@ export default {
           {
           title: 'Développement',
           items : [
-              {path: '/explore',title: 'Explorer la toile de confiance'},
               {path: '/appolo',title: 'Appolo'},
               {path: '/chartjs',title: 'ChartJS'},
-              {path: '/test',title: 'Test'}
           ]},
           {
           title: 'Un menu',
@@ -40,8 +38,6 @@ export default {
 /* Define styles for the default root window element */
 :root {
   --text-primary-color: var(--dark);
-  --text-secondary-color: var(--white);
-  --accent-color: var(--light);
   --background-color-primary: var(--white);
   --background-color-secondary: #e9ecef;
   --element-size: 4rem;
@@ -51,33 +47,11 @@ export default {
 /* Define styles for the root window with dark - mode preference */
 :root.dark-theme {
   --text-primary-color: var(--white);
-  --text-secondary-color: var(--dark);
-  --accent-color: var(--dark);
   --background-color-primary: var(--dark);
   --background-color-secondary: hsl(210, 16%, 60%);
 }
 
-body {
-  background-color: var(--background-color-primary);
-  color: var(--text-primary-color);
-}
-
 .app {
     transition: margin .5s ease-in-out;
 }
-
-.table.striped tbody {
-    tr {
-        opacity: .9;
-        cursor: pointer;
-
-        &:nth-child(2n+1) {
-            opacity: .7;
-        }
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-}
 </style>
\ No newline at end of file

mixins/wotwizard.js

-export default {
-    data() {
-        return {
-            WWZ_URL : "https://wwgql.coinduf.eu",
-            WWZ_REQUEST_VERSION : "{version}",
-            query: "",
-            retour: null,
-            isError: false
-        }
-    },
-    methods: {
-        WWZ_REQUEST_IDS(hint) { return `{idSearch(with:{hint:\\"${hint}\\"}){ids{uid}}}` },
-        WWZ_REQUEST_DETAILS(hint) { return `{idSearch(with:{hint:\\"${hint}\\"}){ids{pubkey,uid,status}}}` },
-    },
-    async fetch() {
-        if (this.query != "") {
-            this.retour = await fetch(this.WWZ_URL, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: '{"query":"' + this.query + '"}'
-            }).then((res) => {
-                return res.json()
-            }).catch((error) => {
-                this.isError = true
-                return {errors: error}
-            })
-        }
-    },
-    watch: {
-      query : function() {
-        this.$fetch()
-      }
-    }
-}
\ No newline at end of file

nuxt.config.js

@@ -59,6 +59,10 @@ export default {
     },
   },
 
+  router: {
+    linkActiveClass: 'active'
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
   }

pages/appolo.vue

 <template>
 <main class="content">
   <h2 class="display-2 text-center mb-5">Test Appolo</h2>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-6 m-auto text-center">
       <p>Cette page uilise la bibliothèque <a href="https://apollo.vuejs.org/" target="_blank">Apollo</a> pour requêter graphQL</p>
       <p>Le endpoint se configure dans le fichier <code>./nuxt.config.js</code></p>
       <p>Il est possible de <a href="https://apollo.vuejs.org/guide/components/query.html#query-with-gql-files" target="_blank">mettre les requêtes dans des fichiers séparés</a> et de faire <a href="https://apollo.vuejs.org/guide/apollo/pagination.html" target="_blank">de la pagination</a></p>
-      <input type="text" v-model="param" class="mb-4">
+      <label for="rech" class="form-label">Votre recherche</label>
+      <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="param" autocomplete="off">
+      <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
     </div>
   </div>
-  <div class="spinner-border text-primary mx-auto d-block mb-3" role="status" v-if="$apollo.queries.idSearch.loading">
-    <span class="sr-only">Loading...</span>
-  </div>
+  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
   <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
     <div class="col-8 m-auto">
       <div class="table-responsive">
         <table class="table striped">
-          <thead class="thead-light">
+          <thead>
             <tr>
               <th scope="col">UID</th>
               <th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
@@ -25,6 +25,7 @@
           </thead>
           <tbody>
             <tr v-for="member in idSearch.ids" :key="member.uid"
+              @click="redirect('/hash/' + member.hash)"
               :class="{
                 'table-danger' : member.status == 'REVOKED',
                 'table-success' : member.status == 'MEMBER',
@@ -32,7 +33,7 @@
                 'table-warning' : member.status == 'MISSING',
             }">
               <th scope="row">{{ member.uid }}</th>
-              <td class="d-none d-xl-table-cell"><a :href="'/hash/' + member.hash">{{ member.pubkey }}</a></td>
+              <td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
               <td class="d-none d-sm-table-cell">{{ member.status }}</td>
             </tr>
           </tbody>
@@ -62,12 +63,14 @@ export default {
         }
       ],
       // Requête graphQL
-      query: gql`{version}`,
-      param: '4Fge',
+      param: '',
     }
   },
   // Fonctions locales
   methods: {
+    redirect(path) {
+      this.$router.push({ path: path })
+    }
   },
   apollo: {
     idSearch : {
@@ -95,5 +98,15 @@ export default {
 
 <style lang="sass" scoped>
 // CSS Lié au composant
+.table.striped tbody
+  color: var(--dark)
+  tr
+    opacity: .9
+    cursor: pointer
+
+  &:nth-child(2n+1)
+    opacity: .7
 
+  &:hover
+    opacity: 1
 </style>
\ No newline at end of file

pages/explore.vue

-<template>
-<main class="container-fluid">
-  <h2 class="display-2 text-center mb-5">Explorer avec fetch</h2>
-  <div class="row">
-    <div class="col-6 m-auto">
-      <p>Cette page uilise le script <code>/mixins/wotwizard.js</code> pour requêter graphQL. Il faut privilégier Apollo car ce script est amené à disparaître au profit d'Apollo.</p>
-      <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" :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" :disabled="isError"/>
-      </form>
-    </div>
-  </div>
-  <div class="row" v-if="retour && !$fetchState.pending">
-    <div class="col-8 m-auto">
-      <p v-if="retour.errors" class="alert alert-danger">{{ retour.errors }}</p>
-      <div class="table-responsive" v-else>
-        <table class="table striped">
-          <thead class="thead-light">
-            <tr>
-              <th scope="col">UID</th>
-              <th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
-              <th scope="col" class="d-none d-sm-table-cell">STATUS</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="member in retour.data.idSearch.ids" :key="member.uid"
-              :class="{
-                'table-danger' : member.status == 'REVOKED',
-                'table-success' : member.status == 'MEMBER',
-                'table-info' : member.status == 'NEWCOMER',
-                'table-warning' : member.status == 'MISSING',
-            }">
-              <th scope="row">{{ member.uid }}</th>
-              <td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
-              <td class="d-none d-sm-table-cell">{{ member.status }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</main>
-</template>
-
-<script>
-import global from "~/mixins/wotwizard"
-
-export default {
-  data() {
-    // Variables locales
-    return {
-      breadcrumb: [
-        {
-          text: 'Accueil',
-          to: "/"
-        },
-        {
-          text: 'Explorer la wot',
-          active: true
-        }
-      ],
-      search : ""
-    }
-  },
-  // Fonctions locales
-  methods: {
-    refresh() {
-      if (this.search != "") {this.query = this.WWZ_REQUEST_DETAILS(this.search)}
-    }
-  },
-  mounted () {
-    $nuxt.$emit('changeRoute',this.breadcrumb)
-  },
-  mixins: [global]
-}
-</script>
-
-<style lang="sass" scoped>
-// CSS Lié au composant
-
-</style>
\ No newline at end of file

pages/hash/_hash.vue

@@ -3,8 +3,7 @@
     <div
       class="spinner-border text-primary mx-auto d-block mb-3"
       role="status"
-      v-if="$apollo.queries.idFromHash.loading"
-    >
+      v-if="$apollo.queries.idFromHash.loading">
       <span class="sr-only">Loading...</span>
     </div>
     <div v-if="!$apollo.queries.idFromHash.loading">
@@ -13,78 +12,16 @@
         <div class="col-8 m-auto">
           <div class="table-responsive">
             <table class="table striped">
-              <tr>
-                <td>uid</td>
-                <td>{{ idFromHash.uid }}</td>
-              </tr>
-              <tr>
-                <td>pubkey</td>
-                <td>{{ idFromHash.pubkey }}</td>
-              </tr>
-              <tr>
-                <td>status</td>
-                <td>{{ idFromHash.status }}</td>
-              </tr>
-              <tr>
-                <td>membership_pending</td>
-                <td>{{ idFromHash.membership_pending }}</td>
-              </tr>
-              <tr>
-                <td>membership_pending_block</td>
-                <td>{{ idFromHash.membership_pending_block }}</td>
-              </tr>
-              <tr>
-                <td>membership_pending_limitDate</td>
-                <td>{{ idFromHash.membership_pending_limitDate }}</td>
-              </tr>
-              <tr>
-                <td>id_written_block</td>
-                <td>{{ idFromHash.id_written_block.number }}</td>
-              </tr>
-              <tr>
-                <td>lastApplication</td>
-                <td>{{ idFromHash.lastApplication.number }}</td>
-              </tr>
-              <tr>
-                <td>limitDate</td>
-                <td>{{ idFromHash.limitDate }}</td>
-              </tr>
-              <tr>
-                <td>isLeaving</td>
-                <td>{{ idFromHash.isLeaving }}</td>
-              </tr>
-              <tr>
-                <td>sentry</td>
-                <td>{{ idFromHash.sentry }}</td>
-              </tr>
-              <tr>
-                <td>received_certifications</td>
-                <td>{{ idFromHash.received_certifications.limit }}</td>
-              </tr>
-              <tr>
-                <td>distance</td>
-                <td>{{ idFromHash.distance.value.ratio }}</td>
-              </tr>
-              <tr>
-                <td>distanceE</td>
-                <td>{{ idFromHash.distanceE.value.ratio }}</td>
-              </tr>
-              <tr>
-                <td>quality</td>
-                <td>{{ idFromHash.quality.ratio }}</td>
-              </tr>
-              <tr>
-                <td>qualityE</td>
-                <td>{{ idFromHash.qualityE.ratio }}</td>
-              </tr>
-              <tr>
-                <td>minDate</td>
-                <td>{{ idFromHash.minDate }}</td>
-              </tr>
-              <tr>
-                <td>minDatePassed</td>
-                <td>{{ idFromHash.minDatePassed }}</td>
-              </tr>
+              <thead>
+                <th>Champ</th>
+                <th>Valeur</th>
+              </thead>
+              <tbody>
+                <tr v-for="(value, propertyName) in idFromHash" :key="propertyName">
+                  <td>{{ propertyName }}</td>
+                  <td>{{ value }}</td>
+                </tr>
+              </tbody>
             </table>
           </div>
         </div>
@@ -93,7 +30,6 @@
   </main>
 </template>
 
-
 <script>
 import gql from "graphql-tag";
 

pages/test.vue

-<template>
-  <main class="container-fluid">
-    <h1>Hello Nuxters! 👋</h1>
-    <p>
-      This page is rendered on the <strong>{{ rendering }}</strong>
-    </p>
-    <p v-if="rendering === 'server'">
-      First load or hard refresh is done on server side.
-    </p>
-    <p v-if="rendering === 'client'">Navigation is done on client side.</p>
-    <ul>
-      <li>Refresh the page for server side rendering.</li>
-      <li>Click the links to see client side rendering.</li>
-    </ul>
-    <NuxtLink to="/">Home Page</NuxtLink>
-  </main>
-</template>
-
-<script>
-export default {
-  data() {
-    // Variables locales
-    return {
-      // Fil d'ariane
-      breadcrumb: [
-        {
-          text: 'Accueil',
-          to: "/"
-        },
-        {
-          text: 'Test',
-          active: true
-        }
-      ],
-      hello: ''
-    }
-  },
-  asyncData() {
-    return {
-      rendering: process.server ? 'server' : 'client'
-    }
-  },
-  mounted () {
-    // Mise à jour du fil d'ariane au chargement
-    $nuxt.$emit('changeRoute',this.breadcrumb)
-  }
-}
-</script>

store/README.md

-# STORE
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-
-Creating a file in this directory automatically activates the option in the framework.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).