From 407b09a8bbf154e8d3ab0c92f84be5a5567568ea Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Tue, 15 Feb 2022 00:17:23 +0100
Subject: [PATCH] Bootstrap 5.1 installation
---
assets/css/_bootstrap.scss | 48 ++++++++++-----
assets/css/style _back.scss | 110 +++++++++++++++++++++++++++++++++++
assets/css/style.scss | 47 ---------------
components/btn/Clipboard.vue | 16 ++---
layouts/default.vue | 21 +++----
nuxt.config.js | 8 +--
package.json | 2 +-
pages/lexique.vue | 10 ++--
plugins/bootstrap.js | 4 +-
plugins/favourites.js | 26 ++++-----
10 files changed, 184 insertions(+), 108 deletions(-)
create mode 100644 assets/css/style _back.scss
diff --git a/assets/css/_bootstrap.scss b/assets/css/_bootstrap.scss
index 7c18f40..465990a 100644
--- a/assets/css/_bootstrap.scss
+++ b/assets/css/_bootstrap.scss
@@ -1,37 +1,53 @@
+/*!
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
-// @import "~bootstrap/scss/dropdown";
-// @import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-// @import "~bootstrap/scss/custom-forms";
+// @import "~bootstrap/scss/dropdown";
+// @import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
-// @import "~bootstrap/scss/pagination";
+// @import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
-// @import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
-// @import "~bootstrap/scss/progress";
-// @import "~bootstrap/scss/media";
+// @import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
-// @import "~bootstrap/scss/toasts";
-// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
-// @import "~bootstrap/scss/popover";
-// @import "~bootstrap/scss/carousel";
-// @import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+// @import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+// TODO : A tester
+// @import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
diff --git a/assets/css/style _back.scss b/assets/css/style _back.scss
new file mode 100644
index 0000000..3432e1c
--- /dev/null
+++ b/assets/css/style _back.scss
@@ -0,0 +1,110 @@
+// Bootstrap variables customisation
+// Fonts & Typo
+$link-hover-decoration: none;
+$text-muted: var(--text-secondary-color);
+$enable-responsive-font-sizes: true;
+$font-family-base: Montserrat, Helvetica, Arial, serif;
+$small-font-size: 70%;
+
+// Body
+$body-bg: var(--background-color-primary);
+$body-color: var(--text-primary-color);
+
+// Tables;
+$table-border-color: var(--background-color-primary);
+$table-cell-padding: 0.5rem;
+$table-bg: var(--background-color-primary);
+$table-color: var(--text-primary-color);
+$table-head-bg: var(--background-color-secondary);
+$table-head-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-action-hover-color: var(--text-secondary-color);
+$list-group-action-color: var(--text-primary-color);
+
+// Cards
+$card-bg: var(--background-color-secondary);
+
+// Close button
+$close-color: var(--text-primary-color);
+$close-font-weight: 500;
+
+// Mark
+$mark-padding: 0.2em 0;
+$mark-bg: yellow;
+
+// Colors
+$info: #0a8299;
+
+@import "font";
+@import "bootstrap";
+
+.btn:disabled {
+ cursor: not-allowed;
+}
+
+.table {
+ &-fixed {
+ table-layout: fixed;
+ }
+
+ &.sortable thead {
+ tr {
+ border-left: 1px solid var(--text-primary-color);
+ }
+
+ th {
+ border-right: 1px solid;
+ border-top: 1px solid;
+ border-bottom: 1px solid;
+ }
+ }
+ tbody tr > * {
+ vertical-align: middle;
+ }
+
+ &-hover tbody tr {
+ cursor: pointer;
+ }
+
+ .td-date {
+ width: 165px;
+ }
+}
+
+.list-group-item {
+ &-action:not(.active) {
+ &:hover {
+ background: rgba(0, 0, 255, 0.075);
+ color: var(--text-primary-color);
+ }
+ }
+
+ .menu-item {
+ transition: left 0.3s ease-in-out;
+ left: 0;
+
+ &::before {
+ content: "›";
+ position: relative;
+ left: -0.5em;
+ }
+
+ &:hover {
+ left: 0.5em;
+ }
+ }
+}
+
+.icon {
+ width: 1.15rem;
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3432e1c..57ddf82 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,50 +1,3 @@
-// Bootstrap variables customisation
-// Fonts & Typo
-$link-hover-decoration: none;
-$text-muted: var(--text-secondary-color);
-$enable-responsive-font-sizes: true;
-$font-family-base: Montserrat, Helvetica, Arial, serif;
-$small-font-size: 70%;
-
-// Body
-$body-bg: var(--background-color-primary);
-$body-color: var(--text-primary-color);
-
-// Tables;
-$table-border-color: var(--background-color-primary);
-$table-cell-padding: 0.5rem;
-$table-bg: var(--background-color-primary);
-$table-color: var(--text-primary-color);
-$table-head-bg: var(--background-color-secondary);
-$table-head-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-action-hover-color: var(--text-secondary-color);
-$list-group-action-color: var(--text-primary-color);
-
-// Cards
-$card-bg: var(--background-color-secondary);
-
-// Close button
-$close-color: var(--text-primary-color);
-$close-font-weight: 500;
-
-// Mark
-$mark-padding: 0.2em 0;
-$mark-bg: yellow;
-
-// Colors
-$info: #0a8299;
-
@import "font";
@import "bootstrap";
diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue
index 194b9db..1ccd7c1 100644
--- a/components/btn/Clipboard.vue
+++ b/components/btn/Clipboard.vue
@@ -28,14 +28,14 @@ export default {
methods: {
copyText() {
navigator.clipboard.writeText(this.textContent)
- $("#btncopy").tooltip({
- title: this.$t("copie") + " !",
- trigger: "manual"
- })
- $("#btncopy").tooltip("show")
- setTimeout(() => {
- $("#btncopy").tooltip("hide")
- }, 1000)
+ // $("#btncopy").tooltip({
+ // title: this.$t("copie") + " !",
+ // trigger: "manual"
+ // })
+ // $("#btncopy").tooltip("show")
+ // setTimeout(() => {
+ // $("#btncopy").tooltip("hide")
+ // }, 1000)
}
}
}
diff --git a/layouts/default.vue b/layouts/default.vue
index 0f7e668..6e92b15 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,7 +3,7 @@
<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
<Nuxt />
<a
- class="scrollToTop bg-info position-fixed text-white d-flex align-items-center justify-content-center rounded"
+ class="scrollToTop fade bg-info position-fixed text-white d-flex align-items-center justify-content-center rounded"
href="#"
@click="scrollToTop($event)">
<outline-chevron-double-up-icon class="icon" />
@@ -49,16 +49,13 @@ export default {
}
},
beforeMount() {
- let animated = false
window.addEventListener("scroll", function (e) {
- if (window.scrollY > 250 && !animated) {
- $(".scrollToTop").css("right", "1rem")
- } else {
- animated = true
- setTimeout(function () {
- animated = false
- }, 300)
- $(".scrollToTop").css("right", "-4rem")
+ let scrollClassList = document.querySelector(".scrollToTop").classList
+ let visible = scrollClassList.contains("show")
+ if (!visible && window.scrollY > 250) {
+ scrollClassList.add("show")
+ } else if (visible && window.scrollY <= 250) {
+ scrollClassList.remove("show")
}
})
},
@@ -129,6 +126,10 @@ main {
opacity: 0.7;
transition: all 0.3s ease-in;
+ &.show {
+ right: 1rem;
+ }
+
&:hover {
opacity: 1;
}
diff --git a/nuxt.config.js b/nuxt.config.js
index 41270b5..f2984f2 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -34,7 +34,7 @@ export default {
plugins: [
"~plugins/favourites.js",
"~plugins/filters.js",
- "~plugins/bootstrap.js"
+ { src: "~/plugins/bootstrap.js", mode: "client" }
],
// Auto import components: https://go.nuxtjs.dev/config-components
@@ -129,10 +129,6 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
- plugins: [
- new webpack.ProvidePlugin({
- $: "jquery"
- })
- ]
+ plugins: []
}
}
diff --git a/package.json b/package.json
index eaf1b1b..2cf2123 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"@nuxtjs/pwa": "^3.3.5",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
- "bootstrap": "^4.6.1",
+ "bootstrap": "^5.1.3",
"core-js": "^3.15.1",
"graphql-tag": "^2.12.6",
"nuxt": "^2.15.8",
diff --git a/pages/lexique.vue b/pages/lexique.vue
index 8db0903..c71a3a8 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -122,10 +122,12 @@ export default {
},
beforeMount() {
window.addEventListener("scroll", function (e) {
- if (window.scrollY > 20) {
- $(".rech-lexique").addClass("reduced")
- } else {
- $(".rech-lexique").removeClass("reduced")
+ let scrollClassList = document.querySelector(".rech-lexique").classList
+ let reduced = scrollClassList.contains("reduced")
+ if (!reduced && window.scrollY > 20) {
+ scrollClassList.add("reduced")
+ } else if (reduced && window.scrollY <= 20) {
+ scrollClassList.remove("reduced")
}
})
},
diff --git a/plugins/bootstrap.js b/plugins/bootstrap.js
index 18c3e09..af4c79d 100644
--- a/plugins/bootstrap.js
+++ b/plugins/bootstrap.js
@@ -1,3 +1 @@
-if (process.browser) {
- require("bootstrap")
-}
\ No newline at end of file
+import bootstrap from "bootstrap"
diff --git a/plugins/favourites.js b/plugins/favourites.js
index 73187ba..d140fcc 100644
--- a/plugins/favourites.js
+++ b/plugins/favourites.js
@@ -6,20 +6,20 @@ export default (context, inject) => {
: []
let toggleFavourite = (uid, e) => {
- $(e.target).tooltip({
- title: function () {
- return context.$favourites.list.includes(uid)
- ? context.app.i18n.t("favoris.supprime")
- : context.app.i18n.t("favoris.enregistre")
- },
- html: true,
- trigger: "manual"
- })
+ // $(e.target).tooltip({
+ // title: function () {
+ // return context.$favourites.list.includes(uid)
+ // ? context.app.i18n.t("favoris.supprime")
+ // : context.app.i18n.t("favoris.enregistre")
+ // },
+ // html: true,
+ // trigger: "manual"
+ // })
- $(e.target).tooltip("show")
- setTimeout(() => {
- $(e.target).tooltip("hide")
- }, 600)
+ // $(e.target).tooltip("show")
+ // setTimeout(() => {
+ // $(e.target).tooltip("hide")
+ // }, 600)
if (!context.$favourites.list.includes(uid)) {
context.$favourites.list.push(uid)
--
GitLab