mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-09 21:49:48 -05:00
[web] Format web sources with prettier and run fix linting errors
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<slot name="content"></slot>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,5 +16,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -4,33 +4,48 @@
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<section v-if="$slots['options']">
|
||||
<div style="height: 1px;" ref="options_ref" />
|
||||
<slot name="options"></slot>
|
||||
<nav class="buttons is-centered" style="margin-bottom: 6px; margin-top: 16px;">
|
||||
<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>
|
||||
<div ref="options_ref" style="height: 1px" />
|
||||
<slot name="options" />
|
||||
<nav
|
||||
class="buttons is-centered"
|
||||
style="margin-bottom: 6px; margin-top: 16px"
|
||||
>
|
||||
<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" /></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" /></span
|
||||
></a>
|
||||
</nav>
|
||||
</section>
|
||||
<div :class="{'fd-content-with-option': $slots['options']}">
|
||||
<nav class="level" id="top">
|
||||
<div :class="{ 'fd-content-with-option': $slots['options'] }">
|
||||
<nav id="top" class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item has-text-centered-mobile">
|
||||
<div>
|
||||
<slot name="heading-left"></slot>
|
||||
<slot name="heading-left" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right has-text-centered-mobile">
|
||||
<slot name="heading-right"></slot>
|
||||
<slot name="heading-right" />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<slot name="content"></slot>
|
||||
<div style="margin-top: 16px;">
|
||||
<slot name="footer"></slot>
|
||||
<slot name="content" />
|
||||
<div style="margin-top: 16px">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,7 +58,7 @@
|
||||
export default {
|
||||
name: 'ContentWithHeading',
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
options_visible: false
|
||||
}
|
||||
@@ -51,22 +66,19 @@ export default {
|
||||
|
||||
mounted() {
|
||||
if (this.$slots['options']) {
|
||||
this.observer = new IntersectionObserver(
|
||||
this.onElementObserved,
|
||||
{
|
||||
rootMargin: '-82px 0px 0px 0px',
|
||||
threshold: 1.0
|
||||
}
|
||||
)
|
||||
this.observer = new IntersectionObserver(this.onElementObserved, {
|
||||
rootMargin: '-82px 0px 0px 0px',
|
||||
threshold: 1.0
|
||||
})
|
||||
this.observer.observe(this.$refs.options_ref)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onElementObserved(entries) {
|
||||
entries.forEach(({ target, isIntersecting}) => {
|
||||
entries.forEach(({ target, isIntersecting }) => {
|
||||
this.options_visible = isIntersecting
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
scroll_to_top: function () {
|
||||
@@ -89,5 +101,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -5,14 +5,17 @@
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="columns" style="flex-direction: row-reverse;">
|
||||
<div class="columns" style="flex-direction: row-reverse">
|
||||
<div class="column fd-has-cover">
|
||||
<!-- Slot heading right -->
|
||||
<slot name="heading-right"></slot>
|
||||
<slot name="heading-right" />
|
||||
</div>
|
||||
<div class="column is-three-fifths has-text-centered-mobile" style="margin: auto 0;">
|
||||
<!-- Slot heading left -->
|
||||
<slot name="heading-left"></slot>
|
||||
<div
|
||||
class="column is-three-fifths has-text-centered-mobile"
|
||||
style="margin: auto 0"
|
||||
>
|
||||
<!-- Slot heading left -->
|
||||
<slot name="heading-left" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,10 +28,10 @@
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<!-- Slot content -->
|
||||
<slot name="content"></slot>
|
||||
<div style="margin-top: 16px;">
|
||||
<slot name="content" />
|
||||
<div style="margin-top: 16px">
|
||||
<!-- Slot footer -->
|
||||
<slot name="footer"></slot>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,8 +40,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
<script></script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user