From e887c1fd950c1e0033f80e58bf4c3d858840c0a0 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Mon, 14 Feb 2022 17:11:00 +0100
Subject: [PATCH] reduce lexique search on scroll
---
pages/lexique.vue | 21 ++++++++++++++++++++-
1 file changed, 20 insertions(+), 1 deletion(-)
diff --git a/pages/lexique.vue b/pages/lexique.vue
index d531f00..8db0903 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -2,7 +2,7 @@
<main class="container">
<div class="rech-lexique row pb-3">
<div class="col-md-6 mx-auto">
- <h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
+ <h2 class="text-center font-weight-light">{{ $t("lexique") }}</h2>
<BtnSearch v-model="search" :help="$t('recherche.desc.lexicon')" />
</div>
</div>
@@ -120,6 +120,15 @@ export default {
return retour
}
},
+ beforeMount() {
+ window.addEventListener("scroll", function (e) {
+ if (window.scrollY > 20) {
+ $(".rech-lexique").addClass("reduced")
+ } else {
+ $(".rech-lexique").removeClass("reduced")
+ }
+ })
+ },
mounted() {
$nuxt.$emit("changeRoute", this.breadcrumb)
}
@@ -131,7 +140,17 @@ export default {
position: sticky;
top: var(--paddingTop);
background: var(--background-color-primary);
+
+ h2 {
+ margin: 3rem 0;
+ transition: margin 0.3s ease-in-out;
+ }
+
+ &.reduced h2 {
+ margin: 0.5rem 0;
+ }
}
+
th {
min-width: 200px;
}
--
GitLab