#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/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>