MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-09 21:49:48 -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
Download Patch File Download Diff File Expand all files Collapse all files

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
}
}
}