diff --git a/assets/css/style.scss b/assets/css/style.scss
index 89754ed3a728b69fb076c53356e6dd562049e99d..81bc9407aa4b73a14c2e56b29b137f2150072a5e 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -101,3 +101,7 @@ $info: #0a8299;
max-width: 205px;
}
}
+
+.icon {
+ width: 1.15rem;
+}
diff --git a/assets/img/clipboard.svg b/assets/img/clipboard.svg
deleted file mode 100644
index e2d46666b3788d14b7f97ee7890a63a92a6cfefc..0000000000000000000000000000000000000000
--- a/assets/img/clipboard.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2S9.6,0.8,9.2,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4 C21,2.9,20.1,2,19,2z M12,2c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1s-1-0.4-1-1C11,2.4,11.4,2,12,2z M19,20H5V4h2v2h10V4h2V20z"/></svg>
\ No newline at end of file
diff --git a/assets/img/favori_add.png b/assets/img/favori_add.png
deleted file mode 100644
index b0e2bf740cb17aa0ebe47367fdf1a4a66c6aff45..0000000000000000000000000000000000000000
Binary files a/assets/img/favori_add.png and /dev/null differ
diff --git a/assets/img/favori_remove.png b/assets/img/favori_remove.png
deleted file mode 100644
index 584d636ceddc432ac0251065ba63fdf3a0d5c1cf..0000000000000000000000000000000000000000
Binary files a/assets/img/favori_remove.png and /dev/null differ
diff --git a/components/badge/Danger.vue b/components/badge/Danger.vue
index 786e21df2176dda1812f8ba13bf73cc5e84ae67d..13bc0238e6a68877bd7e1109275a42b66fa55b62 100644
--- a/components/badge/Danger.vue
+++ b/components/badge/Danger.vue
@@ -7,7 +7,7 @@
$options.filters.dateStatus(limitDate) != 'success' &&
['MEMBER', 'MISSING'].includes(memberStatus)
"
- >âš
+ ><outline-exclamation-icon class="icon" />
<span class="sr-only" v-if="title">{{ title }}</span>
</span>
</template>
diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue
index 121b4f5e0a0361bc61182bb4b88a48e08ead3680..005368a11257051e4784aa5ba08c5ad47ba21d7a 100644
--- a/components/btn/Clipboard.vue
+++ b/components/btn/Clipboard.vue
@@ -3,9 +3,11 @@
<div class="input-group-prepend">
<button
id="btncopy"
- class="btn btn-outline-secondary px-4 py-1"
+ class="btn btn-secondary px-4 py-1"
type="button"
- @click="copyText"></button>
+ @click="copyText">
+ <outline-clipboard-copy-icon class="icon" />
+ </button>
</div>
<input
type="text"
@@ -42,10 +44,5 @@ export default {
<style lang="scss">
.clipboard {
max-width: 500px;
-
- button {
- background: url("~assets/img/clipboard.svg") no-repeat 50% 50% #fff;
- background-size: 40%;
- }
}
</style>
diff --git a/components/btn/Pagination.vue b/components/btn/Pagination.vue
index 63feac36423e222ae3b3d7af2c04d127c7db5433..ae53984041c24d2c15b7d97d8f09dc3e8857807a 100644
--- a/components/btn/Pagination.vue
+++ b/components/btn/Pagination.vue
@@ -3,7 +3,7 @@
<button
class="btn"
:class="{
- 'btn-primary': currentPage > 1,
+ 'btn-info': currentPage > 1,
'btn-secondary': currentPage == 1
}"
@click="prevPage"
@@ -16,7 +16,7 @@
<button
class="btn"
:class="{
- 'btn-primary': currentPage * pageSize < arrayLength,
+ 'btn-info': currentPage * pageSize < arrayLength,
'btn-secondary': currentPage * pageSize >= arrayLength
}"
@click="nextPage"
diff --git a/components/btn/Search.vue b/components/btn/Search.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18c94c82e7d10136d3e91395214e81eb5f5a4569
--- /dev/null
+++ b/components/btn/Search.vue
@@ -0,0 +1,36 @@
+<template>
+ <div>
+ <div class="input-group mb-3">
+ <div class="input-group-prepend">
+ <span class="input-group-text"
+ ><outline-search-icon class="icon"
+ /></span>
+ </div>
+ <input
+ type="text"
+ class="form-control"
+ :value="value"
+ autocomplete="off"
+ @input="$emit('input', $event.target.value)"
+ :placeholder="$t('recherche.title')"
+ :aria-label="$t('recherche.title')"
+ aria-describedby="rechHelp" />
+ </div>
+ <small v-if="help" id="rechHelp" class="form-text text-muted text-center">{{
+ help
+ }}</small>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ value: {
+ type: String
+ },
+ help: {
+ type: String
+ }
+ }
+}
+</script>
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
index e178f0443405b82e70eabe4480cf9a712bf43343..e8c2c7203b6bb2d84acc4ee50df51ccf28bd3679 100644
--- a/components/btn/Sort.vue
+++ b/components/btn/Sort.vue
@@ -1,26 +1,13 @@
<template>
- <button
- class="px-1 py-2 w-100 h-100 d-flex align-items-center justify-content-center">
- <span>{{ title }}</span>
- <span class="ml-2 d-flex flex-column">
- <span
- class="up"
- :class="{
- sorted: currentSortDir == 'desc' && currentSort == fieldName,
- invisible: currentSortDir == 'asc' && currentSort == fieldName
- }">
- â–²
- </span>
- <span
- class="down"
- :class="{
- sorted: currentSortDir == 'asc' && currentSort == fieldName,
- invisible: currentSortDir == 'desc' && currentSort == fieldName
- }">
- â–¼
- </span>
- </span>
- </button>
+ <div class="btn-sort px-2" tabindex="0">
+ {{ title }}
+ <outline-sort-ascending-icon
+ class="ml-2 icon"
+ v-if="currentSortDir == 'desc' && currentSort == fieldName" />
+ <outline-sort-descending-icon
+ class="ml-2 icon"
+ v-if="currentSortDir == 'asc' && currentSort == fieldName" />
+ </div>
</template>
<script>
@@ -49,16 +36,18 @@ export default {
}
</script>
-<style lang="scss" scoped>
-.up,
-.down {
- line-height: 10px;
- font-size: 1.1rem;
- transform: scale(1.5, 1);
- opacity: 0.3;
-}
+<style lang="scss">
+.btn-sort {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 50px;
+ cursor: pointer;
+ background: var(--info);
+ color: white;
-.sorted {
- opacity: 1;
+ &:focus {
+ background: #086375;
+ }
}
</style>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 6b3e2a5c858b5893725f8c22ef269b3a8c234a20..7e72710aefded46112aed8768189683779b12e4e 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -4,7 +4,7 @@
type="text"
v-if="certifs.length > 5"
v-model="search"
- class="form-control w-75 mx-auto mb-2"
+ class="form-control w-75 mx-auto my-2"
:placeholder="$t('recherche.title')" />
<table class="table table-striped table-hover">
<thead class="thead-light">
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 819ee135cc5f3e31a3f9483eac213d0e63b40321..b6979e4d50b414efd54557b901fb87d9b6c85d45 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -3,20 +3,23 @@
<div class="card-body">
<div
class="uid-wrapper d-flex align-items-center justify-content-between mb-4">
- <h2 class="card-title text-center">
+ <h2 class="card-title text-center d-flex align-items-center">
<span class="text-truncate d-inline-block">
{{ hash.uid }}
</span>
- <BadgeStatus :membre="hash" />
+ <BadgeStatus class="ml-2" :membre="hash" />
</h2>
<button
id="favori"
class="btn btn-info"
- :class="{
- add: !$favourites.list.includes(hash.uid),
- remove: $favourites.list.includes(hash.uid)
- }"
- @click="$favourites.toggleFavourite(hash.uid, $event)"></button>
+ @click="$favourites.toggleFavourite(hash.uid, $event)">
+ <outline-user-add-icon
+ class="icon"
+ v-if="!$favourites.list.includes(hash.uid)" />
+ <outline-user-remove-icon
+ class="icon"
+ v-if="$favourites.list.includes(hash.uid)" />
+ </button>
</div>
<BtnClipboard :textContent="hash.pubkey" />
<div class="table-responsive">
@@ -159,19 +162,8 @@ export default {
}
#favori {
- background-size: 75%;
- background-repeat: no-repeat;
- background-position: center;
width: 50px;
height: 50px;
-
- &.add {
- background-image: url("~/assets/img/favori_add.png");
- }
-
- &.remove {
- background-image: url("~/assets/img/favori_remove.png");
- }
}
.member {
diff --git a/components/member/List.vue b/components/member/List.vue
index 08264a6efe428d717336746b0ec266509a9c2671..1548c0a68fd81836b5694222abc3ae6506c5df16 100644
--- a/components/member/List.vue
+++ b/components/member/List.vue
@@ -2,8 +2,13 @@
<div class="table-responsive pb-3">
<table class="table table-striped table-hover text-center">
<thead class="thead-light">
- <tr class="h-100">
- <th class="p-0 h-100" scope="col" @click="sort('uid')">
+ <tr class="border-left">
+ <th
+ class="p-0 border-right"
+ scope="col"
+ @click="sort('uid')"
+ @keyup.enter="sort('uid')"
+ @keyup.space="sort('uid')">
<BtnSort
fieldName="uid"
title="UID"
@@ -12,7 +17,7 @@
</th>
<th
scope="col"
- class="d-none d-md-table-cell p-0"
+ class="d-none d-md-table-cell p-0 border-right"
@click="sort('pubkey')"
v-if="['search', 'favoris'].includes(type)">
<BtnSort
@@ -23,7 +28,7 @@
</th>
<th
scope="col"
- class="d-none d-sm-table-cell p-0"
+ class="d-none d-sm-table-cell p-0 border-right"
@click="sort('date_membership')"
v-if="['adhesion', 'favoris', 'search'].includes(type)">
<BtnSort
@@ -38,7 +43,7 @@
</th>
<th
scope="col"
- class="d-none p-0"
+ class="d-none p-0 border-right"
:class="{
'd-sm-table-cell': type == 'certif',
'd-md-table-cell': type != 'certif'
@@ -55,7 +60,7 @@
:currentSort="currentSort"
:currentSortDir="currentSortDir" />
</th>
- <th v-if="type == 'favoris'"></th>
+ <th class="border-right" v-if="type == 'favoris'"></th>
</tr>
</thead>
<tbody>
@@ -116,7 +121,7 @@
v-if="$favourites.list.includes(member.uid)"
@click="$favourites.toggleFavourite(member.uid, $event)"
:title="$t('favoris.supprimer')">
- X
+ <outline-trash-icon class="icon" />
</button>
</td>
</tr>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index d49a3c41bba50367cff2910b6d8af50273dc87df..e33c4fd3c73bd0eb7af6983552b08f694deecae2 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -5,7 +5,7 @@
<img :src="$icon(512)" alt="Accueil" class="logo" />
<div>
<h1 class="h3">
- Wotwizard <small><span class="small">v0.18</span></small>
+ Wotwizard <small><span class="small">v0.19</span></small>
</h1>
<small class="text-muted">{{ $t("slogan") }}</small>
</div>
diff --git a/layouts/default.vue b/layouts/default.vue
index f8fac1f77d295a8ae60e2f20f107b261db5d8a19..d75149e46982b7dfd26ecb3c21cbe41d541b121b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,7 @@
class="scrollToTop bg-primary position-fixed text-white d-flex align-items-center justify-content-center rounded"
href="#"
@click="scrollToTop($event)">
- ↑
+ <outline-chevron-double-up-icon class="icon" />
</a>
</div>
</template>
diff --git a/nuxt.config.js b/nuxt.config.js
index 7b7bd1a6bcfa3e432fa592819761856017a90b4e..ee308c50be720d2c969898f1d5c6073249ec2ddc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -36,7 +36,9 @@ export default {
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/pwa
- "@nuxtjs/pwa"
+ "@nuxtjs/pwa",
+ // https://github.com/whardier/nuxt-hero-icons
+ "@nuxt-hero-icons/outline/nuxt"
],
// Modules: https://go.nuxtjs.dev/config-modules
diff --git a/package.json b/package.json
index b5bb04e2569f9e7f5a3ffa7f2fe5063f84497ca8..63e0b611bdd5482738428659d4afb543ce7f816b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"nuxt-generate": "nuxt generate"
},
"dependencies": {
+ "@nuxt-hero-icons/outline": "^1.0.1",
"@nuxtjs/apollo": "^4.0.1-rc.5",
"@nuxtjs/i18n": "^7.2.0",
"@nuxtjs/pwa": "^3.3.5",
diff --git a/pages/favoris.vue b/pages/favoris.vue
index a4af92a41146e0faed8849a2204b13eb556829f3..7999653fd9f6677d51b3bd2d81b7b6a0bff96f69 100644
--- a/pages/favoris.vue
+++ b/pages/favoris.vue
@@ -17,7 +17,7 @@
<input
type="text"
v-model="search"
- class="form-control col-sm-6 col-md-5 col-lg-4 col-xl-3 mx-auto mb-2"
+ class="form-control col-sm-6 col-md-5 col-lg-4 col-xl-3 mx-auto mb-3"
:placeholder="$t('recherche.title')" />
<MemberList
defaultSort="date_membership"
diff --git a/pages/lexique.vue b/pages/lexique.vue
index a40cfc2175745802f422c420a71ba788dd1e3c90..6ffd212e099020cb0d71a0fca5006d4fe44edfde 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -3,13 +3,7 @@
<div class="rech-lexique row mb-4">
<div class="col-md-6 mx-auto">
<h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
- <div class="form-group">
- <input
- v-model="search"
- type="text"
- class="form-control"
- :placeholder="$t('recherche.title')" />
- </div>
+ <BtnSearch v-model="search" />
</div>
</div>
<div class="table-responsive">
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 3a26a742a963ea8e2f6360c026419a35a9c85f4a..decbbb3aef466ba56346bb340a577c706e0ae108 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -2,19 +2,8 @@
<main class="container">
<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
<div class="row mb-4">
- <div class="col-sm-8 col-md-6 col-lg-5 m-auto text-center">
- <label for="rech" class="form-label">{{ $t("recherche.title") }}</label>
- <input
- type="text"
- class="form-control"
- id="rech"
- aria-describedby="rechHelp"
- v-model="param"
- autocomplete="off"
- @keyup="save" />
- <small id="rechHelp" class="form-text text-muted">{{
- $t("recherche.desc")
- }}</small>
+ <div class="col-sm-8 col-md-6 col-lg-5 m-auto">
+ <BtnSearch v-model="param" :help="$t('recherche.desc')" />
</div>
</div>
<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />