Compare commits
No commits in common. "1dc940db7d55812a88cb56e44ebeb9134c1942da" and "c6686f6e356b5a64b8a8c961271b7c8f5646a646" have entirely different histories.
1dc940db7d
...
c6686f6e35
12 changed files with 121 additions and 153 deletions
|
|
@ -6,7 +6,7 @@
|
||||||
"start": "node ./dist/bin/www",
|
"start": "node ./dist/bin/www",
|
||||||
"run:all": "npm-run-all build sass start",
|
"run:all": "npm-run-all build sass start",
|
||||||
"watch": "nodemon -e js,scss",
|
"watch": "nodemon -e js,scss",
|
||||||
"sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
|
"sass": "npx sass sass/index.scss public/css/main.css -s compressed",
|
||||||
"prebuild": "rimraf dist",
|
"prebuild": "rimraf dist",
|
||||||
"build": "babel ./src --out-dir dist --copy-files",
|
"build": "babel ./src --out-dir dist --copy-files",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,40 @@
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
|
|
||||||
.item{
|
.item{
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
@include respond-to("large") {
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include respond-to("large-up") {
|
||||||
|
border-left: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
&:first-child,
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-top: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n),
|
||||||
|
&:last-child {
|
||||||
|
border-right: 1px solid #dbdbdb;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
border: 2px solid #4a4a4a;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,17 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'icon';
|
||||||
|
src: url('/font/icon.eot?52730206');
|
||||||
|
src: url('/font/icon.eot?52730206#iefix') format('embedded-opentype'),
|
||||||
|
url('/font/icon.woff?52730206') format('woff'),
|
||||||
|
url('/font/icon.ttf?52730206') format('truetype'),
|
||||||
|
url('/font/icon.svg?52730206#icon') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
|
|
@ -34,10 +45,6 @@ html {
|
||||||
color: #485fc7;
|
color: #485fc7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
.home {
|
.home {
|
||||||
.header {
|
.header {
|
||||||
|
margin-bottom: 3.25rem;
|
||||||
@include respond-to("small-up") {
|
@include respond-to("small-up") {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
background-image: url('/header.jpg');
|
background-image: url('/header.jpg');
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,6 @@
|
||||||
@font-face {
|
.icon {
|
||||||
font-family: 'icon';
|
font-family: "icon";
|
||||||
src: url('/font/icon.eot?80770511');
|
font-style: normal;
|
||||||
src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'),
|
font-weight: normal;
|
||||||
url('/font/icon.woff2?80770511') format('woff2'),
|
text-decoration: inherit;
|
||||||
url('/font/icon.woff?80770511') format('woff'),
|
|
||||||
url('/font/icon.ttf?80770511') format('truetype'),
|
|
||||||
url('/font/icon.svg?80770511#icon') format('svg');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
|
||||||
font-family: "icon";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: inherit;
|
|
||||||
width: 1em;
|
|
||||||
margin-right: .2em;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
line-height: 1em;
|
|
||||||
|
|
||||||
margin-left: .2em;
|
|
||||||
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-plus:before { content: '\e800'; } /* '' */
|
|
||||||
.icon-user:before { content: '\e801'; } /* '' */
|
|
||||||
.icon-search:before { content: '\e802'; } /* '' */
|
|
||||||
.icon-mail:before { content: '\e803'; } /* '' */
|
|
||||||
.icon-link:before { content: '\e804'; } /* '' */
|
|
||||||
.icon-spin:before { content: '\e839'; } /* '' */
|
|
||||||
.icon-link-ext:before { content: '\f08e'; } /* '' */
|
|
||||||
.icon-trash:before { content: '\f1f8'; } /* '' */
|
|
||||||
|
|
||||||
.animate-spin {
|
|
||||||
animation: spin 2s infinite linear;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -35,7 +35,6 @@
|
||||||
@import './flash';
|
@import './flash';
|
||||||
@import './pagination';
|
@import './pagination';
|
||||||
@import './icons';
|
@import './icons';
|
||||||
@import './list';
|
|
||||||
|
|
||||||
@import './error';
|
@import './error';
|
||||||
@import './home';
|
@import './home';
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
.list {
|
|
||||||
margin-top: 2rem;
|
|
||||||
|
|
||||||
.item{
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border-bottom: 1px solid #dbdbdb;
|
|
||||||
|
|
||||||
@include respond-to("medium") {
|
|
||||||
&:nth-child(2n) {
|
|
||||||
background-color: #fafafa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include respond-to("medium-up") {
|
|
||||||
border-left: 1px solid #dbdbdb;
|
|
||||||
|
|
||||||
&:first-child,
|
|
||||||
&:nth-child(2) {
|
|
||||||
border-top: 1px solid #dbdbdb;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2n),
|
|
||||||
&:last-child {
|
|
||||||
border-right: 1px solid #dbdbdb;
|
|
||||||
margin-right: -1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 2px solid #4a4a4a;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -24,8 +24,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.list{
|
.list{
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
.icon-trash {
|
font-weight: 800;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
|
||||||
|
.icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #f14668;
|
color: #f14668;
|
||||||
|
|
||||||
|
|
@ -34,6 +44,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 2px solid #4a4a4a;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.total {
|
.total {
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,9 @@
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a class="button is-link" href="/ajouter-un-album">
|
<a class="button is-link" href="/ajouter-un-album">
|
||||||
<i class="icon-plus"></i>
|
<span class="icon">
|
||||||
|

|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
Ajouter un album
|
Ajouter un album
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -90,7 +92,9 @@
|
||||||
<% if ( user ) { %>
|
<% if ( user ) { %>
|
||||||
<div class="navbar-item has-dropdown">
|
<div class="navbar-item has-dropdown">
|
||||||
<a class="navbar-link">
|
<a class="navbar-link">
|
||||||
<i class="icon-user"></i>
|
<span class="icon">
|
||||||
|

|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<%= user.username %>
|
<%= user.username %>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -156,9 +160,9 @@
|
||||||
|
|
||||||
<footer class="footer layout-hero">
|
<footer class="footer layout-hero">
|
||||||
<p>
|
<p>
|
||||||
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
|
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon"></i></a>.
|
||||||
Fait avec ❤ à Bordeaux.
|
Fait avec ❤ à Bordeaux.
|
||||||
Le code source est sous licence <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 sous licence <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>.
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,18 @@
|
||||||
<main class="layout-maxed ajouter-un-album" id="app">
|
<section class="layout-maxed ajouter-un-album" id="app">
|
||||||
<h1>Ajouter un album</h1>
|
|
||||||
<div class="grid sm:grid-cols-2">
|
<div class="grid sm:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<form @submit="search">
|
<form @submit="search">
|
||||||
<div class="field has-addons">
|
<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>
|
<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">
|
<button class="button is-link" :disabled="loading">
|
||||||
<i class="icon-search" v-if="!loading"></i>
|
<span class="icon">
|
||||||
<i class="icon-spin animate-spin" v-if="loading"></i>
|

|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 list">
|
<div class="grid grid-cols-1 lg:grid-cols-2 list">
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||||
|
|
@ -150,7 +149,7 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Vue.createApp({
|
Vue.createApp({
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<p class="text-justify">
|
<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ù.
|
<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 />
|
<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-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>.
|
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>.
|
||||||
</p>
|
</p>
|
||||||
<h2>
|
<h2>
|
||||||
Pourquoi utiliser My Music Library ?
|
Pourquoi utiliser My Music Library ?
|
||||||
|
|
@ -25,9 +25,9 @@
|
||||||
<p class="text-justify">
|
<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 🤔).
|
<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>
|
<ul>
|
||||||
<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>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-link"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <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"></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-link"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <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"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon"></i></a>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<main class="layout-maxed ma-collection" id="app">
|
<section class="layout-maxed ma-collection" id="app">
|
||||||
<h1>Ma collection</h1>
|
|
||||||
<div class="filters">
|
<div class="filters">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="artist">Artiste</label>
|
<label for="artist">Artiste</label>
|
||||||
|
|
@ -37,38 +36,38 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="list" v-if="!loading" v-for="item in items">
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<span class="title">
|
||||||
<span class="title">
|
{{ item.artists_sort}} - {{ item.title }}
|
||||||
{{ item.artists_sort}} - {{ item.title }}
|
<span class="icon" @click="showConfirmDelete(item._id)">
|
||||||
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|

|
||||||
</span>
|
</span>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
</span>
|
||||||
<div>
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
<img :src="item.thumb" :alt="item.title" />
|
<div>
|
||||||
</div>
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
||||||
<div class="md:col-span-3">
|
</div>
|
||||||
<span><strong>Année :</strong> {{ item.year }}</span>
|
<div class="md:col-span-3">
|
||||||
<br />
|
<span><strong>Année :</strong> {{ item.year }}</span>
|
||||||
<span><strong>Pays :</strong> {{ item.country }}</span>
|
<br />
|
||||||
<br />
|
<span><strong>Pays :</strong> {{ item.country }}</span>
|
||||||
<span>
|
<br />
|
||||||
<strong>Format : </strong>
|
<span>
|
||||||
<span v-for="(format, index) in item.formats">
|
<strong>Format : </strong>
|
||||||
{{ format.name }}
|
<span v-for="(format, index) in item.formats">
|
||||||
<template v-if="format.descriptions">
|
{{ format.name }}
|
||||||
(<template v-for="(description, j) in format.descriptions">
|
<template v-if="format.descriptions">
|
||||||
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
|
(<template v-for="(description, j) in format.descriptions">
|
||||||
</template>)
|
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
|
||||||
</template>
|
</template>)
|
||||||
<template v-if="index < item.formats.length - 1">, </template>
|
</template>
|
||||||
</span>
|
<template v-if="index < item.formats.length - 1">, </template>
|
||||||
</span>
|
</span>
|
||||||
<br />
|
</span>
|
||||||
<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 />
|
||||||
<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>
|
||||||
<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 />
|
||||||
</div>
|
<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>
|
||||||
|
|
@ -107,7 +106,7 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Vue.createApp({
|
Vue.createApp({
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue