#99 - Affichage des statistiques : rien ne va plus !

sass/index.scss

@@ -1,5 +1,9 @@
 @import '../node_modules/knacss/sass/knacss.scss';
 
+table {
+  table-layout: unset;
+}
+
 // SPÉCIFIQUE AU SITE
 @import './fonts';
 @import './colors';

src/routes/index.js

@@ -57,7 +57,7 @@ router
                 }
                 return res.redirect(url);
             }
-            return res.redirect("/");
+            return res.redirect("/ma-collection");
         }
     );
 
@@ -79,7 +79,7 @@ if (registrationOpen) {
             try {
                 await Auth.register(req);
 
-                res.redirect("/");
+                res.redirect("/ajouter-un-album");
             } catch (err) {
                 res.redirect("/inscription");
             }

views/pages/home.ejs

@@ -9,10 +9,10 @@
         </div>
         <div class="text">
             <p class="text-justify">
-                Retrouvez votre cd-thèque partout depuis votre ordinateur ou votre smartphone.
+                Retrouvez votre cd-thèque partout depuis votre PC ou votre smartphone.
             </p>
             <p class="text-justify">
-                <strong>MusicTopus</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 répertorier votre collection de musique et d'y accéder facilement depuis n'importe où.
+                <strong>MusicTopus</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://forge.darkou.fr/contact/MusicTopus" target="_blank">forge.darkou.fr <i class="icon-link"></i></a>.
             </p>
@@ -20,9 +20,9 @@
                 Pourquoi utiliser MusicTopus ?
             </h2>
             <p class="text-justify">
-                <strong>MusicTopus</strong> est indispensable lorsqu'une collection de CD's audio et vinyles (mais pas que !) est devenue trop importante pour que l'on puisse se souvenir de tous les albums qu'elle contient. Consulter MusicTopus peut par exemple éviter un achat en double ou permettre de savoir qu'on a des albums à céder ou à échanger.
+                <strong>MusicTopus</strong> est indispensable lorsqu'une collection, de CD-audios et vinyles, est devenue trop importante pour qu'on puisse se souvenir de tous les albums qu'elle contient. Consulter MusicTopus peut par exemple éviter un achat en double, et de savoir qu'on a des albums à céder ou échanger.
                 <br />
-                Il existe déjà plusieurs applications de gestion de librairies musicales mais, au moment de l'écriture de cette présentation, aucune facilement accessible via internet, par exemple lorsqu'on se trouve chez un disquaire.
+                Il existe déjà plusieurs applications de gestion de librairies musicales mais, (au moment de l'édition de cette présentation) aucune facilement accessible via internet, par exemple lorsqu'on est chez un disquaire.
             </p>
             <h2>
                 Qu'est ce qui fait tourner MusicTopus ?

views/pages/mon-compte/ma-collection/statistiques.ejs

@@ -1,29 +1,30 @@
-<main class="layout-maxed ma-collection-details" id="ma-collection-statistiques">
+<!-- <main class="layout-maxed ma-collection-details" id="ma-collection-statistiques"> -->
+<main class="layout-maxed collection" id="mon-compte">
     <h1>
         Mes statistiques
     </h1>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-10">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mb-10">
-        <div class="md:col-span-2 box">
+        <div class="md:col-span-2 lg:col-span-3 box">
             <h2>Mon top 10</h2>
-                <table>
+            <table>
-                    <thead>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Artiste</th>
+                        <th>Albums</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
                         <tr>
-                            <th style="width: 60px;"></th>
+                            <td><%= i+1 %></td>
-                            <th>Artiste</th>
+                            <td><%= page.top10[i].name %></td>
-                            <th style="width: 100px;">Albums</th>
+                            <td><%= page.top10[i].count %></td>
                         </tr>
-                    </thead>
+                    <% } %>
-                    <tbody>
+                </tbody>
-                        <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
+            </table>
-                            <tr>
-                                <td><%= i+1 %></td>
-                                <td><%= page.top10[i].name %></td>
-                                <td><%= page.top10[i].count %></td>
-                            </tr>
-                        <% } %>
-                    </tbody>
-                </table>
         </div>
 
         <div class="box">
@@ -41,26 +42,39 @@
             <canvas id="byFormats"></canvas>
         </div>
 
-        <div><!-- histoire de faire un break --></div>
+        <div class="box col-span-full">
-
-        <div class="box">
             <h2><%= page.currentYear.year %> (<%= page.currentYear.total %> ajout<%= page.currentYear.total > 1 ? 's' : '' %>)</h2>
-            <h3>Genres</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
-            <canvas id="currentYearGenres"></canvas>
+                <div>
-            <h3>Styles</h3>
+                    <h3>Genres</h3>
-            <canvas id="currentYearStyles"></canvas>
+                    <canvas id="currentYearGenres"></canvas>
-            <h3>Formats</h3>
+                </div>
-            <canvas id="currentYearFormats"></canvas>
+                <div>
+                    <h3>Styles</h3>
+                    <canvas id="currentYearStyles"></canvas>
+                </div>
+                <div>
+                    <h3>Formats</h3>
+                    <canvas id="currentYearFormats"></canvas>
+                </div>
+            </div>
         </div>
-
+        <div class="box col-span-full">
-        <div class="box">
             <h2><%= page.lastYear.year %> (<%= page.lastYear.total %> ajout<%= page.lastYear.total > 1 ? 's' : '' %>)</h2>
-            <h3>Genres</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
-            <canvas id="lastYearGenres"></canvas>
+                <div>
-            <h3>Styles</h3>
+                    <h3>Genres</h3>
-            <canvas id="lastYearStyles"></canvas>
+                    <canvas id="lastYearGenres"></canvas>
-            <h3>Formats</h3>
+                </div>
-            <canvas id="lastYearFormats"></canvas>
+                <div>
+                    <h3>Styles</h3>
+                    <canvas id="lastYearStyles"></canvas>
+                </div>
+                <div>
+                    <h3>Formats</h3>
+                    <canvas id="lastYearFormats"></canvas>
+                </div>
+            </div>
         </div>
     </div>
 </main>