michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

{WIP} Bulma => Knacss

Browse source
This commit is contained in:
Damien Broqua 2022-02-18 16:53:54 +01:00
parent ff9c3d0113
commit 4c80b6d9f1
9 changed files with 393 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

99
views/pages/ajouter-un-album/search.ejs
View file

@ -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>