done new ui for news (#45)

src/app/pages/accueil/components/news/news-accueil-section.component.html

@@ -1,23 +1,23 @@
 <section class="news-section p-4">
-  <div class="container">
-    <h2 class="section-title">
-      <span>News</span>
-    </h2>
-    <h3>Nos 3 news les plus récentes.</h3>
+    <div class="container">
+        <h2 class="section-title">
+            News
+        </h2>
+        <h3>Nos 3 news les plus récentes.</h3>
 
-    <div *ngIf="newsList.length > 0; else noNews" class="card-group">
-      <div *ngFor="let news of newsList" class="p-2">
-        <app-news-card [news]="news"></app-news-card>
-      </div>
-    </div>
-    <ng-template #noNews class="no-news align-content-center text-center">
-      <p>Aucune news n'a été rédigée pour l'instant. Revenez plus tard !</p>
-    </ng-template>
+        <div *ngIf="newsList.length > 0; else noNews" class="card-group">
+            <div *ngFor="let news of newsList" class="p-2">
+                <app-news-card [news]="news"></app-news-card>
+            </div>
+        </div>
+        <ng-template #noNews class="no-news align-content-center text-center">
+            <p>Aucune news n'a été rédigée pour l'instant. Revenez plus tard !</p>
+        </ng-template>
 
-    <div class="text-center">
-      <a *ngIf="totalNews > 3" class="btn pacifista-btn" href="/news">
-        Voir les {{ totalNews - 3 }} autres news
-      </a>
+        <div class="text-center">
+            <a *ngIf="totalNews > 3" class="mt-3 btn pacifista-btn" href="/news">
+                Voir les {{ totalNews - 3 }} autres news
+            </a>
+        </div>
     </div>
-  </div>
 </section>

src/app/pages/news/news-card/news-card.component.html

@@ -1,43 +1,35 @@
-<div class="card text-bg-dark mb-2 pacifista-news-card">
-  <div class="row g-0">
-    <div class="col-md-4 div-image">
-      <img ngSrc="{{ news.articleImageUrl }}" [loading]="'lazy'" width="600" height="300" class="img-fluid rounded-start" alt="News image {{ news.name }}">
-    </div>
-
-    <div class="col-md-8">
-      <div class="card-body">
-        <h1 class="card-title">{{ news.title }}</h1>
-        <h2 class="card-text">{{ news.subtitle }}</h2>
+<div class="card bg-dark text-white" style="width: 18rem;">
+    <img src="{{ news.articleImageUrl }}" class="card-img-top" alt="Pacifista News image {{ news.name }}">
+    <div class="card-body">
+        <h3 class="card-title">{{ news.title }}</h3>
+        <p class="card-text">{{ news.subtitle }}</p>
 
         <div class="row justify-content-start align-items-center">
-          <div class="col-4">
-            <fa-icon [icon]="faUser"></fa-icon><span> {{ news.originalWriter }}</span>
-          </div>
-          <div class="col-8">
-            <fa-icon [icon]="faClock"></fa-icon><span> {{ news.createdAt | date : 'dd/MM/YY - HH:mm' }}</span>
-          </div>
+            <div class="col-4">
+                <fa-icon [icon]="faUser"></fa-icon><span> {{ news.originalWriter }}</span>
+            </div>
+            <div class="col-8">
+                <fa-icon [icon]="faClock"></fa-icon><span> {{ news.createdAt | date : 'dd/MM/YY - HH:mm' }}</span>
+            </div>
         </div>
-      </div>
+    </div>
 
-      <div class="card-footer">
+    <div class="card-footer">
         <div class="row justify-content-between align-items-center">
-          <div class="col">
-            <div class="row">
-              <div class="col-6">
-                <fa-icon [icon]="faThumbsUp"></fa-icon><span> {{ news.likesAmount || 0 }}</span>
-              </div>
+            <div class="col">
+                <div class="row">
+                    <div class="col-6">
+                        <fa-icon [icon]="faThumbsUp"></fa-icon><span> {{ news.likesAmount || 0 }}</span>
+                    </div>
 
-              <div class="col-5">
-                <fa-icon [icon]="faComment"></fa-icon><span> {{ news.commentsAmount || 0 }}</span>
-              </div>
+                    <div class="col-5">
+                        <fa-icon [icon]="faComment"></fa-icon><span> {{ news.commentsAmount || 0 }}</span>
+                    </div>
+                </div>
             </div>
-          </div>
 
-          <a class="col-3 btn btn-success" href="/news/{{ news.name }}">
-            Lire la suite
-          </a>
+            <a class="col-4 btn btn-success" href="/news/{{ news.name }}">
+                Lire
+            </a>
         </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/pages/news/news-list-page/news-list-page.component.html

@@ -9,7 +9,7 @@ <h3>
     {{ totalNews }} news au total
   </h3>
 
-  <div *ngIf="newsList.length > 0; else noNews" class="card-group">
+  <div *ngIf="newsList.length > 0; else noNews" class="align-items-center card-group">
     <div *ngFor="let news of newsList" class="p-2">
       <app-news-card [news]="news"></app-news-card>
     </div>