From 654956d8e518bf1cbe29efff7356afab323afdd9 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Thu, 16 Dec 2021 14:46:13 +0100
Subject: [PATCH] POC improvements
---
assets/css/style.scss | 22 +++++++
components/btn/Theme.vue | 12 +---
components/navigation/Bar.vue | 42 ++-----------
components/navigation/Breadcrumb.vue | 2 +-
components/navigation/Loader.vue | 11 ++++
components/navigation/menu/Group.vue | 2 +-
components/navigation/menu/Sidebar.vue | 2 +-
layouts/default.vue | 26 --------
mixins/wotwizard.js | 36 -----------
nuxt.config.js | 4 ++
pages/appolo.vue | 31 +++++++---
pages/explore.vue | 85 -------------------------
pages/hash/_hash.vue | 86 ++++----------------------
pages/test.vue | 48 --------------
store/README.md | 10 ---
15 files changed, 79 insertions(+), 340 deletions(-)
create mode 100644 components/navigation/Loader.vue
delete mode 100644 mixins/wotwizard.js
delete mode 100644 pages/explore.vue
delete mode 100644 pages/test.vue
delete mode 100644 store/README.md
diff --git a/assets/css/style.scss b/assets/css/style.scss
index b402489..5a6a721 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,7 +1,29 @@
+// 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
diff --git a/components/btn/Theme.vue b/components/btn/Theme.vue
index cb98626..19b479c 100644
--- a/components/btn/Theme.vue
+++ b/components/btn/Theme.vue
@@ -1,10 +1,10 @@
<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);
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 6fb9982..70f17e5 100644
--- a/components/navigation/Bar.vue
+++ b/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;
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index e5d6383..6e40c09 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
new file mode 100644
index 0000000..d04b8f2
--- /dev/null
+++ b/components/navigation/Loader.vue
@@ -0,0 +1,11 @@
+<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
diff --git a/components/navigation/menu/Group.vue b/components/navigation/menu/Group.vue
index 54812d3..9718576 100644
--- a/components/navigation/menu/Group.vue
+++ b/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>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index d76a2ae..35092ee 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -1,5 +1,5 @@
<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"> Wotwizard</h1></nuxt-link>
<button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">
diff --git a/layouts/default.vue b/layouts/default.vue
index 37ec8bd..35fe300 100644
--- a/layouts/default.vue
+++ b/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
diff --git a/mixins/wotwizard.js b/mixins/wotwizard.js
deleted file mode 100644
index 1d3119a..0000000
--- a/mixins/wotwizard.js
+++ /dev/null
@@ -1,36 +0,0 @@
-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
diff --git a/nuxt.config.js b/nuxt.config.js
index 1c3d5d5..80b72ab 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -59,6 +59,10 @@ export default {
},
},
+ router: {
+ linkActiveClass: 'active'
+ },
+
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
diff --git a/pages/appolo.vue b/pages/appolo.vue
index 491fe2d..c4c3712 100644
--- a/pages/appolo.vue
+++ b/pages/appolo.vue
@@ -1,22 +1,22 @@
<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
diff --git a/pages/explore.vue b/pages/explore.vue
deleted file mode 100644
index b6651fe..0000000
--- a/pages/explore.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<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
diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue
index 82dc6d4..db76383 100644
--- a/pages/hash/_hash.vue
+++ b/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";
diff --git a/pages/test.vue b/pages/test.vue
deleted file mode 100644
index 4071e11..0000000
--- a/pages/test.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<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>
diff --git a/store/README.md b/store/README.md
deleted file mode 100644
index 1972d27..0000000
--- a/store/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# 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).
--
GitLab