From 1d221cc3660dd393a49f3c2392abee2263ea740e Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 07:56:15 +0000
Subject: [PATCH] fix(news): ui details
---
.../post-card/post-card.component.html | 2 +-
.../post-card/post-card.component.scss | 5 +++
.../post-details/post-details.component.html | 1 +
.../post-details/post-details.component.scss | 6 ++--
.../post-publish/post-publish.component.html | 1 +
src/assets/scss/_ghost.scss | 31 +++----------------
6 files changed, 15 insertions(+), 31 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 cf99e8d21..aeb808ddf 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -15,7 +15,7 @@
/>
</div>
<div class="informations">
- <div *ngIf="post.tags.length" class="inline">
+ <div class="inline linePlaceholder">
<app-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" />
</div>
<h2 class="title">{{ post.title }}</h2>
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
index 5e1fcacf0..8d318d76a 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -36,8 +36,13 @@
.informations {
display: flex;
flex-direction: column;
+ justify-content: center;
gap: 8px;
+ .linePlaceholder {
+ height: 20px;
+ }
+
.title {
@include font-bold-20;
@media #{$large-phone} {
diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
index 598bdf4e4..87192437f 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -2,6 +2,7 @@
<app-button
[label]="'Retour'"
[variant]="'tertiary'"
+ [size]="'large'"
[iconFolder]="'ico'"
[iconName]="'arrowBack'"
(action)="backToPosts()"
diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
index 7a666d85c..3c8671b56 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -13,10 +13,9 @@ h1 {
flex-direction: column;
gap: 32px;
padding-block: 32px;
-
- max-width: 1080px;
+ max-width: 720px;
margin: auto;
- width: 80%;
+ padding-inline: 16px;
}
.gh-canvas {
@@ -57,6 +56,7 @@ h1 {
max-width: 100%;
width: auto;
height: auto;
+ border-radius: 8px;
}
div {
height: fit-content;
diff --git a/src/app/post/components/post-publish/post-publish.component.html b/src/app/post/components/post-publish/post-publish.component.html
index d17fe0bd7..895815e83 100644
--- a/src/app/post/components/post-publish/post-publish.component.html
+++ b/src/app/post/components/post-publish/post-publish.component.html
@@ -4,6 +4,7 @@
<app-button
[label]="'Retour'"
[variant]="'tertiary'"
+ [size]="'large'"
[iconFolder]="'ico'"
[iconName]="'arrowBack'"
(action)="backToPosts()"
diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
index 32a51bbb8..9b3e2694c 100644
--- a/src/assets/scss/_ghost.scss
+++ b/src/assets/scss/_ghost.scss
@@ -2,18 +2,11 @@
@import 'layout';
@import 'breakpoint';
-$margin-post: 20px;
-
:root {
--ghost-accent-color: #{$red};
}
.postContainer {
- max-width: 1200px;
- margin: $margin-post 0;
- min-height: calc(
- var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
- );
.title {
@include font-bold-30;
color: $grey-1;
@@ -21,7 +14,7 @@ $margin-post: 20px;
}
.description {
div {
- max-width: 860px;
+ max-width: 720px;
line-height: 180%;
}
> div > * + * {
@@ -31,24 +24,8 @@ $margin-post: 20px;
margin: 1em 0 0 0;
}
}
- .gh-canvas {
- display: grid;
- grid-template-columns:
- [full-start] minmax(4vmin, auto) [wide-start] minmax(auto, 240px) [main-start] min(720px, calc(100% - 8vw))
- [main-end] minmax(auto, 240px) [wide-end] minmax(4vmin, auto) [full-end];
- }
- .gh-canvas > * {
- grid-column: main-start/main-end;
- }
- .gh-canvas .article-image {
- grid-column: wide-start/wide-end;
- width: 100%;
- margin: 4vmin 0 0;
- img {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- }
+
+ .kg-file-card-icon {
+ height: auto;
}
}
--
GitLab