12 changed files with 121 additions and 153 deletions
--- 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 --color",
+    "sass": "npx sass sass/index.scss public/css/main.css -s compressed",
    "prebuild": "rimraf dist",
    "build": "babel ./src --out-dir dist --copy-files",
    "test": "jest",
--- a/sass/ajouter-un-album.scss
+++ b/sass/ajouter-un-album.scss
@ -8,7 +8,40 @@
        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;
            }
        }
--- a/sass/global.scss
+++ b/sass/global.scss
@ -13,6 +13,17 @@
    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;

@ -34,10 +45,6 @@ html {
            color: #485fc7;
            cursor: pointer;
        }
-
-        h1 {
-            margin-top: 2rem;
-        }
    }
 }

--- a/sass/home.scss
+++ b/sass/home.scss
@ -1,5 +1,6 @@
 .home {
    .header {
+        margin-bottom: 3.25rem;
        @include respond-to("small-up") {
            height: 30vh;
            background-image: url('/header.jpg');
--- a/sass/icons.scss
+++ b/sass/icons.scss
@ -1,56 +1,6 @@
-@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);
-    }
+.icon {
+  font-family: "icon";
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: inherit;
 }
--- a/sass/index.scss
+++ b/sass/index.scss
@ -35,7 +35,6 @@
@import './flash';
@import './pagination';
@import './icons';
-@import './list';

@import './error';
@import './home';
--- a/sass/list.scss
+++ b/sass/list.scss
@ -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%;
-        }
-    }
-}
--- a/sass/ma-collection.scss
+++ b/sass/ma-collection.scss
@ -24,8 +24,18 @@
    }

    .list{
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid #dbdbdb;
+
+        &:nth-child(2n) {
+            background-color: #fafafa;
+        }
+
        .title {
-            .icon-trash {
+            font-weight: 800;
+            font-size: 1.4rem;
+
+            .icon {
                cursor: pointer;
                color: #f14668;

@ -34,6 +44,14 @@
                }
            }
        }
+
+        .grid {
+            margin-top: 0.75rem;
+        }
+
+        img {
+            border: 2px solid #4a4a4a;
+        }
    }

    .total {
--- a/views/index.ejs
+++ b/views/index.ejs
@ -73,7 +73,9 @@
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-link" href="/ajouter-un-album">
-                                <i class="icon-plus"></i>
+                                <span class="icon">
+                                    &#xe800;
+                                </span>
                                <span>
                                    Ajouter un album
                                </span>
@ -90,7 +92,9 @@
                    <% if ( user ) { %>
                    <div class="navbar-item has-dropdown">
                        <a class="navbar-link">
-                            <i class="icon-user"></i>
+                            <span class="icon">
+                                &#xe801;
+                            </span>
                            <span>
                                <%= user.username %>
                            </span>
@ -156,9 +160,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-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">&#xe804;</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-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">&#xe804;</i></a>.
            </p>
        </footer>
    </body>
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@ -1,19 +1,18 @@
-<main class="layout-maxed ajouter-un-album" id="app">
-    <h1>Ajouter un album</h1>
+<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)" autofocus>
                    <button class="button is-link" :disabled="loading">
-                        <i class="icon-search" v-if="!loading"></i>
-                        <i class="icon-spin animate-spin" v-if="loading"></i>
+                        <span class="icon">
+                            &#xe802;
+                        </span>
                    </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>
@ -150,7 +149,7 @@
            </footer>
        </div>
    </div>
-</main>
+</section>

 <script>
    Vue.createApp({
--- 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-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">&#xe804;</i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon">&#xe804;</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-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>
+            <li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon">&#xe804;</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">&#xe804;</i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon">&#xe804;</i></a>.</li>
+            <li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon">&#xe804;</i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon">&#xe804;</i></a>.</li>
        </ul>
    </p>
 </main>
--- a/views/pages/mon-compte/ma-collection.ejs
+++ b/views/pages/mon-compte/ma-collection.ejs
@ -1,5 +1,4 @@
-<main class="layout-maxed ma-collection" id="app">
-    <h1>Ma collection</h1>
+<section class="layout-maxed ma-collection" id="app">
    <div class="filters">
        <div class="field">
            <label for="artist">Artiste</label>
@ -37,40 +36,40 @@
            </select>
        </div>
    </div>
-    <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>
+    <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)">
+                &#xf1f8;
            </span>
-            <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>
-                    <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>
+        </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>        
+            <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>
+                <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 class="total">
        <strong>Nombre total d'éléments : </strong>{{total}}
@ -107,7 +106,7 @@
            </footer>
        </div>
    </div>
-</main>
+</section>

 <script>
    Vue.createApp({