[web] Format web sources with prettier and run fix linting errors

This commit is contained in:
chme
2022-02-19 06:39:14 +01:00
parent d7f1c13585
commit c78f861f45
116 changed files with 5274 additions and 2887 deletions

View File

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

View File

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

View File

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