Fix style

This commit is contained in:
syuilo 2021-02-20 21:02:59 +09:00
parent 25d37302a8
commit 9860489f88
3 changed files with 14 additions and 12 deletions

View File

@ -8,10 +8,10 @@
<MkError v-if="error" @retry="init()"/> <MkError v-if="error" @retry="init()"/>
<div v-show="more && reversed" style="margin-bottom: var(--margin);"> <div v-show="more && reversed" style="margin-bottom: var(--margin);">
<button class="_buttonPrimary" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template> <template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template> <template v-if="moreFetching"><MkLoading inline/></template>
</button> </MkButton>
</div> </div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
@ -19,10 +19,10 @@
</XList> </XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);"> <div v-show="more && !reversed" style="margin-top: var(--margin);">
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template> <template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template> <template v-if="moreFetching"><MkLoading inline/></template>
</button> </MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -32,10 +32,11 @@ import { defineComponent } from 'vue';
import paging from '@/scripts/paging'; import paging from '@/scripts/paging';
import XNote from './note.vue'; import XNote from './note.vue';
import XList from './date-separated-list.vue'; import XList from './date-separated-list.vue';
import MkButton from '@/components/ui/button.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
XNote, XList, XNote, XList, MkButton,
}, },
mixins: [ mixins: [

View File

@ -8,10 +8,10 @@
<MkError v-if="error" @retry="init()"/> <MkError v-if="error" @retry="init()"/>
<div v-show="more && reversed" style="margin-bottom: var(--margin);"> <div v-show="more && reversed" style="margin-bottom: var(--margin);">
<button class="_buttonPrimary" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <MkButton class="_buttonPrimary" style="margin: 0 auto;" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template> <template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template> <template v-if="moreFetching"><MkLoading inline/></template>
</button> </MkButton>
</div> </div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
@ -19,10 +19,10 @@
</XList> </XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);"> <div v-show="more && !reversed" style="margin-top: var(--margin);">
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <MkButton class="_buttonPrimary" style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template> <template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template> <template v-if="moreFetching"><MkLoading inline/></template>
</button> </MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -32,10 +32,11 @@ import { defineComponent } from 'vue';
import paging from '@/scripts/paging'; import paging from '@/scripts/paging';
import XNote from './note.vue'; import XNote from './note.vue';
import XList from './date-separated-list.vue'; import XList from './date-separated-list.vue';
import MkButton from '@/components/ui/button.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
XNote, XList, XNote, XList, MkButton,
}, },
mixins: [ mixins: [

View File

@ -221,9 +221,8 @@ export default defineComponent({
queueUpdated(q) { queueUpdated(q) {
if (this.$refs.body.offsetWidth !== 0) { if (this.$refs.body.offsetWidth !== 0) {
const rect = this.$refs.body.getBoundingClientRect(); const rect = this.$refs.body.getBoundingClientRect();
const scrollTop = getScrollPosition(this.$refs.body);
this.width = this.$refs.body.offsetWidth; this.width = this.$refs.body.offsetWidth;
this.top = rect.top + scrollTop; this.top = rect.top;
this.bottom = this.$refs.body.offsetHeight; this.bottom = this.$refs.body.offsetHeight;
} }
this.queue = q; this.queue = q;
@ -264,6 +263,7 @@ export default defineComponent({
} }
.dbiokgaf.tl { .dbiokgaf.tl {
position: relative;
padding: 16px 0; padding: 16px 0;
flex: 1; flex: 1;
min-width: 0; min-width: 0;