Skip to content
Snippets Groups Projects
Commit 3dd5fea2 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

chore: update about us page

parent 19c4d250
No related branches found
No related tags found
2 merge requests!783V3.0.0,!740chore: update about us page
Showing with 34 additions and 47 deletions
......@@ -36,6 +36,7 @@
],
"cSpell.language": "fr,en",
"cSpell.words": [
"accessibilite",
"Annuary",
"carto",
"categorie",
......
export enum PageEnum {
quiSommesNous = 'qui-sommes-nous',
accessibilite = 'accessibilite',
}
<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>
......
......@@ -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 {
......
......@@ -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',
......
......@@ -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(() => {
......
......@@ -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>
......
......@@ -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} {
......
......@@ -2,6 +2,7 @@
<app-button
[label]="'Retour'"
[variant]="'tertiary'"
[size]="'large'"
[iconFolder]="'ico'"
[iconName]="'arrowBack'"
(action)="backToPosts()"
......
......@@ -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;
......
......@@ -4,6 +4,7 @@
<app-button
[label]="'Retour'"
[variant]="'tertiary'"
[size]="'large'"
[iconFolder]="'ico'"
[iconName]="'arrowBack'"
(action)="backToPosts()"
......
......@@ -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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment