Merge branch 'master' of git.darkou.fr:dbroqua/MyMusicLibrary

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",

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;
             }
         }

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;
+        }
     }
 }
 

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');

sass/icons.scss

@@ -1,6 +1,56 @@
-.icon {
+@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);
+    }
 }

sass/index.scss

@@ -35,6 +35,7 @@
 @import './flash';
 @import './pagination';
 @import './icons';
+@import './list';
 
 @import './error';
 @import './home';

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%;
+        }
+    }
+}

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 {

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">
-                                    &#xe800;
-                                </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">
-                                &#xe801;
-                            </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">&#xe804;</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">&#xe804;</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>

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">
-                            &#xe802;
-                        </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({

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">&#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>.
+        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">&#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>
+            <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>

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,16 +37,15 @@
             </select>
         </div>
     </div>
-    <div class="list" v-if="!loading" v-for="item in items">
+    <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 }}
-            <span class="icon" @click="showConfirmDelete(item._id)">
-                &#xf1f8;
-            </span>
+                <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
             </span>
             <div class="grid grid-cols-2 md:grid-cols-4">
                 <div>
-                <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
+                    <img :src="item.thumb" :alt="item.title" />
                 </div>
                 <div class="md:col-span-3">
                     <span><strong>Année :</strong> {{ item.year }}</span>
@@ -71,6 +71,7 @@
                 </div>
             </div>
         </div>        
+    </div>
     <div class="total">
         <strong>Nombre total d'éléments : </strong>{{total}}
     </div>
@@ -106,7 +107,7 @@
             </footer>
         </div>
     </div>
-</section>
+</main>
 
 <script>
     Vue.createApp({