diff --git a/.vscode/settings.json b/.vscode/settings.json index 62ee709648a27306893cf6ff2dd148abd72f7adf..5fabf2de4fdfae26c01d6614547253a46fec68f6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -36,6 +36,7 @@ ], "cSpell.language": "fr,en", "cSpell.words": [ + "accessibilite", "Annuary", "carto", "categorie", diff --git a/src/app/page/enum/page.enum.ts b/src/app/page/enum/page.enum.ts deleted file mode 100644 index 3f1bd8e7d1420cf015aad0b573e546b4de64be41..0000000000000000000000000000000000000000 --- a/src/app/page/enum/page.enum.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum PageEnum { - quiSommesNous = 'qui-sommes-nous', - accessibilite = 'accessibilite', -} diff --git a/src/app/page/page.component.html b/src/app/page/page.component.html index 3809b5440934dd64e6f973f7d54403ad69e3dd91..7cd7d3d83a452c4e03ee145f40fd9a925c92bc7a 100644 --- a/src/app/page/page.component.html +++ b/src/app/page/page.component.html @@ -1,17 +1,13 @@ -<div fxLayout="column" class="content-container full-screen"> +<div class="content-container full-screen"> <div class="section-container"> - <div *ngIf="page" class="postContainer" fxLayout="column" fxLayoutGap="16px"> + <div *ngIf="page" class="postContainer pageContainer"> <div class="gh-canvas"> - <div fxLayout="column" fxLayoutAlign="center none"> - <div fxLayout="row" class="title">{{ page.title }}</div> - </div> - <div *ngIf="page.feature_image" fxLayout="row" class="article-image"> - <img class="image" alt="image about the news" [src]="page.feature_image" /> - </div> + <h1 class="title">{{ page.title }}</h1> + <div class="description"> <div [innerHtml]="page.safeHtml"></div> </div> - <p *ngIf="version" class="version" fxLayoutAlign="center center">Version : {{ version }}</p> + <p *ngIf="version" class="version">Version : {{ version }}</p> </div> </div> </div> diff --git a/src/app/page/page.component.scss b/src/app/page/page.component.scss index d11eb24f6abf06828a5d5b0de4d58023d705f246..0128833bdf999853bf58052971fa66de9d6193eb 100644 --- a/src/app/page/page.component.scss +++ b/src/app/page/page.component.scss @@ -2,10 +2,16 @@ @import 'color'; @import 'ghost'; +.pageContainer { + max-width: 720px; + margin: auto; +} + .version { padding-top: 80px; font-size: $font-size-xxsmall; color: $grey-3; + text-align: center; } .articleContainer { diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts index 9f5a82a091a6d0d1989e48c504da86573a0304ce..a804752487d05bb3c315589b5f497c0e19c23ea9 100644 --- a/src/app/page/page.component.ts +++ b/src/app/page/page.component.ts @@ -2,10 +2,14 @@ import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@an import { DomSanitizer, Meta } from '@angular/platform-browser'; import { ActivatedRoute } from '@angular/router'; import packageJson from '../../../package.json'; -import { PageEnum } from './enum/page.enum'; import { Page } from './models/page.model'; import { PageService } from './services/page.service'; +enum PageEnum { + quiSommesNous = 'qui-sommes-nous', + accessibilite = 'accessibilite', +} + @Component({ selector: 'app-page', templateUrl: './page.component.html', diff --git a/src/app/page/services/page.service.ts b/src/app/page/services/page.service.ts index cbb68924a66d7dc107bb76477f9cd4ff5169de51..aef530cef6b1d7bb85a9f2fa22a914ccb2e557b8 100644 --- a/src/app/page/services/page.service.ts +++ b/src/app/page/services/page.service.ts @@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Observable } from 'rxjs'; -import { map, catchError } from 'rxjs/operators'; +import { catchError, map } from 'rxjs/operators'; import { Page } from '../models/page.model'; @Injectable({ @@ -17,7 +17,7 @@ export class PageService { public getPage(slugPage: string): Observable<Page> { return this.http.get<Page>(`${this.baseUrl}` + slugPage).pipe( - map((item: Page) => { + map((item) => { return new Page(item); }), catchError(() => { 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 cf99e8d2109a7902dd06e9a4975a46f9e5718174..aeb808ddfe9ba665c71987bb14b2d0f4222cf056 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 5e1fcacf02e407e638ec0b7070057905dd16bf63..8d318d76ab454ee8c319045ccabde246d3f426aa 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 598bdf4e4d0f44375157993c2c12a4c57e94fb2a..87192437f55c788fdab0dd85115b78f6bdac6ad9 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 7a666d85c2ef16d29593df06e9ae3aa3f458108a..3c8671b56de64786be08b91bdfdf535584fab2ee 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 d17fe0bd7c1f098d06b172eca74aae9c91e54d70..895815e83db937397fce75282412442586608383 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 32a51bbb8aa63e99a7346e4ff9bb2bf363f0a020..9b3e2694c91cc6bd20384bb7695d454c1fabd7e2 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; } }