Merge branch 'fix/news/post-title-alignment' into 'dev'

chore(news): fix image height

See merge request !713

src/app/post/components/post-card/post-card.component.html

@@ -15,12 +15,10 @@
     />
   </div>
   <div class="informations">
-    <div class="inline">
+    <div *ngIf="post.tags.length" class="inline">
       <app-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" />
     </div>
-    <h2 fxLayout="row" class="title">
-      {{ post.title }}
-    </h2>
+    <h2 class="title">{{ post.title }}</h2>
     <div class="details">
       <div>Publié par : {{ post.author }}</div>
       <div>

src/app/post/components/post-list/post-list.component.html

@@ -11,13 +11,13 @@
   <div *ngIf="isLoading" class="loader" aria-busy="true">
     <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
   </div>
-  <div *ngIf="!isLastPage && !isLoading" class="loadMore">
-    <app-button
-      class="loadMoreB"
-      [variant]="'primaryBlack'"
-      [label]="'Voir plus d\'actualités'"
-      [wide]="true"
-      (click)="loadMore()"
-    />
-  </div>
+
+  <app-button
+    *ngIf="!isLastPage && !isLoading"
+    class="loadMore"
+    [variant]="'primaryBlack'"
+    [label]="'Voir plus d\'actualités'"
+    [wide]="true"
+    (click)="loadMore()"
+  />
 </div>

src/app/post/components/post-list/post-list.component.scss

@@ -4,7 +4,7 @@
 @import 'breakpoint';
 
 .news {
-  padding-top: 2rem;
+  padding-block: 2rem;
 }
 
 @mixin big-container {
@@ -16,7 +16,7 @@
     }
   }
   ::ng-deep .post .imageContainer {
-    .image {
+    img {
       height: 40vw;
       max-height: 320px;
       @media #{$news-max} {
@@ -38,7 +38,7 @@
   }
 
   @media #{$news-max} {
-    ::ng-deep .post .imageContainer .image {
+    ::ng-deep .post .imageContainer img {
       height: unset;
       max-height: 320px;
     }
@@ -47,7 +47,7 @@
 
 @mixin twin-container($start) {
   grid-column: $start / span 6;
-  ::ng-deep .post .imageContainer .image {
+  ::ng-deep .post .imageContainer img {
     height: 40vw;
     max-height: 250px;
   }
@@ -58,7 +58,7 @@
 
 @mixin triple-container-first {
   grid-column: 1 / span 4;
-  ::ng-deep .post .imageContainer .image {
+  ::ng-deep .post .imageContainer img {
     height: 40vw;
     max-height: 180px;
   }
@@ -68,7 +68,7 @@
 }
 @mixin triple-container {
   grid-column: span 4;
-  ::ng-deep .post .imageContainer .image {
+  ::ng-deep .post .imageContainer img {
     height: 40vw;
     max-height: 180px;
   }
@@ -134,7 +134,7 @@
 }
 
 .loadMore {
-  margin: 16px auto 32px auto;
+  margin-top: 16px;
   display: flex;
   justify-content: center;
 }