Modification de la page d'accueil afin de rajouter du responsive.

Ajout de font awesome en local (css + webfonts).
Modification du header pour enlever les scripts inutiles

Webzine.WebApplication/Controllers/AccueilController.cs

@@ -37,8 +37,8 @@ namespace Webzine.WebApplication.Controllers
         {
             this.logger.LogInformation("Arrivée sur la page d'accueil");
 
-            var derniereChronique = configuration.GetValue<int>("Webzine:NombreDerniereChronique");
-            var topTitres = configuration.GetValue<int>("Webzine:NombreDeTopTitres");
+            var derniereChronique = this.configuration.GetValue<int>("Webzine:NombreDerniereChronique");
+            var topTitres = this.configuration.GetValue<int>("Webzine:NombreDeTopTitres");
             var titres = FakeDataFactory.GetTitres();
 
             var vm = new AccueilIndexViewModel

Webzine.WebApplication/Views/Accueil/Index.cshtml

@@ -5,36 +5,6 @@
 
 <h1>Derniers titres chroniqués</h1>
 
-@* TEMPLATE TODO: virer *@
-@* <div class="container">
-    <div class="container bg-light row p-3 mt-3">
-        <div class="col-auto">
-            <img class="img-thumbnail"
-                src="" />
-        </div>
-        <div class="col">
-            <a class="text-primary text-decoration-none fw-light h4">Justice - D.A.N.C.E</a>
-            <p class="mt-2 mb-3 text-muted ">
-                Insérer texte
-            </p>
-            <div class="d-flex flex-wrap align-items-center gap-3">
-                <a 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"></i> 
-                    Date :
-                    17/12/2022 11:08:08
-                </div>
-
-                <div class="d-flex align-items-center text-muted small">
-                    <i class="fa-solid fa-tags"></i>
-                    <a class="text-decoration-none m-1">Insérer style</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div> *@
-
 <div class="container">
     @foreach (var titre in Model.DerniersTitres)
     {
@@ -87,35 +57,27 @@
     </div>
 </div>
 
-@* TEMPLATE *@
-@* <div class="container">
-    <div class="row">
-        <div class="card col m-1" style="width: 18rem;">
-            <img class="card-img-top"
-                 src="" alt="Alternate Text" />
-
-            <div class="card-body">
-                <a class="card-link" href="#">Album</a><br />
-                par <a class="card-link">Artiste</a>
-            </div>
-        </div>
-    </div>
-</div> *@
 <div class="container">
     <h1 class="mt-5">Titres les plus populaires</h1>
-    <div class="row">
-    @foreach (var titre in Model.TopTitres)
-    {
-        <div class="card col m-1" style="width: auto;">
-            <img class="card-img-top"
-            src="@titre.UrlJaquette" />
+    <div class="row g-3">
+        @foreach (var titre in Model.TopTitres)
+        {
+            <div class="col-12 col-md-6 col-lg-4">
+                <div class="card h-100">
+                    <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 />
-                par <a asp-controller="Artiste" asp-action="Index" asp-route-nom="@titre.Artiste.Nom" class="card-link">@titre.Artiste.Nom</a>
+                    <div class="card-body">
+                        <a asp-controller="Titre" asp-action="Details" asp-route-id="@titre.IdTitre" class="card-link">
+                            @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>
-
 </div>

Webzine.WebApplication/Views/Shared/_Layout.cshtml

@@ -6,29 +6,24 @@
     <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
+    <script src="~/js/bootstrap.bundle.js" defer></script> @* //TODO script pas bien placé *@
     <link rel="stylesheet" href="~/css/bootstrap.min.css">
-
-    @* Ajout de font-awesome, TODO cdn à virer, mettre font awesome dans le projet *@
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <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/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">
-                <main class="col mx-3">
-                    @RenderBody()
-                </main>
-                @if(ViewContext.RouteData.Values["area"]?.ToString() != "Administration")
-                {
-                    <partial name="_Sidebar" />
-                }
-            </div>
+    <partial name="_Header"/>
+    <div class="container-fluid flex-grow-1 py-4">
+        <div class="row">
+            <main class="col mx-3">
+                @RenderBody()
+            </main>
+            @if(ViewContext.RouteData.Values["area"]?.ToString() != "Administration")
+            {
+                <partial name="_Sidebar" />
+            }
         </div>
-        <partial name="_Footer" />
     </div>
+    <partial name="_Footer" />
 </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>