[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,29 +4,34 @@
       <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>
-          <nav class="level" id="top">
+          <div :class="{'fd-content-with-option': $slots['options']}">
-            <!-- Left side -->
+            <nav class="level" id="top">
-            <div class="level-left">
+              <!-- Left side -->
-              <div class="level-item has-text-centered-mobile">
+              <div class="level-left">
-                <div>
+                <div class="level-item has-text-centered-mobile">
-                  <slot name="heading-left"></slot>
+                  <div>
+                    <slot name="heading-left"></slot>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <!-- Right side -->
+              <!-- Right side -->
-            <div class="level-right has-text-centered-mobile">
+              <div class="level-right has-text-centered-mobile">
-              <slot name="heading-right"></slot>
+                <slot name="heading-right"></slot>
+              </div>
+            </nav>
+
+            <slot name="content"></slot>
+            <div style="margin-top: 16px;">
+              <slot name="footer"></slot>
             </div>
-          </nav>
-          <slot name="content"></slot>
-          <div style="margin-top: 16px;">
-            <slot name="footer"></slot>
           </div>
         </div>
       </div>
@@ -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
     }
   }
 }