Add scroll top component

bitbucket-pipelines.yml

@@ -20,6 +20,8 @@ definitions:
 aliases:
 - &lint
   name: lint
+  caches:
+    - node
   script:
     - npm install --prefix client
     - npm run lint --prefix client

client/src/App.vue

@@ -3,6 +3,7 @@
     :class="{'no-scroll': showModal || showMobileNavigation}"
     class="app"
     id="app">
+    <scroll-up/>
     <component
       :is="showModalDeprecated"
       v-if="showModalDeprecated"/>
@@ -37,11 +38,13 @@
   import DeactivatePerson from '@/components/profile/DeactivatePerson';
 
   import {mapGetters} from 'vuex';
+  import ScrollUp from '@/components/ScrollUp';
 
   export default {
     name: 'App',
 
     components: {
+      ScrollUp,
       DefaultLayout,
       SimpleLayout,
       BlankLayout,
@@ -76,9 +79,6 @@
         return this.$modal.state.component;
       }
     },
-
-    mounted() {
-    }
   }
 </script>
 
@@ -100,4 +100,5 @@
   .no-scroll {
     overflow-y: hidden;
   }
+
 </style>

client/src/components/ScrollUp.vue

@@ -0,0 +1,74 @@
+<template>
+  <transition name="fade">
+    <a
+      class="scroll-up"
+      v-if="scroll>200"
+      @click="scrollTop">
+      <arrow-up class="scroll-up__icon"/>
+    </a>
+  </transition>
+</template>
+
+<script>
+  import ArrowUp from '@/components/icons/ArrowUp';
+
+  export default {
+    components: {
+      ArrowUp
+    },
+
+    data() {
+      return {
+        scroll: 0
+      }
+    },
+
+    mounted() {
+      let html = document.scrollingElement;
+      document.body.onscroll = () => {
+        this.scroll = html.scrollTop;
+      }
+    },
+
+    destroyed() {
+      document.body.onscroll = null;
+    },
+
+    methods: {
+      scrollTop() {
+        document.scrollingElement.scrollTop = 0;
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import '@/styles/_variables.scss';
+  @import '@/styles/_mixins.scss';
+
+  .scroll-up {
+    position: fixed;
+    right: $large-spacing;
+    bottom: $large-spacing;
+    padding: $medium-spacing;
+    border-radius: 100px;
+    @include default-box-shadow;
+    cursor: pointer;
+    background-color: $color-white;
+
+    &__icon {
+      width: 50px;
+      height: 50px;
+    }
+
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
+
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+  {
+    opacity: 0;
+  }
+</style>

client/src/components/icons/ArrowUp.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100">
+    <path
+      d="M85.56934,50.543l-33.5-49.44531a2.49942,2.49942,0,0,0-4.13867,0l-33.5,49.44531A2.49925,2.49925,0,0,0,16.5,54.44531H32.36035V97.5a2.49981,2.49981,0,0,0,2.5,2.5h30.2793a2.49981,2.49981,0,0,0,2.5-2.5V54.44531H83.5A2.49925,2.49925,0,0,0,85.56934,50.543ZM62.63965,49.44531V95H37.36035V49.44531H21.21387L50,6.957,78.78613,49.44531Z"/>
+  </svg>
+</template>

client/src/styles/_mixins.scss

@@ -70,7 +70,7 @@
 }
 
 @mixin desktop {
-  @media (min-width: 1024px) {
+  @media (min-width: 1200px) {
     @content
   }
 }
@@ -192,3 +192,7 @@
   width: 100%;
   margin: 0 auto;
 }
+
+@mixin default-box-shadow {
+  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+}