[web-src] Refine hide/show index lists

web-src/src/main.js

@@ -8,6 +8,8 @@ import './filter'
 import './progress'
 import vClickOutside from 'v-click-outside'
 import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
+import VueObserveVisibility from 'vue-observe-visibility'
+import VueScrollTo from 'vue-scrollto'
 import 'mdi/css/materialdesignicons.css'
 import 'vue-range-slider/dist/vue-range-slider.css'
 import './mystyles.scss'
@@ -15,6 +17,8 @@ Vue.config.productionTip = false
 
 Vue.use(vClickOutside)
 Vue.use(VueTinyLazyloadImg)
+Vue.use(VueObserveVisibility)
+Vue.use(VueScrollTo)
 
 /* eslint-disable no-new */
 new Vue({

web-src/src/mystyles.scss

@@ -115,6 +115,11 @@ section.hero + section.fd-content {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+/* Set minimum height to hide "option" section */
+.fd-content-with-option {
+  min-height: calc(100vh - 3.25rem - 3.25rem - 8rem);
+}
+
 /* Now playing page */
 .fd-is-fullheight {
   height: calc(100vh - 3.25rem - 3.25rem);

web-src/src/templates/ContentWithHeading.vue

@@ -4,11 +4,14 @@
       <div class="columns is-centered">
         <div class="column is-four-fifths">
           <section v-if="$slots['options']">
+            <div v-observe-visibility="observer_options"></div>
             <slot name="options"></slot>
             <nav class="buttons is-centered" style="margin-bottom: 6px; margin-top: 16px;">
-              <a class="button is-small is-white" @click="scroll_to_top"><span class="icon is-small"><i class="mdi mdi-chevron-up"></i></span></a>
+              <a v-if="!options_visible" class="button is-small is-white" @click="scroll_to_top"><span class="icon is-small"><i class="mdi mdi-chevron-up"></i></span></a>
+              <a v-else class="button is-small is-white" @click="scroll_to_content"><span class="icon is-small"><i class="mdi mdi-chevron-down"></i></span></a>
             </nav>
           </section>
+          <div :class="{'fd-content-with-option': $slots['options']}">
             <nav class="level" id="top">
               <!-- Left side -->
               <div class="level-left">
@@ -24,6 +27,7 @@
                 <slot name="heading-right"></slot>
               </div>
             </nav>
+
             <slot name="content"></slot>
             <div style="margin-top: 16px;">
               <slot name="footer"></slot>
@@ -31,6 +35,7 @@
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 
@@ -38,9 +43,34 @@
 export default {
   name: 'ContentWithHeading',
 
+  data () {
+    return {
+      options_visible: false,
+      observer_options: {
+        callback: this.visibilityChanged,
+        intersection: {
+          rootMargin: '-100px'
+        }
+      }
+    }
+  },
+
   methods: {
     scroll_to_top: function () {
       window.scrollTo({ top: 0, behavior: 'smooth' })
+    },
+
+    scroll_to_content: function () {
+      // window.scrollTo({ top: 80, behavior: 'smooth' })
+      if (this.$route.meta.has_tabs) {
+        this.$scrollTo('#top', { offset: -140 })
+      } else {
+        this.$scrollTo('#top', { offset: -100 })
+      }
+    },
+
+    visibilityChanged: function (isVisible) {
+      this.options_visible = isVisible
     }
   }
 }