From 2604189f3045321a1c5f0dc3ba55389989b13810 Mon Sep 17 00:00:00 2001 From: Bastien Dumont <bdumont@grandlyon.com> Date: Mon, 12 Feb 2024 10:56:38 +0100 Subject: [PATCH] chore(news): fix image height --- .../post-card/post-card.component.html | 6 ++---- .../post-list/post-list.component.html | 18 +++++++++--------- .../post-list/post-list.component.scss | 14 +++++++------- 3 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html index 99ed08f76..21a5db741 100644 --- a/src/app/post/components/post-card/post-card.component.html +++ b/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-v3-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> diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html index 5546494fb..72587113e 100644 --- a/src/app/post/components/post-list/post-list.component.html +++ b/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-v3-button - class="loadMoreB" - [variant]="'primaryBlack'" - [label]="'Voir plus d\'actualités'" - [wide]="true" - (click)="loadMore()" - /> - </div> + + <app-v3-button + *ngIf="!isLastPage && !isLoading" + class="loadMore" + [variant]="'primaryBlack'" + [label]="'Voir plus d\'actualités'" + [wide]="true" + (click)="loadMore()" + /> </div> diff --git a/src/app/post/components/post-list/post-list.component.scss b/src/app/post/components/post-list/post-list.component.scss index da0c18682..662ea257f 100644 --- a/src/app/post/components/post-list/post-list.component.scss +++ b/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; } -- GitLab