Merge pull request 'Correction des éléments et revue de l'accueil pour le responsive' (#90) from correction/j1 into TODO_erreurs

Reviewed-on: http://10.4.0.131/gitea/DI1-P4-E1/Webzine/pulls/90
Reviewed-by: j.vetu <josephine.vetu@diiage.org>

Webzine.WebApplication/Controllers/AccueilController.cs

@@ -1,25 +1,32 @@
-using Microsoft.AspNetCore.Mvc;
+// <copyright file="AccueilController.cs" company=" Equipe 1 - ">
-using Webzine.Repository.Fake;
+// Copyright (c)  Equipe 1 - . All rights reserved.
-using Webzine.WebApplication.ViewModels.Accueil;
+// </copyright>
 
 namespace Webzine.WebApplication.Controllers
 {
+    using Microsoft.AspNetCore.Mvc;
+    using Webzine.Repository.Fake;
+    using Webzine.WebApplication.ViewModels.Accueil;
+
+    /// <summary>
+    /// Permet de retourner la page d'accueil avec tous les éléments.
+    /// </summary>
     public class AccueilController : Controller
     {
         // Injection du logger via le constructeur
-        private readonly ILogger<AccueilController> _logger;
+        private readonly ILogger<AccueilController> logger;
-        private readonly IConfiguration _configuration;
+        private readonly IConfiguration configuration;
 
         /// <summary>
-        /// Initialise une nouvelle instance du <see cref="AccueilController"/> avec un service de journalisation et de configuration injectés.
+        /// Initialise une nouvelle instance de la classe <see cref="AccueilController"/>.
         /// </summary>
         /// <param name="logger">Service de journalisation injecté pour enregistrer les événements et les erreurs.</param>
         /// <param name="configuration">Service d'injection de configuration pour accéder aux paramètres de l'application.</param>
         public AccueilController(ILogger<AccueilController> logger, IConfiguration configuration)
         {
-            _logger = logger;
+            this.logger = logger;
-            _configuration = configuration;
+            this.configuration = configuration;
-            this._logger.LogDebug(1, "initialisation du AccueilController");
+            this.logger.LogDebug(1, "initialisation du AccueilController");
         }
 
         /// <summary>
@@ -28,10 +35,10 @@ namespace Webzine.WebApplication.Controllers
         /// <returns>La vue Index avec le ViewModel contenant les listes de titres à afficher.</returns>
         public ActionResult Index()
         {
-            _logger.LogInformation("Arrivée sur la page d'accueil");
+            this.logger.LogInformation("Arrivée sur la page d'accueil");
 
-            var derniereChronique = _configuration.GetValue<int>("Webzine:NombreDerniereChronique");
+            var derniereChronique = this.configuration.GetValue<int>("Webzine:NombreDerniereChronique");
-            var topTitres = _configuration.GetValue<int>("Webzine:NombreDeTopTitres");
+            var topTitres = this.configuration.GetValue<int>("Webzine:NombreDeTopTitres");
             var titres = FakeDataFactory.GetTitres();
 
             var vm = new AccueilIndexViewModel
@@ -44,10 +51,10 @@ namespace Webzine.WebApplication.Controllers
                 TopTitres = titres
                     .OrderByDescending(t => t.NbLikes)
                     .Take(topTitres)
-                    .ToList()
+                    .ToList(),
             };
 
-            return View(vm);
+            return this.View(vm);
         }
     }
 }

Webzine.WebApplication/Views/Accueil/Index.cshtml

@@ -8,15 +8,19 @@
 <div class="container">
     @foreach (var titre in Model.DerniersTitres)
     {
-        <div class="container bg-light row p-3 mt-3">
+        <div class="row bg-light p-3 mt-3 align-items-center">
-            <div class="col-auto">
+
-                <img class="img-thumbnail img-fluid"
+            <!-- Image -->
-                     style="max-width:200px;" @* TODO à virer pour que ça soit responsive *@
+            <div class="col-12 col-md-3 text-center mb-3 mb-md-0">
-                     @* UrlJaquette *@
+                <img class="img-fluid img-thumbnail"
-                     src="@titre.UrlJaquette" />
+                     src="@titre.UrlJaquette"
+                     alt="@titre.Libelle" />
             </div>
-            <div class="col">
+
-                @* Artiste - Titre @titre.Artiste - @titre.Libelle*@
+            <!-- Contenu -->
+            <div class="col-12 col-md-9">
+
+                <!-- Artiste - Titre -->
                 <div class="fw-light h4 text-primary">
                     <a asp-action="Index"
                        asp-controller="Artiste"
@@ -30,48 +34,68 @@
                         @titre.Libelle
                     </a>
                 </div>
-                @* Chronique *@
+
-                <p class="mt-2 mb-3 text-muted ">
+                <!-- Chronique -->
+                <p class="mt-2 mb-3 text-muted">
                     @titre.Chronique
                 </p>
+
+                <!-- Footer -->
                 <div class="d-flex flex-wrap align-items-center gap-3">
-                    <a asp-action="Details" asp-controller="Titre" asp-route-id="@titre.IdTitre" class="btn btn-primary btn-sm">Lire la suite</a>
+                    <a asp-action="Details"
+                       asp-controller="Titre"
+                       asp-route-id="@titre.IdTitre"
+                       class="btn btn-primary btn-sm">
+                        Lire la suite
+                    </a>
 
                     <div class="d-flex align-items-center text-muted small">
-                        <i class="fa-solid fa-calendar me-1"> </i>
+                        <i class="fa-solid fa-calendar me-1"></i>
-                        @* Date de création  *@
                         @titre.DateCreation
                     </div>
 
                     <div class="d-flex align-items-center text-muted small">
-                        <i class="fa-solid fa-tags"></i>
+                        <i class="fa-solid fa-tags me-1"></i>
-                        @* Style *@
+                        <a asp-controller="Titre"
-                        <a asp-controller="Titre" asp-action="Style" asp-route-id="Pop" class="m-1">Pop</a>
+                           asp-action="Style"
+                           asp-route-id="Pop"
+                           class="text-decoration-none">
+                            Pop
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     }
+    <!-- Bouton -->
     <div class="row justify-content-end">
-        <button class="btn btn-secondary col-auto mt-3">Titres plus anciens >></button>
+        <button class="btn btn-secondary col-auto mt-3">
+            Titres plus anciens >>
+        </button>
     </div>
 </div>
 
 <div class="container">
     <h1 class="mt-5">Titres les plus populaires</h1>
-    <div class="row">
+    <div class="row g-3">
         @foreach (var titre in Model.TopTitres)
         {
-        <div class="card col m-1" style="width: auto;">
+            <div class="col-12 col-md-6 col-lg-4">
-            <img class="card-img-top"
+                <div class="card h-100">
-            src="@titre.UrlJaquette" />
+                    <img class="card-img-top" src="@titre.UrlJaquette" alt="@titre.Album" />
 
                     <div class="card-body">
-                <a asp-controller="Titre" asp-action="Details" asp-route-id="@titre.IdTitre" class="card-link">@titre.Album</a><br />
+                        <a asp-controller="Titre" asp-action="Details" asp-route-id="@titre.IdTitre" class="card-link">
-                par <a asp-controller="Artiste" asp-action="Index" asp-route-nom="@titre.Artiste.Nom" class="card-link">@titre.Artiste.Nom</a>
+                            @titre.Album
+                        </a>
+                        <br />
+                        par
+                        <a asp-controller="Artiste" asp-action="Index" asp-route-nom="@titre.Artiste.Nom" class="card-link">
+                            @titre.Artiste.Nom
+                        </a>
+                    </div>
                 </div>
             </div>
         }
     </div>
-
 </div>

Webzine.WebApplication/Views/Recherche/Index.cshtml

@@ -2,7 +2,6 @@
 
 @{
     ViewData["Title"] = "Recherche";
-    Layout = "_Layout"; //TODO à virer c'est déjà dans le _ViewStart
 }
 
 <div class="container mt-4">

Webzine.WebApplication/Views/Shared/_Footer.cshtml

@@ -3,11 +3,6 @@
 *@
 @{
 }
-<div class="site-footer text-bg-light mt-auto">
+<footer class="py-3 text-bg-light">
-    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3"> 
+    <p class="ms-5">&copy; ASP .NET Core - DIIAGE 2025 - 2026</p>
-        <div class="col-md-4 d-flex align-items-center"> 
+</footer> 
-            
-            <span class="mb-3 mb-md-0 ms-5 text-body-secondary">&copy; ASP .NET Core - DIIAGE 2025 - 2026</span> 
-        </div> 
-    </footer> 
-</div>

Webzine.WebApplication/Views/Shared/_Layout.cshtml

@@ -6,19 +6,16 @@
     <title>@ViewData["Title"] - Webzine</title>
 
     @* Ajout de bootstrap *@
-    <script src="~/js/bootstrap.min.js" defer></script> //TODO virer le bootstrap.bundle.js qui est en double
-    <script src="~/js/bootstrap.bundle.js" defer></script> //TODO script pas bien placé
-    <link rel="stylesheet" href="~/css/app.css"> // TODO mettre le app.css après le bootstrap pour pouvoir override les styles de bootstrap si besoin
     <link rel="stylesheet" href="~/css/bootstrap.min.css">
+    <link rel="stylesheet" href="~/css/all.min.css">
+    <link rel="stylesheet" href="~/css/app.css">
 
-    @* Ajout de font-awesome, TODO cdn à virer, mettre font awesome dans le projet *@
+    <script src="~/js/bootstrap.bundle.js" defer></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
-    <div class="site-shell">
     <partial name="_Header"/>
     <div class="container-fluid flex-grow-1 py-4">
-            <div class="row g-0">
+        <div class="row">
             <main class="col mx-3">
                 @RenderBody()
             </main>
@@ -29,6 +26,5 @@
         </div>
     </div>
     <partial name="_Footer" />
-    </div>
 </body>
 </html>

Webzine.WebApplication/Views/Shared/_Sidebar.cshtml

@@ -3,7 +3,7 @@
 *@
 @{
 }
-<aside class="col-3">
+<aside class="col-lg-3 d-none d-lg-block">
     <div>
         <h2>À propos</h2>
         <p>Retrouvez les dernières pépites sur notre webzine.</p>

Webzine.WebApplication/Views/Titre/Style.cshtml

@@ -2,7 +2,6 @@
 
 @{
     ViewData["Title"] = $"Titres - {Model.StyleName}";
-    Layout = "_Layout"; //TODO à virer c'est déjà dans le _ViewStart
 }
 <div class="container mt-4">
     <div class="row">