From e321691daf15de8714992eefe77ba3db147769e4 Mon Sep 17 00:00:00 2001
From: Damien Broqua <damien@freemiumplay.com>
Date: Sat, 29 Mar 2025 11:17:21 +0100
Subject: [PATCH] #99 - Affichage des statistiques : rien ne va plus !

---
 sass/index.scss                               |  4 +
 .../mon-compte/ma-collection/statistiques.ejs | 86 +++++++++++--------
 2 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/sass/index.scss b/sass/index.scss
index 808151b..eaa5bc8 100644
--- a/sass/index.scss
+++ b/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';
diff --git a/views/pages/mon-compte/ma-collection/statistiques.ejs b/views/pages/mon-compte/ma-collection/statistiques.ejs
index 605c1b7..a1330e1 100644
--- a/views/pages/mon-compte/ma-collection/statistiques.ejs
+++ b/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="md:col-span-2 box">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mb-10">
+        <div class="md:col-span-2 lg:col-span-3 box">
             <h2>Mon top 10</h2>
-                <table>
-                    <thead>
+            <table>
+                <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>
-                            <th>Artiste</th>
-                            <th style="width: 100px;">Albums</th>
+                            <td><%= i+1 %></td>
+                            <td><%= page.top10[i].name %></td>
+                            <td><%= page.top10[i].count %></td>
                         </tr>
-                    </thead>
-                    <tbody>
-                        <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
-                            <tr>
-                                <td><%= i+1 %></td>
-                                <td><%= page.top10[i].name %></td>
-                                <td><%= page.top10[i].count %></td>
-                            </tr>
-                        <% } %>
-                    </tbody>
-                </table>
+                    <% } %>
+                </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">
+        <div class="box col-span-full">
             <h2><%= page.currentYear.year %> (<%= page.currentYear.total %> ajout<%= page.currentYear.total > 1 ? 's' : '' %>)</h2>
-            <h3>Genres</h3>
-            <canvas id="currentYearGenres"></canvas>
-            <h3>Styles</h3>
-            <canvas id="currentYearStyles"></canvas>
-            <h3>Formats</h3>
-            <canvas id="currentYearFormats"></canvas>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <div>
+                    <h3>Genres</h3>
+                    <canvas id="currentYearGenres"></canvas>
+                </div>
+                <div>
+                    <h3>Styles</h3>
+                    <canvas id="currentYearStyles"></canvas>
+                </div>
+                <div>
+                    <h3>Formats</h3>
+                    <canvas id="currentYearFormats"></canvas>
+                </div>
+            </div>
         </div>
-
-        <div class="box">
+        <div class="box col-span-full">
             <h2><%= page.lastYear.year %> (<%= page.lastYear.total %> ajout<%= page.lastYear.total > 1 ? 's' : '' %>)</h2>
-            <h3>Genres</h3>
-            <canvas id="lastYearGenres"></canvas>
-            <h3>Styles</h3>
-            <canvas id="lastYearStyles"></canvas>
-            <h3>Formats</h3>
-            <canvas id="lastYearFormats"></canvas>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <div>
+                    <h3>Genres</h3>
+                    <canvas id="lastYearGenres"></canvas>
+                </div>
+                <div>
+                    <h3>Styles</h3>
+                    <canvas id="lastYearStyles"></canvas>
+                </div>
+                <div>
+                    <h3>Formats</h3>
+                    <canvas id="lastYearFormats"></canvas>
+                </div>
+            </div>
         </div>
     </div>
 </main>