Some fixes on css
This commit is contained in:
parent
e2f4ddeb5a
commit
c02d5e9ebd
12 changed files with 152 additions and 120 deletions
|
|
@ -1,18 +1,19 @@
|
|||
<section class="layout-maxed ajouter-un-album" id="app">
|
||||
<main class="layout-maxed ajouter-un-album" id="app">
|
||||
<h1>Ajouter un album</h1>
|
||||
<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)" autofocus>
|
||||
<button class="button is-link" :disabled="loading">
|
||||
<span class="icon">
|
||||

|
||||
</span>
|
||||
<i class="icon-search" v-if="!loading"></i>
|
||||
<i class="icon-spin animate-spin" v-if="loading"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 list">
|
||||
<div class="item" v-if="!loading" v-for="item in items">
|
||||
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||
|
|
@ -149,7 +150,7 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
Vue.createApp({
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<p class="text-justify">
|
||||
<strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
|
||||
<br />
|
||||
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon"></i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon"></i></a>.
|
||||
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon-link"></i></a>.
|
||||
</p>
|
||||
<h2>
|
||||
Pourquoi utiliser My Music Library ?
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
<p class="text-justify">
|
||||
<strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
|
||||
<ul>
|
||||
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon"></i></a>.</li>
|
||||
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon"></i></a>.</li>
|
||||
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon"></i></a>.</li>
|
||||
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon-link"></i></a>.</li>
|
||||
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon-link"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon-link"></i></a>.</li>
|
||||
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon-link"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon-link"></i></a>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</main>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<section class="layout-maxed ma-collection" id="app">
|
||||
<main class="layout-maxed ma-collection" id="app">
|
||||
<h1>Ma collection</h1>
|
||||
<div class="filters">
|
||||
<div class="field">
|
||||
<label for="artist">Artiste</label>
|
||||
|
|
@ -36,40 +37,40 @@
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" v-if="!loading" v-for="item in items">
|
||||
<span class="title">
|
||||
{{ item.artists_sort}} - {{ item.title }}
|
||||
<span class="icon" @click="showConfirmDelete(item._id)">
|
||||

|
||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
||||
<div class="item" v-if="!loading" v-for="item in items">
|
||||
<span class="title">
|
||||
{{ item.artists_sort}} - {{ item.title }}
|
||||
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|
||||
</span>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<div class="total">
|
||||
<strong>Nombre total d'éléments : </strong>{{total}}
|
||||
|
|
@ -106,7 +107,7 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
Vue.createApp({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue