Fixed bug in pagination on mobile device
This commit is contained in:
parent
549614773b
commit
a175e39eed
2 changed files with 17 additions and 6 deletions
|
@ -55,12 +55,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-previous {
|
.pagination-previous-next {
|
||||||
order: 2;
|
order: 2;
|
||||||
}
|
}
|
||||||
.pagination-next {
|
// .pagination-next {
|
||||||
order: 3;
|
// order: 3;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.pagination-link {
|
.pagination-link {
|
||||||
&.is-current {
|
&.is-current {
|
||||||
|
@ -80,4 +80,13 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include respond-to("small") {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.pagination-previous-next {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -76,8 +76,10 @@
|
||||||
<strong>Nombre total d'éléments : </strong>{{total}}
|
<strong>Nombre total d'éléments : </strong>{{total}}
|
||||||
</div>
|
</div>
|
||||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
||||||
|
<div class="pagination-previous-next">
|
||||||
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
|
<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>
|
<a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
|
||||||
|
</div>
|
||||||
<ul class="pagination-list">
|
<ul class="pagination-list">
|
||||||
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
<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">
|
<template v-if="p < 4 || p > (totalPages - 3) || (page - 3) <= p && page + 3 >= p">
|
||||||
|
|
Loading…
Reference in a new issue