diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/notes.vue | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index be8f68e3a6..487dff16a8 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -7,16 +7,23 @@ <mk-error v-if="error" @retry="init()"/> - <x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }"> + <div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);"> + <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> + <template v-if="!moreFetching">{{ $t('loadMore') }}</template> + <template v-if="moreFetching"><mk-loading inline/></template> + </mk-button> + </div> + + <x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> <x-note :note="note" :detail="detail" :key="note.id"/> </x-list> - <footer class="more" v-if="more"> + <div class="more" v-if="more && !reversed" style="margin-top: var(--margin);"> <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="moreFetching"><mk-loading inline/></template> </mk-button> - </footer> + </div> </div> </template> @@ -67,6 +74,10 @@ export default Vue.extend({ notes(): any[] { return this.extract ? this.extract(this.items) : this.items; }, + + reversed(): boolean { + return this.pagination.reversed; + } }, methods: { @@ -92,14 +103,14 @@ export default Vue.extend({ } > .notes { - > ::v-deep * { + > ::v-deep *:not(:last-child) { margin-bottom: var(--marginFull); } } &.max-width_500px { > .notes { - > ::v-deep * { + > ::v-deep *:not(:last-child) { margin-bottom: var(--marginHalf); } } |