diff --git a/package.json b/package.json
index f248398..7c38831 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"start": "node ./dist/bin/www",
"run:all": "npm-run-all build sass start",
"watch": "nodemon -e js,scss",
- "sass": "npx sass sass/index.scss public/css/main.css -s compressed",
+ "sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
"prebuild": "rimraf dist",
"build": "babel ./src --out-dir dist --copy-files",
"test": "jest",
diff --git a/sass/ajouter-un-album.scss b/sass/ajouter-un-album.scss
index d0a173e..d822e30 100644
--- a/sass/ajouter-un-album.scss
+++ b/sass/ajouter-un-album.scss
@@ -8,40 +8,7 @@
margin-top: 2rem;
.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 {
- border: 2px solid #4a4a4a;
cursor: pointer;
}
}
diff --git a/sass/global.scss b/sass/global.scss
index 8409e52..5130647 100644
--- a/sass/global.scss
+++ b/sass/global.scss
@@ -13,17 +13,6 @@
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 {
min-height: 100vh;
@@ -45,6 +34,10 @@ html {
color: #485fc7;
cursor: pointer;
}
+
+ h1 {
+ margin-top: 2rem;
+ }
}
}
diff --git a/sass/home.scss b/sass/home.scss
index b7b2534..d99023a 100644
--- a/sass/home.scss
+++ b/sass/home.scss
@@ -1,6 +1,5 @@
.home {
.header {
- margin-bottom: 3.25rem;
@include respond-to("small-up") {
height: 30vh;
background-image: url('/header.jpg');
diff --git a/sass/icons.scss b/sass/icons.scss
index 61568bc..ab3cd5f 100644
--- a/sass/icons.scss
+++ b/sass/icons.scss
@@ -1,6 +1,56 @@
-.icon {
- font-family: "icon";
- font-style: normal;
- font-weight: normal;
- text-decoration: inherit;
+@font-face {
+ font-family: 'icon';
+ src: url('/font/icon.eot?80770511');
+ src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'),
+ url('/font/icon.woff2?80770511') format('woff2'),
+ 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);
+ }
}
\ No newline at end of file
diff --git a/sass/index.scss b/sass/index.scss
index ffcb442..99a65af 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -35,6 +35,7 @@
@import './flash';
@import './pagination';
@import './icons';
+@import './list';
@import './error';
@import './home';
diff --git a/sass/list.scss b/sass/list.scss
new file mode 100644
index 0000000..7301e7c
--- /dev/null
+++ b/sass/list.scss
@@ -0,0 +1,42 @@
+.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%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/ma-collection.scss b/sass/ma-collection.scss
index 85c0c0a..69eb680 100644
--- a/sass/ma-collection.scss
+++ b/sass/ma-collection.scss
@@ -24,18 +24,8 @@
}
.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;
-
- .icon {
+ .icon-trash {
cursor: pointer;
color: #f14668;
@@ -44,14 +34,6 @@
}
}
}
-
- .grid {
- margin-top: 0.75rem;
- }
-
- img {
- border: 2px solid #4a4a4a;
- }
}
.total {
diff --git a/views/index.ejs b/views/index.ejs
index 3a526bc..8472832 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -73,9 +73,7 @@
<div class="navbar-item">
<div class="buttons">
<a class="button is-link" href="/ajouter-un-album">
- <span class="icon">
- 
- </span>
+ <i class="icon-plus"></i>
<span>
Ajouter un album
</span>
@@ -92,9 +90,7 @@
<% if ( user ) { %>
<div class="navbar-item has-dropdown">
<a class="navbar-link">
- <span class="icon">
- 
- </span>
+ <i class="icon-user"></i>
<span>
<%= user.username %>
</span>
@@ -160,9 +156,9 @@
<footer class="footer layout-hero">
<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"></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-link"></i></a>.
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"></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-link"></i></a>.
</p>
</footer>
</body>
diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs
index 3051172..6ae0700 100644
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@@ -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({
diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index 043f106..5d9d472 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -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>
\ No newline at end of file
diff --git a/views/pages/mon-compte/ma-collection.ejs b/views/pages/mon-compte/ma-collection.ejs
index 72b472d..2e344ce 100644
--- a/views/pages/mon-compte/ma-collection.ejs
+++ b/views/pages/mon-compte/ma-collection.ejs
@@ -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({