MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pagination now support a compact mode

This commit is contained in:
Eliot Berriot 2018-04-14 16:02:11 +02:00
parent 9b4d7165b7
commit 2e71ddbffc
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/components/Pagination.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="ui pagination borderless menu">
<a
v-if="current - 1 >= 1"
<div class="ui pagination menu">
<div
:disabled="current - 1 < 1"
@click="selectPage(current - 1)"
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
<template>
<a
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></div>
<template v-if="!compact">
<div
v-if="page !== 'skip'"
v-for="page in pages"
@click="selectPage(page)"
:class="[{'active': page === current}, 'item']">
{{ page }}
</a>
<a v-else class="disabled item">
</div>
<div v-else class="disabled item">
...
</a>
</div>
</template>
<a
v-if="current + 1 <= maxPage"
<div
:disabled="current + 1 > maxPage"
@click="selectPage(current + 1)"
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></div>
</div>
</template>
@ -30,7 +30,8 @@ export default {
props: {
current: {type: Number, default: 1},
paginateBy: {type: Number, default: 25},
total: {type: Number}
total: {type: Number},
compact: {type: Boolean, default: false}
},
computed: {
pages: function () {
@ -72,6 +73,9 @@ export default {
},
methods: {
selectPage: function (page) {
if (page > this.maxPage || page < 1) {
return
}
if (this.current !== page) {
this.$emit('page-changed', page)
}