feat(About): Back to top on About page. Closes #120

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### 🌟 Enhancements
 
+* [#120](https://github.com/antoinezanardi/werewolves-assistant-web/issues/120) - Back to top on About page.
 * [#137](https://github.com/antoinezanardi/werewolves-assistant-web/issues/137) - Add some links to log in modal.
 
 ### 🐛 Bug fixes
@@ -16,6 +17,7 @@
 
 ### 📦 Packages
 
+* `vue-backtotop` installed with version `1.6.1`.
 * `@sentry/browser` updated to version `6.1.0`.
 * `@sentry/integrations` updated to version `6.1.0`.
 * `@vue/test-utils` updated to version `1.1.3`.

package.json

@@ -34,6 +34,7 @@
         "v-tooltip": "^2.1.2",
         "vee-validate": "^3.4.5",
         "vue": "^2.6.12",
+        "vue-backtotop": "^1.6.1",
         "vue-flip": "1.0.2",
         "vue-github-buttons": "^3.1.0",
         "vue-gtag": "^1.10.0",

src/assets/scss/_vue-backtotop.scss

@@ -0,0 +1,6 @@
+.vue-back-to-top {
+    border: 1px solid #4c4c4c;
+    border-radius: 40px;
+    background-color: #4f4f4f;
+    padding: 5px 15px 5px;
+}

src/assets/scss/styles.scss

@@ -16,6 +16,7 @@
 @import "tables";
 @import "transitions";
 @import "v-tooltip";
+@import "vue-backtotop";
 @import "vue-flip";
 @import "vue-lazyload";
 @import "vue-roller";

src/components/About/About.vue

@@ -162,6 +162,9 @@
                 </router-link>
             </div>
         </div>
+        <BackToTop v-tooltip="$t('About.backToTop')" :visibleoffset="100">
+            <i class="fa fa-chevron-up fa-2x"/>
+        </BackToTop>
     </div>
 </template>
 

src/plugins/index.js

@@ -5,6 +5,7 @@ import Router from "./router";
 import "./sentry";
 import "./v-tooltip";
 import "./vee-validate";
+import "./vue-backtotop";
 import "./vue-countdown";
 import "./vue-flip";
 import "./vue-github-buttons";

src/plugins/vue-backtotop/index.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import BackToTop from "vue-backtotop";
+
+Vue.use(BackToTop);

src/plugins/vue-i18n/fr.json

@@ -129,7 +129,8 @@
         "forMe": "Pour moi",
         "isOneOfTheBestGame": "est un des meilleurs jeux entre amis ou en famille autour d'une table, où s'entremellent alliances et trahisons, un peu comme un Mario Kart en fait... Au fur et à mesure d'une partie, la vraie nature de chaque joueur se révèle, les masques tombent, chacun se sent menacé... Autant de rebondissements qui rendent chaque partie unique !",
         "ImAFanOfGameMastering": "Étant un grand fan du rôle de maître du jeu, j'ai toujours eu l'envie de partager ce doux sentiment de chef d'orchestre durant une partie. J'ai donc créé cet assistant pour que n'importe qui puisse endosser ce rôle si important, et ce, dans n'importe quelle configuration de jeu.",
-        "pleaseRateThisProjectAndHaveFun": "N'hésitez pas à me faire part de vos avis sur cet assistant. Il a été créé pour servir tous maîtres du jeu, novices ou experts, et rendre vos parties mémorables. Amusez-vous bien ! "
+        "pleaseRateThisProjectAndHaveFun": "N'hésitez pas à me faire part de vos avis sur cet assistant. Il a été créé pour servir tous maîtres du jeu, novices ou experts, et rendre vos parties mémorables. Amusez-vous bien ! ",
+        "backToTop": "Revenir en haut"
     },
     "GameLobby": {
         "loading": "Recherche d'une partie en cours",