dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Fixed bug in pagination on mobile device

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 22:46:37 +01:00
parent 549614773b
commit a175e39eed
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
sass/pagination.scss
View file

@ -55,12 +55,12 @@
}
}
.pagination-previous {
.pagination-previous-next {
order: 2;
}
.pagination-next {
order: 3;
}
// .pagination-next {
// order: 3;
// }
.pagination-link {
&.is-current {
@ -80,4 +80,13 @@
justify-content: flex-start;
order: 1;
}
@include respond-to("small") {
flex-direction: column;
.pagination-previous-next {
margin-bottom: 1rem;
order: 1;
}
}
}

6
views/pages/mon-compte/ma-collection.ejs
View file

@ -76,8 +76,10 @@
<strong>Nombre total d'éléments : </strong>{{total}}
</div>
<nav class="pagination" role="navigation" aria-label="Pagination">
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
<a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
<div class="pagination-previous-next">
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
<a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
</div>
<ul class="pagination-list">
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
<template v-if="p < 4 || p > (totalPages - 3) || (page - 3) <= p && page + 3 >= p">