MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-14 08:15:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Refine hide/show index lists

Browse Source
This commit is contained in:
chme 2020-10-07 09:03:02 +02:00
parent 8eee018d15
commit 8bc3fcd109
3 changed files with 54 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-src/src/main.js
View File

@ -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({

5
web-src/src/mystyles.scss
View File

@ -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);

60
web-src/src/templates/ContentWithHeading.vue
View File

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