Merge pull request #141 from ipfs-search/improve-footer#139

Improve footer#139

Author: dokterbob

src/App.vue

@@ -9,17 +9,11 @@
       <router-view />
     </v-main>
 
-    <!-- This is a replacement for the footer, it'll dissapear on scroll -->
-    <v-app-bar
-      padless
-      color="white"
-      bottom
-      fixed
-      class="hidden-xs-and-down"
-      hide-on-scroll
-      scroll-threshold="300"
-      height="105"
+    <v-footer
       v-if="!(this.$route.name === 'Detail')"
+      fixed
+      padless
+      :class="{ 'footer--hidden': !showFooter }"
     >
       <v-card
         flat
@@ -28,7 +22,7 @@
         width="100%"
       >
         <v-card-text
-          class="py-1"
+          class="ipfsPrimary lighten-1 py-1"
         >
           <v-btn
             v-for="(link, i) in footer_links"
@@ -39,11 +33,15 @@
           >
             <v-icon
               :size="$vuetify.breakpoint.smAndUp ? 24 : 18"
+              color="white"
             >
               {{ link.icon }}
             </v-icon>
           </v-btn>
         </v-card-text>
+        <v-divider
+          class="ipfsPrimary lighten-4"
+        />
         <v-card-text
           class="ipfsPrimary lighten-1 white--text text-center text-caption py-7"
           style="margin: auto;"
@@ -63,7 +61,7 @@
           </div>
         </v-card-text>
       </v-card>
-    </v-app-bar>
+    </v-footer>
   </v-app>
 </template>
 
@@ -75,6 +73,8 @@ export default {
   $el: '#app',
 
   data: () => ({
+    lastScrollPosition: 0,
+    showFooter: true,
     footer_links: [
       {
         icon: 'mdi-mastodon',
@@ -104,14 +104,34 @@ export default {
       const isDark = window.matchMedia('(prefers-color-scheme:dark)').matches;
       this.$vuetify.theme.dark = isDark;
     },
+
+    onScroll() {
+      const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      if (currentScrollPosition < 0) {
+        return;
+      }
+      // Scroll threshold
+      if (Math.abs(currentScrollPosition - this.lastScrollPosition) < 300) {
+        return;
+      }
+      this.showFooter = currentScrollPosition < this.lastScrollPosition;
+      this.lastScrollPosition = currentScrollPosition;
+    },
+
   },
 
   mounted() {
     this.$nextTick(() => {
       this.$el.removeAttribute('hidden');
       this.setDefaultTheme();
+      window.addEventListener('scroll', this.onScroll);
     });
   },
+
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.onScroll);
+  },
+
 };
 </script>
 
@@ -124,6 +144,13 @@ export default {
       font-weight: 500;
     }
   }
+  .v-footer {
+    transform: translate3d(0, 0, 0);
+    transition: 200ms all ease-in-out;
+    &.footer--hidden {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
 </style>
 
 <style lang="scss">

src/components/AudioPlayer.vue

@@ -5,14 +5,14 @@
       class="audio-player"
       dark
       bottom
-      height="98"
+      height="127"
       fixed
       app
     >
       <v-card
         tile
         width="100%"
-        height="98"
+        height="127"
         style="margin-left: 0 !important;"
       >
         <v-progress-linear