From 4f3c2b04990f6d37a50223185c4f595e7254a1dc Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Fri, 18 Feb 2022 23:57:51 +0100
Subject: [PATCH] Fixed bug in my collection

---
 sass/ma-collection.scss                  | 17 +++++++++++++++++
 views/pages/mon-compte/ma-collection.ejs | 10 +++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/sass/ma-collection.scss b/sass/ma-collection.scss
index d605709..9bfa611 100644
--- a/sass/ma-collection.scss
+++ b/sass/ma-collection.scss
@@ -43,5 +43,22 @@
         img {
             border: 2px solid #4a4a4a;
         }
+
+        .items {
+            span {
+                margin-right: 0.6rem;
+
+                &::after {
+                    content: ",";
+                }
+
+                &:last-child {
+                    &::after {
+                        margin-right: 0;
+                        content: "";
+                    }
+                }
+            }
+        }
     }
 }
\ 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 257f0ea..5b265b6 100644
--- a/views/pages/mon-compte/ma-collection.ejs
+++ b/views/pages/mon-compte/ma-collection.ejs
@@ -4,7 +4,7 @@
             <label for="artist">Artiste</label>
             <select id="artist" v-model="artist" @change="changeFilter">
                 <option value="">Tous</option>
-                <% 
+                <%
                     for (let i = 0; i < page.artists.length; i += 1 ) {
                         __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
                     }
@@ -15,7 +15,7 @@
             <label for="format">Format</label>
             <select id="format" v-model="format" @change="changeFilter">
                 <option value="">Tous</option>
-                <% 
+                <%
                     for (let i = 0; i < page.formats.length; i += 1 ) {
                         __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
                     }
@@ -47,11 +47,11 @@
                 <br />
                 <span><strong>Pays :</strong> {{ item.country }}</span>
                 <br />
-                <span class="item"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span>
+                <span class="items"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span>
                 <br />
-                <span class="item"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
+                <span class="items"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
                 <br />
-                <span class="item"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
+                <span class="items"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
             </div>
         </div>
     </div>