72 lines
3.2 KiB
Plaintext
72 lines
3.2 KiB
Plaintext
<main class="layout-maxed collection" id="collection-publique">
|
|
<h1>
|
|
Collection de <%= page.username %>
|
|
</h1>
|
|
|
|
<%- include('../components/filters/index') %>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
|
<div class="loader" v-if="loading">
|
|
<div class="animation"></div>
|
|
<div>
|
|
Chargement des données en cours…
|
|
</div>
|
|
</div>
|
|
<div class="item" v-if="!loading" v-for="item in items">
|
|
<span class="title">
|
|
{{ item.artists_sort}} - {{ item.title }}
|
|
</span>
|
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
|
<div>
|
|
<img :src="item.thumb" :alt="item.title" />
|
|
</div>
|
|
<div class="md:col-span-3">
|
|
<span><strong>Année :</strong> {{ item.year }}</span>
|
|
<br />
|
|
<span><strong>Pays :</strong> {{ item.country }}</span>
|
|
<br />
|
|
<span>
|
|
<strong>Format : </strong>
|
|
<span v-for="(format, index) in item.formats">
|
|
{{ format.name }}
|
|
<template v-if="format.descriptions">
|
|
(<template v-for="(description, j) in format.descriptions">
|
|
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
|
|
</template>)
|
|
</template>
|
|
<template v-if="index < item.formats.length - 1">, </template>
|
|
</span>
|
|
</span>
|
|
<br />
|
|
<span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
|
|
<br />
|
|
<span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="total">
|
|
<strong>Nombre total d'éléments : </strong>{{total}}
|
|
</div>
|
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
|
<ul class="pagination-list">
|
|
<template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
|
<template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
|
|
<li>
|
|
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
|
|
</li>
|
|
</template>
|
|
<template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
|
|
<li>
|
|
<a class="pagination-link is-disabled">…</a>
|
|
</li>
|
|
</template>
|
|
</template>
|
|
</ul>
|
|
</nav>
|
|
</main>
|
|
|
|
<script>
|
|
const userId = "<%= params.userId %>";
|
|
</script>
|