{WIP} Bulma => Knacss
This commit is contained in:
parent
ff9c3d0113
commit
4c80b6d9f1
9 changed files with 393 additions and 235 deletions
|
|
@ -1,5 +1,32 @@
|
||||||
.ajouter-un-album {
|
.ajouter-un-album {
|
||||||
span.item {
|
@include respond-to("small") {
|
||||||
|
display: block;
|
||||||
|
padding: 0 .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list{
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 2px solid #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
span {
|
||||||
margin-right: 0.6rem;
|
margin-right: 0.6rem;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -7,10 +34,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
|
||||||
&::after {
|
&::after {
|
||||||
|
margin-right: 0;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #dbdbdb;
|
border-color: #dbdbdb;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
|
||||||
&.is-danger {
|
&.is-danger {
|
||||||
background-color: #f14668;
|
background-color: #f14668;
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,41 @@
|
||||||
.field {
|
.field {
|
||||||
padding-top: .6rem;
|
padding-top: .6rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
&.has-addons {
|
&.has-addons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
input {
|
input,
|
||||||
|
select {
|
||||||
|
border-radius: 0.375rem;
|
||||||
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
|
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #dbdbdb !important;
|
border: 1px solid #dbdbdb !important;
|
||||||
color: #363636;
|
color: #363636;
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
border: 1px solid #b9b9b9 !important;
|
||||||
|
outline: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -33,7 +33,9 @@
|
||||||
@import './modal';
|
@import './modal';
|
||||||
@import './toast';
|
@import './toast';
|
||||||
@import './flash';
|
@import './flash';
|
||||||
|
@import './pagination';
|
||||||
|
|
||||||
@import './home';
|
@import './home';
|
||||||
@import './connexion';
|
@import './connexion';
|
||||||
@import './ajouter-un-album';
|
@import './ajouter-un-album';
|
||||||
|
@import './ma-collection';
|
||||||
47
sass/ma-collection.scss
Normal file
47
sass/ma-collection.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
.ma-collection {
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
|
||||||
|
.field {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("small-up") {
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("small") {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list{
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 2px solid #4a4a4a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,37 @@
|
||||||
.pagination-link,
|
.pagination {
|
||||||
.pagination-link,
|
font-size: 1rem;
|
||||||
.pagination-next,
|
align-items: center;
|
||||||
.pagination-next,
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 1rem 0;
|
||||||
|
|
||||||
.pagination-previous,
|
.pagination-previous,
|
||||||
.pagination-previous {
|
.pagination-next,
|
||||||
&.is-disabled,
|
.pagination-link {
|
||||||
&[disabled] {
|
align-items: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: .375em;
|
||||||
|
box-shadow: none;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: 2.5em;
|
||||||
|
justify-content: flex-start;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-bottom: calc(.5em - 1px);
|
||||||
|
padding-left: calc(.75em - 1px);
|
||||||
|
padding-right: calc(.75em - 1px);
|
||||||
|
padding-top: calc(.5em - 1px);
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #b5b5b5;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-disabled {
|
||||||
background-color: #dbdbdb;
|
background-color: #dbdbdb;
|
||||||
border-color: #dbdbdb;
|
border-color: #dbdbdb;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
@ -13,3 +39,47 @@
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination-previous,
|
||||||
|
.pagination-next,
|
||||||
|
.pagination-link {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
margin: .25rem;
|
||||||
|
border-color: #dbdbdb;
|
||||||
|
color: #363636;
|
||||||
|
min-width: 2.5em;
|
||||||
|
padding-left: .75em;
|
||||||
|
padding-right: .75em;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.pagination-previous {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
.pagination-next {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-link {
|
||||||
|
&.is-current {
|
||||||
|
background-color: #485fc7;
|
||||||
|
border-color: #485fc7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-list {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
justify-content: flex-start;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,46 @@
|
||||||
<section class="layout-maxed ajouter-un-album" id="app">
|
<section class="layout-maxed ajouter-un-album" id="app">
|
||||||
|
<div class="grid sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<form @submit="search">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
|
||||||
|
<button class="button is-link" :disabled="loading">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="list" v-if="!loading" v-for="item in items">
|
||||||
|
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
||||||
|
</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 class="items">
|
||||||
|
<strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span>
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<span class="items">
|
||||||
|
<strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span>
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<span class="items">
|
||||||
|
<strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
|
<div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
|
||||||
<div class="modal-background"></div>
|
<div class="modal-background"></div>
|
||||||
<div class="modal-card">
|
<div class="modal-card">
|
||||||
|
|
@ -92,63 +134,6 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-hero">
|
|
||||||
<form @submit="search">
|
|
||||||
<div class="field has-addons">
|
|
||||||
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
|
|
||||||
<button class="button is-link" :disabled="loading">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fas fa-search"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<table class="mt-20">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Pochette</th>
|
|
||||||
<th>Titre</th>
|
|
||||||
<th>Pays</th>
|
|
||||||
<th>Année</th>
|
|
||||||
<th>Format</th>
|
|
||||||
<th>Genres</th>
|
|
||||||
<th>Styles</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-if="loading">
|
|
||||||
<td colspan="7">
|
|
||||||
Chargement en cours…
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-for="item in items">
|
|
||||||
<td>
|
|
||||||
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a @click="loadDetails(item.id)">{{ item.title }}</a>
|
|
||||||
</td>
|
|
||||||
<td>{{ item.year }}</td>
|
|
||||||
<td>{{ item.country }}</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="format in item.format">{{ format }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="genre in item.genre">{{ genre }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="style in item.style">{{ style }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,8 @@
|
||||||
<div class="container" id="app">
|
<section class="layout-maxed ma-collection" id="app">
|
||||||
<table class="table is-striped is-hoverable is-fullwidth">
|
<div class="filters">
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Pochette</th>
|
|
||||||
<th>
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">
|
<label for="artist">Artiste</label>
|
||||||
<span class="icon-text">
|
<select id="artist" v-model="artist" @change="changeFilter">
|
||||||
<span class="icon has-text-info">
|
|
||||||
<i v-if="sort !== 'artists_sort'" class="fa-solid fa-sort" @click="changeSort('artists_sort', 'asc')"></i>
|
|
||||||
<i v-if="sort === 'artists_sort' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('artists_sort', 'asc')"></i>
|
|
||||||
<i v-if="sort === 'artists_sort' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('artists_sort', 'desc')"></i>
|
|
||||||
</span>
|
|
||||||
<span>Artiste</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="select is-small">
|
|
||||||
<select v-model="artist" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
<option value="">Tous</option>
|
||||||
<%
|
<%
|
||||||
for (let i = 0; i < page.artists.length; i += 1 ) {
|
for (let i = 0; i < page.artists.length; i += 1 ) {
|
||||||
|
|
@ -26,44 +11,101 @@
|
||||||
%>
|
%>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="format">Format</label>
|
||||||
|
<select id="format" v-model="format" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.formats.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="sortOrder">Trier par</label>
|
||||||
|
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
||||||
|
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
||||||
|
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
||||||
|
<option value="year-asc">Année (A-Z)</option>
|
||||||
|
<option value="year-desc">Année (Z-A)</option>
|
||||||
|
<option value="country-asc">Pays (A-Z)</option>
|
||||||
|
<option value="country-desc">Pays (Z-A)</option>
|
||||||
|
<option value="formats.name-asc">Format (A-Z)</option>
|
||||||
|
<option value="formats.name-desc">Format (Z-A)</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list" 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" style="max-width: 120px;"/>
|
||||||
|
</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 class="item"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span>
|
||||||
|
<br />
|
||||||
|
<span class="item"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
|
||||||
|
<br />
|
||||||
|
<span class="item"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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': (page*limit) >= total}" @click="next">Suivant</a>
|
||||||
|
<ul class="pagination-list">
|
||||||
|
<li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
||||||
|
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- <table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Pochette</th>
|
||||||
|
<th>
|
||||||
|
|
||||||
</th>
|
</th>
|
||||||
<th>Titre</th>
|
<th>Titre</th>
|
||||||
<th>
|
<th>
|
||||||
<span class="icon-text">
|
<div class="field">
|
||||||
<span class="icon has-text-info">
|
<span @click="changeSort('year', sort !== 'year' || order === 'desc' ? 'asc' : 'desc')">
|
||||||
<i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
|
<span class="icon">
|
||||||
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
|
<i v-if="sort !== 'year'" class="fa-solid fa-sort"></i>
|
||||||
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
|
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down"></i>
|
||||||
|
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up"></i>
|
||||||
</span>
|
</span>
|
||||||
<span>Année</span>
|
<span>Année</span>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</div>
|
||||||
<th>
|
|
||||||
<span class="icon-text">
|
|
||||||
<span class="icon has-text-info">
|
|
||||||
<i v-if="sort !== 'country'" class="fa-solid fa-sort" @click="changeSort('country', 'asc')"></i>
|
|
||||||
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('country', 'asc')"></i>
|
|
||||||
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('country', 'desc')"></i>
|
|
||||||
</span>
|
|
||||||
<span>Pays</span>
|
|
||||||
</span>
|
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">
|
<span @click="changeSort('country', sort !== 'country' || order === 'desc' ? 'asc' : 'desc')">
|
||||||
<span class="icon-text">
|
<span class="icon">
|
||||||
<span class="icon has-text-info">
|
<i v-if="sort !== 'country'" class="fa-solid fa-sort"></i>
|
||||||
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
|
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down"></i>
|
||||||
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
|
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up"></i>
|
||||||
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
|
|
||||||
</span>
|
</span>
|
||||||
<span>Format</span>
|
<span>Pays</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="field">
|
||||||
|
<span @click="changeSort('formats.name', sort !== 'formats.name' || order === 'desc' ? 'asc' : 'desc')">
|
||||||
|
<span class="icon">
|
||||||
|
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort"></i>
|
||||||
|
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down"></i>
|
||||||
|
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up"></i>
|
||||||
|
</span>
|
||||||
|
<span>Artiste</span>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="select is-small">
|
|
||||||
<select v-model="format" @change="changeFilter">
|
<select v-model="format" @change="changeFilter">
|
||||||
<option value="">Tous</option>
|
<option value="">Tous</option>
|
||||||
<%
|
<%
|
||||||
|
|
@ -73,75 +115,14 @@
|
||||||
%>
|
%>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</th>
|
</th>
|
||||||
<th>Genres</th>
|
<th>Genres</th>
|
||||||
<th>Styles</th>
|
<th>Styles</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
|
||||||
<tr v-if="loading">
|
</table> -->
|
||||||
<td colspan="8">
|
</section>
|
||||||
Chargement en cours…
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="!loading" v-for="item in items">
|
|
||||||
<td>
|
|
||||||
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
|
||||||
</td>
|
|
||||||
<td>{{ item.artists_sort }}</td>
|
|
||||||
<td>
|
|
||||||
<a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
|
|
||||||
</td>
|
|
||||||
<td>{{ item.year }}</td>
|
|
||||||
<td>{{ item.country }}</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="format in item.formats">{{ format.name }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="genre in item.genres">{{ genre }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="style in item.styles">{{ style }}</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<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': (page*limit) >= total}" @click="next">Suivant</a>
|
|
||||||
<ul class="pagination-list">
|
|
||||||
<li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
|
||||||
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
|
|
||||||
</li>
|
|
||||||
<!-- <li>
|
|
||||||
<span class="pagination-ellipsis">…</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="pagination-ellipsis">…</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Vue.createApp({
|
Vue.createApp({
|
||||||
|
|
@ -152,9 +133,10 @@
|
||||||
total: 0,
|
total: 0,
|
||||||
page: 1,
|
page: 1,
|
||||||
totalPages: 1,
|
totalPages: 1,
|
||||||
limit: 5,
|
limit: 10,
|
||||||
artist: '',
|
artist: '',
|
||||||
format: '',
|
format: '',
|
||||||
|
sortOrder: 'artists_sort-asc',
|
||||||
sort: 'artists_sort',
|
sort: 'artists_sort',
|
||||||
order: 'asc',
|
order: 'asc',
|
||||||
}
|
}
|
||||||
|
|
@ -207,7 +189,9 @@
|
||||||
|
|
||||||
this.fetch();
|
this.fetch();
|
||||||
},
|
},
|
||||||
changeSort(sort, order) {
|
changeSort() {
|
||||||
|
console.log('TEST:', this.sortOrder);
|
||||||
|
const [sort,order] = this.sortOrder.split('-');
|
||||||
this.sort = sort;
|
this.sort = sort;
|
||||||
this.order = order;
|
this.order = order;
|
||||||
this.page = 1;
|
this.page = 1;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue