Client - add button to scroll to the top

fittrackee_client/src/App.vue

@@ -1,4 +1,5 @@
 <template>
+  <div id="top" />
   <NavBar @menuInteraction="updateHideScrollBar" />
   <div v-if="appLoading" class="app-container">
     <div class="app-loading">
@@ -9,6 +10,15 @@
     <router-view v-if="appConfig" />
     <NoConfig v-else />
   </div>
+  <div class="container scroll">
+    <div
+      class="scroll-button"
+      :class="{ 'display-button': displayScrollButton }"
+      @click="scrollToTop"
+    >
+      <i class="fa fa-chevron-up" aria-hidden="true"></i>
+    </div>
+  </div>
   <Footer />
 </template>
 
@@ -34,6 +44,7 @@
     defineComponent,
     ref,
     onBeforeMount,
+    onMounted,
   } from 'vue'
 
   import Loader from '@/components/Common/Loader.vue'
@@ -77,19 +88,46 @@
         () => store.getters[ROOT_STORE.GETTERS.APP_LOADING]
       )
       const hideScrollBar = ref(false)
+      const displayScrollButton = ref(false)
+
+      onBeforeMount(() =>
+        store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_CONFIG)
+      )
+      onMounted(() => scroll())
 
       function updateHideScrollBar(isMenuOpen: boolean) {
         hideScrollBar.value = isMenuOpen
       }
 
-      onBeforeMount(() =>
-        store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_CONFIG)
-      )
+      function isScrolledToBottom(element: Element): boolean {
+        return (
+          element.getBoundingClientRect().top < window.innerHeight &&
+          element.getBoundingClientRect().bottom >= 0
+        )
+      }
+      function scroll() {
+        window.onscroll = () => {
+          let bottom = document.querySelector('#bottom')
+          displayScrollButton.value =
+            bottom !== null && isScrolledToBottom(bottom)
+        }
+      }
+      function scrollToTop() {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        })
+        setTimeout(() => {
+          displayScrollButton.value = false
+        }, 300)
+      }
 
       return {
         appConfig,
         appLoading,
         hideScrollBar,
+        displayScrollButton,
+        scrollToTop,
         updateHideScrollBar,
       }
     },
@@ -111,4 +149,25 @@
       height: 100%;
     }
   }
+
+  .scroll {
+    display: flex;
+    justify-content: flex-end;
+    position: fixed;
+    bottom: 42px;
+    right: -15px;
+    padding: 0 $default-padding * 2.5;
+
+    .scroll-button {
+      background-color: var(--scroll-button-bg-color);
+      border-radius: $border-radius;
+      box-shadow: 1px 1px 3px lightgrey;
+      display: none;
+      padding: 0 $default-padding;
+
+      &.display-button {
+        display: block;
+      }
+    }
+  }
 </style>

fittrackee_client/src/scss/colors.scss

@@ -43,6 +43,8 @@
   --disabled-background-color: #e0e0e0;
   --disabled-color: #a3a3a3;
 
+  --scroll-button-bg-color: rgba(255, 255, 255, .7);
+
   --workout-trophy-color: #daa520;
   --workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
         brightness(97%) contrast(96%);

fittrackee_client/src/views/DashBoard.vue

@@ -63,6 +63,7 @@
         />
       </div>
     </div>
+    <div id="bottom" />
   </div>
 </template>
 
@@ -122,10 +123,10 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
   #dashboard {
+    padding-bottom: 30px;
     .dashboard-container {
       display: flex;
       flex-direction: row;
-      padding-bottom: 30px;
 
       .dashboard-sub-container {
         display: flex;

fittrackee_client/src/views/Workout.vue

@@ -27,6 +27,7 @@
             v-if="!displaySegment"
             :notes="workoutData.workout.notes"
           />
+          <div id="bottom" />
         </div>
         <div v-else>
           <NotFound v-if="!workoutData.loading" target="WORKOUT" />