From 69116fb46b93fe6c576cbf90947acb19968cb659 Mon Sep 17 00:00:00 2001
From: "b.nodon" <baptiste.nodon@diiage.org>
Date: Thu, 26 Mar 2026 11:59:18 +0100
Subject: [PATCH] #104 Rework du style du dashboard

---
 .../Views/Dashboard/Index.cshtml              | 121 ++++++++++--------
 1 file changed, 66 insertions(+), 55 deletions(-)

diff --git a/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml b/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
index 861c59b..5498169 100644
--- a/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
+++ b/Webzine.WebApplication/Areas/Administration/Views/Dashboard/Index.cshtml
@@ -12,19 +12,19 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Artiste">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-users fa-3x text-primary mb-3"></i>
+                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                        <i class="fa fa-users fa-5x text-primary mb-3"></i>
 
-                    <h3>
-                        @Model.NombreArtistes 
-                    </h3>
-
-                    <p>
-                        artistes
-                    </p>
+                        <h2>
+                            @Model.NombreArtistes 
+                        </h2>
+                        <p>
+                            artistes
+                        </p>
+                   </div>
                 </div>
-
             </a>
         </div>
 
@@ -33,17 +33,17 @@
             <a asp-area=""
                asp-controller="Artiste"
                asp-route-nom="@Model.ArtisteLePlusChronique">
+               <div class="ratio ratio-4x3">
+                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                        <i class="fa fa-user fa-5x text-primary mb-3"></i>
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-user fa-3x text-primary mb-3"></i>
+                        <h2>
+                            @Model.ArtisteLePlusChronique
+                        </h2>
 
-                    <h3>
-                        @Model.ArtisteLePlusChronique
-                    </h3>
-
-                    <p>artiste le plus chroniqué</p>
+                        <p>artiste le plus chroniqué</p>
+                    </div>
                 </div>
-
             </a>
         </div>
 
@@ -52,19 +52,20 @@
             <a asp-area=""
                asp-controller="Artiste"
                asp-route-nom="@Model.AlbumLePlusChronique">
+             <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-trophy fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-trophy fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.AlbumLePlusChronique
-                    </h3>
+                    </h2>
 
                     <p>
                         artiste avec le plus d'albums distincts
                     </p>
                 </div>
-
+            </div>
             </a>
         </div>
 
@@ -72,19 +73,20 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Titre">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-book fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-book fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreBiographies
-                    </h3>
+                    </h2>
 
                     <p>
                         biographies d'artistes
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -94,19 +96,20 @@
                asp-controller="Titre"
                asp-action="Details"
                 asp-route-id="@Model.IdMusiqueLaPlusJouee">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-compact-disc fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-compact-disc fa-5x text-primary mb-3"></i>
 
-                    <h4>
+                    <h2>
                         @Model.MusiqueLaPlusJouee
-                    </h4>
+                    </h2>
 
                     <p>
                         titre le plus lu
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -114,19 +117,20 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Titre">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-music fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-music fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreTitres
-                    </h3>
+                    </h2>
 
                     <p>
                         titres
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
@@ -134,50 +138,57 @@
         <div class="col-md-4">
             <a asp-area="Administration"
                asp-controller="Styles">
+                <div class="ratio ratio-4x3">
 
-                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
-                    <i class="fa fa-tags fa-3x text-primary mb-3"></i>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
+                    <i class="fa fa-tags fa-5x text-primary mb-3"></i>
 
-                    <h3>
+                    <h2>
                         @Model.NombreGenres
-                    </h3>
+                    </h2>
 
                     <p>
                         styles de musique
                     </p>
                 </div>
-
+                </div>
             </a>
         </div>
 
         <!-- NOMBRE DE LECTURES -->
         <div class="col-md-4">
-            <div class="card shadow-sm p-4 bg-light h-100">
-                <i class="fa fa-eye fa-3x text-dark mb-3"></i>
+            <div class="ratio ratio-4x3">
 
-                <h3>
-                    @Model.NombreLectures
-                </h3>
+                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
+                    <i class="fa fa-eye fa-5x text-dark mb-3"></i>
 
-                <p>
-                    lectures
-                </p>
+                    <h2>
+                        @Model.NombreLectures
+                    </h2>
+
+                    <p>
+                        lectures
+                    </p>
+                </div>
             </div>
         </div>
 
         <!-- TOTAL LIKES -->
         <div class="col-md-4">
-            <div class="card shadow-sm p-4 bg-light h-100">
-                <i class="fa fa-thumbs-up fa-3x text-dark mb-3"></i>
+            <div class="ratio ratio-4x3">
 
-                <h3>
+            <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
+                <i class="fa fa-thumbs-up fa-5x text-dark mb-3"></i>
+
+                <h2>
                     @Model.NombreLikes
-                </h3>
+                </h2>
 
                 <p>
                     likes
                 </p>
             </div>
+            </div>
         </div>
 
     </div>