scroll up button browse, search, history

Author: supalarry

frontend/src/components/shared/ScrollUpButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <button v-if="showScroll"
+          class="z-10 fixed text-2xl text-white-matcha font-bold bottom-0 mx-auto ml-4 sm:ml-8 mb-8 w-12 h-12 rounded-full bg-purple-matcha"
+          v-on:click="scrollUp()">
+    ↑</button>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    showScroll: false,
+  }),
+  methods: {
+    scrollUp() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
+    handleScroll() {
+      this.showScroll = window.scrollY > window.screen.height;
+    },
+  },
+  created() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+};
+</script>

frontend/src/views/app/Browse.vue

@@ -13,6 +13,7 @@
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></Recommendations>
       <div id="invisibleFooter" class="h-4 w-full bg-white"></div>
+      <ScrollUpButton></ScrollUpButton>
     </section>
   </div>
 </template>
@@ -21,12 +22,14 @@
 /* eslint-disable max-len */
 
 import Recommendations from '@/components/app/recommendations/Recommendations.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'Browse',
   props: ['recommendationsFromSettingUp'],
   components: {
     Recommendations,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],

frontend/src/views/app/History.vue

@@ -25,6 +25,7 @@
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></HistoryRecommendations>
       <div id="invisibleFooterHistory" class="h-4 w-full bg-white"></div>
+      <ScrollUpButton></ScrollUpButton>
     </section>
   </div>
 </template>
@@ -35,13 +36,15 @@
 
 import HistoryRecommendations from '@/components/app/recommendations/HistoryRecommendations.vue';
 import DropdownDisplayChoiceHistory from '@/components/shared/DropdownDisplayChoiceHistory.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'History',
   props: ['recommendationsFromSettingUp'],
   components: {
     HistoryRecommendations,
     DropdownDisplayChoiceHistory,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],

frontend/src/views/app/Search.vue

@@ -14,6 +14,7 @@
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="filters"></Recommendations>
+      <ScrollUpButton></ScrollUpButton>
     </section>
     <div id="invisibleFooterSearch" class="h-4 w-full bg-white"></div>
     <section v-on:click="setError(null)"
@@ -74,13 +75,15 @@
 import FilterSlider from '@/components/shared/FilterSlider.vue';
 import MultipleFilters from '@/components/shared/MultipleFilters.vue';
 import Recommendations from '@/components/app/recommendations/Recommendations.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'Search',
   components: {
     MultipleFilters,
     FilterSlider,
     Recommendations,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],