From 9cce8a5d7f0821cf34c0dca848e7d0986019e16a Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Tue, 15 Feb 2022 02:32:23 +0100
Subject: [PATCH] Bootstrapv5 corrections
---
assets/css/style.scss | 37 ++++++++++++++++++++++++++++
components/badge/Date.vue | 2 +-
components/badge/Dispo.vue | 4 +--
components/badge/Quality.vue | 4 +--
components/badge/Status.vue | 10 ++++----
components/btn/Search.vue | 15 ++++++-----
components/btn/Sort.vue | 6 ++---
components/member/Card.vue | 2 +-
components/navigation/Bar.vue | 2 +-
components/navigation/Breadcrumb.vue | 2 +-
components/navigation/Language.vue | 3 ++-
components/navigation/menu/Group.vue | 4 +--
i18n/locales/de.json | 9 ++++---
i18n/locales/en.json | 9 ++++---
i18n/locales/es.json | 11 +++++----
i18n/locales/fr.json | 1 +
layouts/default.vue | 10 +++++---
pages/previsions/index.vue | 6 ++---
18 files changed, 90 insertions(+), 47 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 57ddf82..246da3b 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,3 +1,40 @@
+// Bootstrap variables customisation
+// Fonts & Typo
+$link-decoration: none;
+$text-muted: var(--text-secondary-color);
+$font-family-base: Montserrat, Helvetica, Arial, serif;
+$small-font-size: 70%;
+
+// Badges
+$badge-font-size: 0.7em;
+
+// Tables;
+$table-border-color: var(--background-color-primary);
+$table-bg: var(--background-color-primary);
+$table-color: var(--text-primary-color);
+$table-hover-bg: rgba(0, 0, 255, 0.075);
+
+// 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-secondary);
+$list-group-active-bg: rgba(0, 0, 255, 0.075);
+$list-group-active-color: var(--text-primary-color);
+$list-group-color: var(--text-primary-color);
+
+// Cards
+$card-bg: var(--background-color-secondary);
+
+// Mark
+$mark-padding: 0.2em 0;
+$mark-bg: yellow;
+
+// Colors
+$info: #0a8299;
+
@import "font";
@import "bootstrap";
diff --git a/components/badge/Date.vue b/components/badge/Date.vue
index 39e7d79..45463dd 100644
--- a/components/badge/Date.vue
+++ b/components/badge/Date.vue
@@ -1,5 +1,5 @@
<template>
- <span class="badge" :class="'badge-' + $options.filters.dateStatus(date)">
+ <span class="badge" :class="'bg-' + $options.filters.dateStatus(date)">
{{ !date ? "N/A" : $d(new Date(date * 1000), styleDate) }}
</span>
</template>
diff --git a/components/badge/Dispo.vue b/components/badge/Dispo.vue
index 885d99e..ad4dbaa 100644
--- a/components/badge/Dispo.vue
+++ b/components/badge/Dispo.vue
@@ -2,8 +2,8 @@
<span
class="badge"
:class="{
- 'badge-success': isDispo,
- 'badge-danger': !isDispo
+ 'bg-success': isDispo,
+ 'bg-danger': !isDispo
}">
{{
isDispo
diff --git a/components/badge/Quality.vue b/components/badge/Quality.vue
index 58584e4..e5d84d4 100644
--- a/components/badge/Quality.vue
+++ b/components/badge/Quality.vue
@@ -2,8 +2,8 @@
<span
class="badge"
:class="{
- 'badge-success': quality >= 80,
- 'badge-warning': quality < 80
+ 'bg-success': quality >= 80,
+ 'bg-warning': quality < 80
}">
{{ Math.round(quality * 100) / 100 }}
</span>
diff --git a/components/badge/Status.vue b/components/badge/Status.vue
index 98cf50f..b8b1d47 100644
--- a/components/badge/Status.vue
+++ b/components/badge/Status.vue
@@ -16,22 +16,22 @@ export default {
displayStatus: function (member) {
switch (member.status) {
case "NEWCOMER":
- return { str: this.$i18n.t("statut.newcomer"), class: "badge-info" }
+ return { str: this.$i18n.t("statut.newcomer"), class: "bg-info" }
case "MISSING":
- return { str: this.$i18n.t("statut.missing"), class: "badge-danger" }
+ return { str: this.$i18n.t("statut.missing"), class: "bg-danger" }
case "MEMBER":
if (this.$options.filters.dateStatus(member.limitDate) == "warning") {
- return { str: this.$i18n.t("statut.renew"), class: "badge-warning" }
+ return { str: this.$i18n.t("statut.renew"), class: "bg-warning" }
} else {
return {
str: this.$i18n.t("statut.member"),
- class: "badge-success"
+ class: "bg-success"
}
}
case "REVOKED":
return {
str: this.$i18n.t("statut.revoked"),
- class: "badge-secondary"
+ class: "bg-secondary"
}
default:
return "N/A"
diff --git a/components/btn/Search.vue b/components/btn/Search.vue
index 9ce1721..c652d00 100644
--- a/components/btn/Search.vue
+++ b/components/btn/Search.vue
@@ -1,11 +1,7 @@
<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>
+ <span class="input-group-text"><outline-search-icon class="icon" /></span>
<input
type="text"
class="form-control"
@@ -17,9 +13,12 @@
: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
+ v-if="help"
+ id="rechHelp"
+ class="small form-text text-muted text-center">
+ {{ help }}
+ </div>
</div>
</template>
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
index 2dde70c..97a0b41 100644
--- a/components/btn/Sort.vue
+++ b/components/btn/Sort.vue
@@ -2,10 +2,10 @@
<div class="btn-sort px-2" tabindex="0">
<span>{{ title }}</span>
<outline-sort-ascending-icon
- class="ml-2 icon flex-shrink-0"
+ class="ms-2 icon flex-shrink-0"
v-if="currentSortDir == 'desc' && currentSort == fieldName" />
<outline-sort-descending-icon
- class="ml-2 icon flex-shrink-0"
+ class="ms-2 icon flex-shrink-0"
v-if="currentSortDir == 'asc' && currentSort == fieldName" />
</div>
</template>
@@ -43,7 +43,7 @@ export default {
align-items: center;
min-height: 50px;
cursor: pointer;
- background: var(--info);
+ background: var(--bs-info);
color: white;
&:focus,
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 1eb76c3..055aac0 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -7,7 +7,7 @@
<span class="text-truncate d-inline-block">
{{ hash.uid }}
</span>
- <small><BadgeStatus class="ml-2" :membre="hash" /></small>
+ <small><BadgeStatus class="ms-2" :membre="hash" /></small>
</h2>
<button
id="favori"
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 31b84a8..48f0c1f 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -2,7 +2,7 @@
<header class="header position-fixed">
<div class="position-relative">
<button
- class="toggle btn border-secondary position-absolute p-1 ml-4"
+ class="toggle btn border-secondary position-absolute p-1 ms-4"
@click="toggleMenu">
<span></span>
</button>
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index c6a185b..76dff42 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -14,7 +14,7 @@
</li>
</ol>
<div class="d-flex justify-content-between align-items-center">
- <NavigationLanguage class="mr-3" />
+ <NavigationLanguage class="me-3" />
<BtnTheme />
</div>
</nav>
diff --git a/components/navigation/Language.vue b/components/navigation/Language.vue
index ab88bb4..5242802 100644
--- a/components/navigation/Language.vue
+++ b/components/navigation/Language.vue
@@ -1,7 +1,8 @@
<template>
<div>
<select
- class="form-control"
+ class="form-select"
+ :aria-label="$t('lang')"
@change="saveLocale($event)"
v-model="$i18n.locale">
<option v-for="lang in $i18n.locales" :key="lang.code" :value="lang.code">
diff --git a/components/navigation/menu/Group.vue b/components/navigation/menu/Group.vue
index 99047d2..4fa32b5 100644
--- a/components/navigation/menu/Group.vue
+++ b/components/navigation/menu/Group.vue
@@ -1,11 +1,11 @@
<template>
<div class="mb-4">
- <h2 class="small text-muted text-uppercase ml-4 mb-0 pb-2 border-bottom">
+ <h2 class="small text-muted text-uppercase ms-4 mb-0 pb-2 border-bottom">
{{ $t(menu.title) }}
</h2>
<div class="nav navbar-nav list-group list-group-flush">
<NuxtLink
- class="list-group-item list-group-item-action p-0 pl-3 border-0"
+ class="list-group-item list-group-item-action p-0 ps-3 border-0"
:to="localePath(item.path)"
v-for="item in menu.items"
:key="item.path"
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 536fdba..b9a20a2 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -11,8 +11,8 @@
"desc": "Dieses Tool ermöglicht es Ihnen, die Bei- und Austritte des Vertrauensnetzes der freien Währung Ğ1 zu verfolgen und ist das Ergebnis einer Zusammenarbeit zwischen verschiedenen Entwicklende und Nutzende der Währung. Zögern Sie nicht, sich bei ihnen mit einer Spende auf den folgenden öffentlichen Schlüssel zu bedanken:",
"developpeurs": "Entwicklung:",
"participants": "Mitwirkende des Projekts:",
- "title": "Apropos",
"testeurs": "Testung:",
+ "title": "Apropos",
"traducteurs": "Ãœbersetzung:"
},
"aurevoir": "Auf Wiedersehen",
@@ -82,12 +82,13 @@
"title": "Meine Favoriten",
"use": "Nur meine Favoriten"
},
- "futuremembers": "Zukünftige Beitritte",
"futureexits": "Zukünfitge Austritte",
+ "futuremembers": "Zukünftige Beitritte",
"infos": "Informationen",
"inout": "Bei- und Austritte des Vertrauensnetz in den 2 letzten Tagen",
"inpreparation": "In Vorbereitung",
"jours": "24 Stunden | {n} Tage",
+ "lang": "Wähle deine Sprache",
"lexique": "Lexikon",
"membre": {
"calculant": {
@@ -167,8 +168,8 @@
"pardate": "Prognosen nach Datum",
"parmembre": "Prognosen nach Mitglieder",
"period": {
- "title": "Suchzeitraum",
- "desc": "Wählen Sie die gewünschte Anzahl an Tagen"
+ "desc": "Wählen Sie die gewünschte Anzahl an Tagen",
+ "title": "Suchzeitraum"
},
"title": "Prognosen"
},
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 641601b..f4257f5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -12,8 +12,8 @@
"developpeurs": "Developers :",
"graphql": "GrahQL API",
"participants": "List of project participants :",
- "title": "About",
"testeurs": "Testers :",
+ "title": "About",
"traducteurs": "Translators :"
},
"aurevoir": "Goodbye to",
@@ -83,12 +83,13 @@
"title": "My favourites",
"use": "My favorites only"
},
- "futuremembers": "Future entries",
"futureexits": "Future exits",
+ "futuremembers": "Future entries",
"infos": "Informations",
"inout": "Entries and exits of the web of trust for the last 2 days",
"inpreparation": "In preparation",
"jours": "24h | {n} days",
+ "lang": "Choose your language",
"lexique": "Lexicon",
"membre": {
"calculant": {
@@ -168,8 +169,8 @@
"pardate": "Forecasts by dates",
"parmembre": "Forecasts by members",
"period": {
- "title": "Search period",
- "desc": "Select the desired number of days"
+ "desc": "Select the desired number of days",
+ "title": "Search period"
},
"title": "Forecasts"
},
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index e453940..0413411 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -12,8 +12,8 @@
"developpeurs": "Desarrolladores :",
"graphql": "GrahQL API",
"participants": "Lista de participantes del proyecto :",
- "title": "A propósito",
"testeurs": "Probadores :",
+ "title": "A propósito",
"traducteurs": "Traductores :"
},
"aurevoir": "Salen",
@@ -83,12 +83,13 @@
"title": "Mis favoritos",
"use": "Solo mis favoritos"
},
- "futuremembers": "Futuras entradas",
"futureexits": "Futuras salidas",
+ "futuremembers": "Futuras entradas",
"infos": "Informaciones",
"inout": "Entradas y salidas de la red de confianza en los últimos 2 dÃas",
"inpreparation": "En preparación",
"jours": "24 horas | {n} dÃas",
+ "lang": "Elige tu idioma",
"lexique": "Léxico",
"membre": {
"calculant": {
@@ -96,8 +97,8 @@
"title": "Miembro calculador"
},
"datelimadhesion": "Fecha lÃmite de membresÃa",
- "datelimrevoc": "Fecha lÃmite de la autorevocación",
"datelimpertestatut": "Pérdida de MembresÃa",
+ "datelimrevoc": "Fecha lÃmite de la autorevocación",
"datemanquecertifs": "Falta de certificaciones",
"desc": "Individuo cuya afiliación está en curso y que ha recibido las 5 certificaciones necesarias que le permitan respetar la regla de distanciamiento. Lo que le permite ser co-creador de la moneda a través de su Dividendo Universal",
"dispo": "Disponible",
@@ -168,8 +169,8 @@
"pardate": "Previsiones por fecha",
"parmembre": "Previsiones por miembros",
"period": {
- "title": "PerÃodo de búsqueda",
- "desc": "Seleccione el número de dÃas deseado"
+ "desc": "Seleccione el número de dÃas deseado",
+ "title": "PerÃodo de búsqueda"
},
"title": "Pronósticos"
},
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index f0235a0..69cd8db 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -89,6 +89,7 @@
"inout": "Entrées et sorties de la toile de confiance des 2 derniers jours",
"inpreparation": "En préparation",
"jours": "24h | {n} jours",
+ "lang": "Choisissez votre langue",
"lexique": "Lexique",
"membre": {
"calculant": {
diff --git a/layouts/default.vue b/layouts/default.vue
index 6e92b15..bfdc5ce 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -70,9 +70,9 @@ export default {
<style lang="scss">
/* Define styles for the default root window element */
:root {
- --text-primary-color: var(--dark);
+ --text-primary-color: var(--bs-dark);
--text-secondary-color: #8a8a8a;
- --background-color-primary: var(--white);
+ --background-color-primary: var(--bs-white);
--background-color-secondary: #e9ecef;
--element-size: 4rem;
--menu-size: 320px;
@@ -80,9 +80,11 @@ export default {
/* Define styles for the root window with dark - mode preference */
:root.dark-theme {
- --text-primary-color: var(--white);
+ --bs-body-bg: var(--bs-dark);
+ --bs-body-color: var(--bs-white);
+ --text-primary-color: var(--bs-white);
--text-secondary-color: #c9c9c9;
- --background-color-primary: var(--dark);
+ --background-color-primary: var(--bs-dark);
--background-color-secondary: #5d6164;
.text-info {
color: #22b2c2 !important;
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index b7babb1..ad3009e 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -73,7 +73,7 @@
v-for="date in forecast.forecasts"
:key="date.date">
<div
- class="forecast_date mr-3"
+ class="forecast_date me-3"
v-if="date.date < 9999999999">
{{ $d(new Date(date.date * 1000), "short") }}
{{ $t("time.a") }}
@@ -84,7 +84,7 @@
)
}}
</div>
- <div class="forecast_date mr-3" v-else>N/A</div>
+ <div class="forecast_date me-3" v-else>N/A</div>
<div>{{ Math.round(date.proba * 100) }} %</div>
</div>
</td>
@@ -119,7 +119,7 @@
"
v-for="member in forecast.forecasts"
:key="member.member.uid">
- <div class="mr-3">
+ <div class="me-3">
<span
v-if="
$favourites.list.includes(member.member.uid)
--
GitLab