Minor css changes
This commit is contained in:
parent
3d3228f12d
commit
c94bfb570a
6 changed files with 33 additions and 80 deletions
|
@ -1,16 +1,16 @@
|
|||
<div class="filters">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<%- include('./artist') %>
|
||||
<%- include('./format') %>
|
||||
<%- include('./sort') %>
|
||||
</div>
|
||||
|
||||
<div class="filters" v-if="moreFilters">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10" v-if="moreFilters">
|
||||
<%- include('./year') %>
|
||||
<%- include('./genre') %>
|
||||
<%- include('./style') %>
|
||||
</div>
|
||||
|
||||
<span @click="showMoreFilters" class="showMoreFilters">
|
||||
<span @click="showMoreFilters" class="showMoreFilters mt-10">
|
||||
<template v-if="!moreFilters">Voir plus de filtres</template>
|
||||
<template v-if="moreFilters">Voir moins de filtres</template>
|
||||
<i class="icon-left-open down" v-if="!moreFilters"></i>
|
||||
|
|
|
@ -73,31 +73,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<strong>Nombre total d'éléments : </strong>{{total}}
|
||||
<div class="flex justify-between md:align-items-center flex-col md:flex-row">
|
||||
<div class="total">
|
||||
<strong>Nombre total d'éléments : </strong>{{total}}
|
||||
</div>
|
||||
|
||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
||||
<ul class="flex justify-center md:justify-end pagination-list">
|
||||
<li v-if="page > 1">
|
||||
<a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">«</a>
|
||||
</li>
|
||||
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
||||
<template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
|
||||
<li>
|
||||
<a class="pagination-link" :class="{'is-current': p === Number(page)}" @click="goTo(p)" :aria-label="'Aller à la page '+p">{{ p }}</a>
|
||||
</li>
|
||||
</template>
|
||||
<template v-if="(Number(page) - 3 === p && Number(page) - 2 > 1) || (Number(page) + 2 === p && Number(page) + 2 < totalPages - 1)">
|
||||
<li>
|
||||
<a class="pagination-link is-disabled">…</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
<li v-if="page < totalPages">
|
||||
<a class="pagination-link" @click="goTo(totalPages)" aria-label="Aller à la derière page">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
||||
<ul class="pagination-list">
|
||||
<li v-if="page > 1">
|
||||
<a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">«</a>
|
||||
</li>
|
||||
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
||||
<template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
|
||||
<li>
|
||||
<a class="pagination-link" :class="{'is-current': p === Number(page)}" @click="goTo(p)" :aria-label="'Aller à la page '+p">{{ p }}</a>
|
||||
</li>
|
||||
</template>
|
||||
<template v-if="(Number(page) - 3 === p && Number(page) - 2 > 1) || (Number(page) + 2 === p && Number(page) + 2 < totalPages - 1)">
|
||||
<li>
|
||||
<a class="pagination-link is-disabled">…</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
<li v-if="page < totalPages">
|
||||
<a class="pagination-link" @click="goTo(totalPages)" aria-label="Aller à la derière page">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<% if ( pageType === 'private' ) { %>
|
||||
<div class="modal" :class="{'is-visible': showModalDelete}">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue