{WIP} Bulma => Knacss
This commit is contained in:
parent
ff9c3d0113
commit
4c80b6d9f1
9 changed files with 393 additions and 235 deletions
|
|
@ -1,4 +1,46 @@
|
|||
<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-background"></div>
|
||||
<div class="modal-card">
|
||||
|
|
@ -92,63 +134,6 @@
|
|||
</footer>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,119 +1,60 @@
|
|||
<div class="container" id="app">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pochette</th>
|
||||
<th>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<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>
|
||||
<%
|
||||
for (let i = 0; i < page.artists.length; i += 1 ) {
|
||||
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
||||
}
|
||||
%>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>Titre</th>
|
||||
<th>
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
|
||||
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
|
||||
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
|
||||
</span>
|
||||
<span>Année</span>
|
||||
</span>
|
||||
</th>
|
||||
<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>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></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 === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
|
||||
</span>
|
||||
<span>Format</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<div class="select is-small">
|
||||
<select 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>
|
||||
</div>
|
||||
</th>
|
||||
<th>Genres</th>
|
||||
<th>Styles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="8">
|
||||
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>
|
||||
<section class="layout-maxed ma-collection" id="app">
|
||||
<div class="filters">
|
||||
<div class="field">
|
||||
<label for="artist">Artiste</label>
|
||||
<select id="artist" v-model="artist" @change="changeFilter">
|
||||
<option value="">Tous</option>
|
||||
<%
|
||||
for (let i = 0; i < page.artists.length; i += 1 ) {
|
||||
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
||||
}
|
||||
%>
|
||||
</select>
|
||||
</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 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>
|
||||
|
|
@ -121,27 +62,67 @@
|
|||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- <table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pochette</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
<th>Titre</th>
|
||||
<th>
|
||||
<div class="field">
|
||||
<span @click="changeSort('year', sort !== 'year' || order === 'desc' ? 'asc' : 'desc')">
|
||||
<span class="icon">
|
||||
<i v-if="sort !== 'year'" class="fa-solid fa-sort"></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>Année</span>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="field">
|
||||
<span @click="changeSort('country', sort !== 'country' || order === 'desc' ? 'asc' : 'desc')">
|
||||
<span class="icon">
|
||||
<i v-if="sort !== 'country'" class="fa-solid fa-sort"></i>
|
||||
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down"></i>
|
||||
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up"></i>
|
||||
</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>
|
||||
<select 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>
|
||||
</th>
|
||||
<th>Genres</th>
|
||||
<th>Styles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
</table> -->
|
||||
</section>
|
||||
|
||||
<script>
|
||||
Vue.createApp({
|
||||
|
|
@ -152,9 +133,10 @@
|
|||
total: 0,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
limit: 5,
|
||||
limit: 10,
|
||||
artist: '',
|
||||
format: '',
|
||||
sortOrder: 'artists_sort-asc',
|
||||
sort: 'artists_sort',
|
||||
order: 'asc',
|
||||
}
|
||||
|
|
@ -207,7 +189,9 @@
|
|||
|
||||
this.fetch();
|
||||
},
|
||||
changeSort(sort, order) {
|
||||
changeSort() {
|
||||
console.log('TEST:', this.sortOrder);
|
||||
const [sort,order] = this.sortOrder.split('-');
|
||||
this.sort = sort;
|
||||
this.order = order;
|
||||
this.page = 1;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue