From 7a46b6ae5c789b1b84c95256b50e509493143e9e Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 2 Mar 2021 16:58:01 +0100
Subject: [PATCH 1/9] fix(post) : fix routing lazy
---
.../post-card/post-card.component.html | 2 +-
.../post-card/post-card.component.scss | 3 ++-
.../post-card/post-card.component.ts | 13 ++++++-------
.../post-details/post-details.component.ts | 11 ++++++-----
src/app/post/post-routing.module.ts | 19 ++++++++++++++++++-
src/app/post/post.component.html | 2 +-
src/assets/scss/_color.scss | 2 +-
7 files changed, 35 insertions(+), 17 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 3dc507bda..1f223f021 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px">
+<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px" (click)="showDetails(post)">
<div fxLayout="column" fxLayoutGap="4px">
<div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="getIconOfTag(post.tags[0].slug)">
<app-svg-icon
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 fd0d45d24..c4213f621 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -2,7 +2,8 @@
@import '../../../../assets/scss/typography';
.post {
- padding: 24px 6px;
+ cursor: pointer;
+ margin: 24px 6px;
border-bottom: 1px dashed $grey-3;
&.bigNew {
border: 0;
diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
index 317e19c03..24d4c1787 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -1,4 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
import { TagEnum } from '../../enum/tagEnum.enum';
import { Post } from '../../models/post.model';
@@ -11,14 +12,9 @@ export class PostCardComponent implements OnInit {
@Input() post: Post;
@Input() class: string;
test: string;
- constructor() {}
+ constructor(private router: Router) {}
- ngOnInit(): void {
- /*ùif (this.post) {
- console.log(this.post);
- this.test = this.post.html.replace(/<[^>]*>/g, '');
- }*/
- }
+ ngOnInit(): void {}
getIconOfTag(tag: string): string {
switch (tag) {
@@ -40,4 +36,7 @@ export class PostCardComponent implements OnInit {
return null;
}
}
+ public showDetails(post: Post): void {
+ this.router.navigateByUrl('posts/details/' + post.id);
+ }
}
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index adf283aa1..4cfba29e6 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-post-details',
templateUrl: './post-details.component.html',
- styleUrls: ['./post-details.component.scss']
+ styleUrls: ['./post-details.component.scss'],
})
export class PostDetailsComponent implements OnInit {
-
- constructor() { }
-
+ constructor(private activatedRoute: ActivatedRoute) {}
+ postId: string;
ngOnInit(): void {
+ this.postId = this.activatedRoute.snapshot.paramMap.get('id');
+ console.log(this.postId);
}
-
}
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
index 2ec94d598..f8f06e2dd 100644
--- a/src/app/post/post-routing.module.ts
+++ b/src/app/post/post-routing.module.ts
@@ -1,8 +1,25 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { PostListComponent } from './components/post-list/post-list.component';
import { PostComponent } from './post.component';
-const routes: Routes = [{ path: '', component: PostComponent }];
+const routes: Routes = [
+ {
+ path: '',
+ component: PostComponent,
+ children: [
+ {
+ path: '',
+ component: PostListComponent,
+ },
+ {
+ path: 'details/:id',
+ component: PostDetailsComponent,
+ },
+ ],
+ },
+];
@NgModule({
imports: [RouterModule.forChild(routes)],
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
index 2ea36328d..8fe7258a1 100644
--- a/src/app/post/post.component.html
+++ b/src/app/post/post.component.html
@@ -1,2 +1,2 @@
<app-post-header></app-post-header>
-<app-post-list></app-post-list>
+<router-outlet></router-outlet>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 75dd41e99..7b72d6a99 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -7,7 +7,7 @@ $grey-1: #333333;
$grey-2: #4f4f4f;
$grey-3: #828282;
$grey-4: #bdbdbd;
-$grey-6: #f2f2f2;
+$grey-6: #f8f8f8;
/* form colors */
$green-1: #47c562;
/* Status colors */
--
GitLab
From f5cdd44439315da01cb40c310be7a10b7519fe2a Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 2 Mar 2021 17:46:01 +0100
Subject: [PATCH 2/9] feat(post) : add service + logic call api + display post
details
---
.../post-card/post-card.component.ts | 2 +-
.../post-details/post-details.component.html | 6 ++++-
.../post-details/post-details.component.ts | 23 +++++++++++++++----
src/app/post/models/post.model.ts | 4 ++++
src/app/post/services/post.service.ts | 7 ++++++
5 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
index 24d4c1787..b571eff00 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -37,6 +37,6 @@ export class PostCardComponent implements OnInit {
}
}
public showDetails(post: Post): void {
- this.router.navigateByUrl('posts/details/' + post.id);
+ this.router.navigateByUrl('posts/details/' + post.id, { state: { data: post } });
}
}
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 11f24be81..4f39ba1e6 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -1 +1,5 @@
-<p>post-details works!</p>
+<div *ngIf="post">
+ <h2>{{ post.title }}</h2>
+</div>
+
+<button (click)="backToPosts()">Retour</button>
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index 4cfba29e6..ce30a2537 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Post } from '../../models/post.model';
+import { PostService } from '../../services/post.service';
@Component({
selector: 'app-post-details',
@@ -7,10 +9,21 @@ import { ActivatedRoute } from '@angular/router';
styleUrls: ['./post-details.component.scss'],
})
export class PostDetailsComponent implements OnInit {
- constructor(private activatedRoute: ActivatedRoute) {}
- postId: string;
+ constructor(private activatedRoute: ActivatedRoute, private router: Router, private postService: PostService) {}
+ post: Post;
ngOnInit(): void {
- this.postId = this.activatedRoute.snapshot.paramMap.get('id');
- console.log(this.postId);
+ if (history.state.data) {
+ this.post = new Post(history.state.data);
+ } else {
+ const postId = this.activatedRoute.snapshot.paramMap.get('id');
+ this.postService.getPost(postId).subscribe((post) => {
+ this.post = post.posts[0];
+ console.log(this.post);
+ });
+ }
+ }
+
+ public backToPosts(): void {
+ this.router.navigateByUrl('/posts');
}
}
diff --git a/src/app/post/models/post.model.ts b/src/app/post/models/post.model.ts
index 53efadc33..604f43995 100644
--- a/src/app/post/models/post.model.ts
+++ b/src/app/post/models/post.model.ts
@@ -9,4 +9,8 @@ export class Post {
html: string;
author: string;
tags: Tag[];
+
+ constructor(obj?: any) {
+ Object.assign(this, obj);
+ }
}
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index 848e6a58e..c5f3841bc 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
+import { Post } from '../models/post.model';
import { PostWithMeta } from '../models/postWithMeta.model';
@Injectable({
@@ -11,6 +12,12 @@ export class PostService {
private readonly baseUrl = 'api/posts';
constructor(private http: HttpClient) {}
+ public getPost(idPost: string): Observable<PostWithMeta> {
+ return this.http
+ .get<PostWithMeta>(`${this.baseUrl}/` + idPost)
+ .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+ }
+
public getPosts(tags?: string[]): Observable<PostWithMeta> {
if (!tags) {
return this.http
--
GitLab
From 0986af8d32a606cd2aa171b2837e9a69d3f1b259 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 3 Mar 2021 13:47:03 +0100
Subject: [PATCH 3/9] feat(post) : fix margin
---
.../components/post-details/post-details.component.html | 8 ++++----
.../post/components/post-list/post-list.component.html | 2 +-
src/app/post/post.component.html | 4 +++-
3 files changed, 8 insertions(+), 6 deletions(-)
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 4f39ba1e6..6e675f19f 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="post">
- <h2>{{ post.title }}</h2>
+<div *ngIf="post" fxLayout="column">
+ <div fxLayout="row" (click)="backToPosts()">
+ <span>Retour à la liste d'acutalités</span>
+ </div>
</div>
-
-<button (click)="backToPosts()">Retour</button>
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 89aef5777..ced43f84e 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -1,4 +1,4 @@
-<div class="section-container" fxLayout="row" fxLayoutGap="32px">
+<div fxLayout="row" fxLayoutGap="32px">
<div fxLayout="column" class="list-container">
<div fxLayout="column">
<div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
index 8fe7258a1..ba58f058b 100644
--- a/src/app/post/post.component.html
+++ b/src/app/post/post.component.html
@@ -1,2 +1,4 @@
<app-post-header></app-post-header>
-<router-outlet></router-outlet>
+<div class="section-container">
+ <router-outlet></router-outlet>
+</div>
--
GitLab
From 27a44d05a22a14f6a16405d8705145c800484fde Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 3 Mar 2021 13:51:38 +0100
Subject: [PATCH 4/9] Merge branch 'feat/posts-list' into feat/post-details
---
.../post-card/post-card.component.scss | 15 ++++-
.../post-details/post-details.component.html | 6 ++
.../post-list/post-list.component.html | 19 ++++++-
.../post-list/post-list.component.scss | 56 +++++++++++++++----
.../post-list/post-list.component.ts | 5 +-
5 files changed, 87 insertions(+), 14 deletions(-)
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 c4213f621..3a3b82358 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -1,9 +1,10 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/breakpoint';
.post {
cursor: pointer;
- margin: 24px 6px;
+ padding: 16px 0px;
border-bottom: 1px dashed $grey-3;
&.bigNew {
border: 0;
@@ -12,6 +13,9 @@
object-fit: cover;
height: 360px;
width: 100%;
+ @media #{$large-phone} {
+ height: 147px;
+ }
}
}
}
@@ -20,6 +24,9 @@
object-fit: cover;
height: 88px;
width: 195px;
+ @media #{$large-phone} {
+ height: 70px;
+ }
}
}
.tag {
@@ -30,10 +37,16 @@
stroke: $secondary-color;
}
.title {
+ @media #{$large-phone} {
+ @include cn-bold-18;
+ }
@include cn-bold-20;
color: $grey-1;
}
.description {
+ @media #{$large-phone} {
+ display: none !important;
+ }
@include cn-regular-16;
color: $black;
overflow: hidden;
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 6e675f19f..61ca17c2f 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -2,4 +2,10 @@
<div fxLayout="row" (click)="backToPosts()">
<span>Retour à la liste d'acutalités</span>
</div>
+ <app-post-card
+ [post]="news"
+ [class]="'project'"
+ [ngClass]="{ 'last-child': last }"
+ *ngFor="let news of projectsNew; let last = last"
+ ></app-post-card>
</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 ced43f84e..7667e30b4 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -12,7 +12,19 @@
</div>
<app-post-card [class]="'bigNew'" [post]="bigNews"></app-post-card>
</div>
-
+ <div fxLayout="column" fxLayoutAlign=" center" class="project-container mobile">
+ <div class="background-project-container">
+ <div class="project-content mobile" fxLayout="column">
+ <h2>appels à projets</h2>
+ <app-post-card
+ [post]="news"
+ [class]="'project'"
+ [ngClass]="{ 'last-child': last }"
+ *ngFor="let news of projectsNew; let last = last"
+ ></app-post-card>
+ </div>
+ </div>
+ </div>
<div fxLayout="column">
<div fxLayout="row" class="row-border">
<h2>autres actualités</h2>
@@ -24,10 +36,13 @@
<div fxLayout="column" class="columnPosts">
<app-post-card [post]="news" *ngFor="let news of rightColumnPosts"></app-post-card>
</div>
+ <div fxLayout="column" class="columnPostsMobile">
+ <app-post-card [post]="news" *ngFor="let news of postsMobileView"></app-post-card>
+ </div>
</div>
</div>
</div>
- <div fxLayout="column" fxLayoutAlign=" center" class="project-container">
+ <div fxLayout="column" fxLayoutAlign=" center" class="project-container desktop">
<div class="background-project-container">
<div class="project-content" fxLayout="column">
<app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'project'"></app-svg-icon>
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 cf2195aeb..92e3cf584 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -1,34 +1,60 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/breakpoint';
-.section-container {
- background: $grey-6;
- .row-border {
- border-bottom: 1px dashed $grey-4;
- margin: 16px 0;
- }
- h2 {
- font-style: italic !important;
- text-transform: uppercase;
- }
+.row-border {
+ border-bottom: 1px dashed $grey-4;
+ margin: 16px 0;
}
+h2 {
+ font-style: italic !important;
+ text-transform: uppercase;
+}
+
.last-child {
::ng-deep .post {
border: 0;
}
}
.list-container {
+ @media #{$tablet} {
+ width: 100%;
+ }
width: 80%;
h2 {
+ @media #{$large-phone} {
+ @include cn-bold-22;
+ }
@include cn-bold-28;
color: $grey-2;
}
.columnPosts {
+ @media #{$large-phone} {
+ display: none !important;
+ }
width: 50%;
}
+ .columnPostsMobile {
+ display: none !important;
+ @media #{$large-phone} {
+ display: flex !important;
+ }
+ }
}
.project-container {
+ &.desktop {
+ @media #{$tablet} {
+ display: none !important;
+ }
+ }
+ &.mobile {
+ display: none !important;
+ @media #{$tablet} {
+ display: flex !important;
+ width: 100%;
+ }
+ }
width: 20%;
height: 100%;
min-width: 306px;
@@ -41,13 +67,23 @@
background: $white;
border-radius: 6px;
.project-content {
+ @media #{$large-phone} {
+ padding: 10px 32px 0px 36px;
+ }
padding: 18px 32px 26px 36px;
fill: $secondary-color;
stroke: $secondary-color;
+ &.mobile {
+ text-align: left;
+ }
text-align: center;
h2 {
+ @media #{$large-phone} {
+ @include cn-bold-22;
+ }
@include cn-bold-26;
color: $secondary-color;
+ margin-bottom: 0;
}
}
}
diff --git a/src/app/post/components/post-list/post-list.component.ts b/src/app/post/components/post-list/post-list.component.ts
index bb399cb45..5b95ba4f8 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -10,15 +10,18 @@ import { PostService } from '../../services/post.service';
})
export class PostListComponent implements OnInit {
constructor(private postService: PostService) {}
+ postsMobileView: Post[] = [];
leftColumnPosts: Post[] = [];
rightColumnPosts: Post[] = [];
projectsNew: Post[] = [];
bigNews: Post;
- projectsNews: Post[];
+
ngOnInit(): void {
this.postService.getPosts().subscribe((news) => {
news.posts.forEach((val, index) => {
val = this.addAuthorToPost(val);
+ this.postsMobileView.push(val);
+
if (index % 2 == 0) {
this.leftColumnPosts.push(val);
} else {
--
GitLab
From 78d7e6c50e4ceac4e2a902bb5747ee78db1db151 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 3 Mar 2021 17:48:39 +0100
Subject: [PATCH 5/9] feat(post): fix design html
---
.../post-card/post-card.component.scss | 7 +++
.../post-details/post-details.component.html | 46 +++++++++++---
.../post-details/post-details.component.scss | 63 +++++++++++++++++++
.../post-details/post-details.component.ts | 11 +++-
.../post-header/post-header.component.scss | 3 +-
.../post-list/post-list.component.ts | 17 +----
src/app/post/models/post.model.ts | 2 +
src/app/post/services/post.service.ts | 39 +++++++++---
src/assets/scss/_layout.scss | 1 +
src/assets/scss/_typography.scss | 8 +++
10 files changed, 160 insertions(+), 37 deletions(-)
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 3a3b82358..aaf3133af 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -18,6 +18,13 @@
}
}
}
+ .title {
+ @include cn-bold-30;
+ }
+ .description {
+ @include cn-regular-18;
+ color: $grey-1;
+ }
}
.imageContainer {
.image {
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 61ca17c2f..d31d90812 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -1,11 +1,37 @@
-<div *ngIf="post" fxLayout="column">
- <div fxLayout="row" (click)="backToPosts()">
- <span>Retour à la liste d'acutalités</span>
- </div>
- <app-post-card
- [post]="news"
- [class]="'project'"
- [ngClass]="{ 'last-child': last }"
- *ngFor="let news of projectsNew; let last = last"
- ></app-post-card>
+<div class="postContainer" *ngIf="post" fxLayout="column" fxLayoutGap="8px">
+ <div fxLayout="row">
+ <div class="backLink" fxLayout="row" fxLayoutAlign=" center" (click)="backToPosts()">
+ <svg class="chevronLeft" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
+ </svg>
+ <span>Retour à la liste d'acutalités</span>
+ </div>
+ </div>
+ <div fxLayout="column">
+ <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0].slug != 'appels'">
+ <app-svg-icon
+ [iconClass]="'icon-32'"
+ [iconColor]="'inherit'"
+ [type]="'post'"
+ [icon]="post.tags[0].slug"
+ ></app-svg-icon>
+ <span>{{ post.tags[0].name }}</span>
+ </div>
+ <div fxLayout="row" class="title">
+ {{ post.title }}
+ </div>
+ </div>
+
+ <div fxLayout="column" class="informations">
+ <div fxLayout="row">
+ {{ post.published_at | date: 'shortDate' }}
+ </div>
+ <div fxLayout="row">par {{ post.author }}</div>
+ </div>
+ <div fxLayout="row" class="imageContainer" *ngIf="post.feature_image">
+ <img class="image" [src]="post.feature_image" />
+ </div>
+ <div fxLayout="row" class="description">
+ <div [innerHtml]="post.safeHtml"></div>
+ </div>
</div>
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 e69de29bb..273483989 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -0,0 +1,63 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/layout';
+
+$margin-post: 20px;
+
+.postContainer {
+ max-width: 832px;
+ margin: $margin-post auto;
+ height: calc(
+ 100vh - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} - #{$margin-post}* 2
+ );
+ .chevronLeft {
+ height: 24px;
+ width: 24px;
+ stroke: $black;
+ margin-right: 10px;
+ }
+ .backLink {
+ cursor: pointer;
+ color: $grey-2;
+ @include cn-bold-16;
+ &:hover {
+ opacity: 0.4;
+ }
+ }
+}
+.tag {
+ @include cn-bold-16;
+ text-transform: uppercase;
+ color: $secondary-color;
+ fill: $secondary-color;
+ stroke: $secondary-color;
+}
+.title {
+ @include cn-bold-30;
+ color: $grey-1;
+}
+.informations {
+ @include cn-regular-16;
+ color: $grey-3;
+ font-style: italic;
+}
+.imageContainer {
+ .image {
+ object-fit: cover;
+ height: 360px;
+ width: 100%;
+ }
+}
+.description {
+ div {
+ width: 100%;
+ }
+ ::ng-deep figure {
+ margin: 0;
+ img {
+ object-fit: cover;
+ max-height: 360px;
+ max-width: 100%;
+ }
+ }
+}
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index ce30a2537..31f7b0f62 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { Post } from '../../models/post.model';
import { PostService } from '../../services/post.service';
@@ -9,16 +10,22 @@ import { PostService } from '../../services/post.service';
styleUrls: ['./post-details.component.scss'],
})
export class PostDetailsComponent implements OnInit {
- constructor(private activatedRoute: ActivatedRoute, private router: Router, private postService: PostService) {}
+ constructor(
+ private activatedRoute: ActivatedRoute,
+ private router: Router,
+ private postService: PostService,
+ private sanitizer: DomSanitizer
+ ) {}
post: Post;
ngOnInit(): void {
if (history.state.data) {
this.post = new Post(history.state.data);
+ this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
} else {
const postId = this.activatedRoute.snapshot.paramMap.get('id');
this.postService.getPost(postId).subscribe((post) => {
this.post = post.posts[0];
- console.log(this.post);
+ this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
});
}
}
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
index e24dbb9e6..526d11201 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -1,6 +1,7 @@
@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/layout';
.header-container {
- height: 180px;
+ height: #{$header-post-height};
background: $white;
}
diff --git a/src/app/post/components/post-list/post-list.component.ts b/src/app/post/components/post-list/post-list.component.ts
index 5b95ba4f8..4b5c8ae38 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -19,9 +19,7 @@ export class PostListComponent implements OnInit {
ngOnInit(): void {
this.postService.getPosts().subscribe((news) => {
news.posts.forEach((val, index) => {
- val = this.addAuthorToPost(val);
this.postsMobileView.push(val);
-
if (index % 2 == 0) {
this.leftColumnPosts.push(val);
} else {
@@ -30,23 +28,12 @@ export class PostListComponent implements OnInit {
});
});
this.postService.getPosts(['a-la-une']).subscribe((news) => {
- this.bigNews = this.addAuthorToPost(news.posts[0]);
+ this.bigNews = news.posts[0];
});
this.postService.getPosts(['appels']).subscribe((news) => {
- let projectNews = news.posts;
- projectNews.forEach((news) => {
- news = this.addAuthorToPost(news);
- });
- this.projectsNew = projectNews;
+ this.projectsNew = news.posts;
});
}
public publishNews(): void {}
-
- //Transform excerpt post to have a custom author.
- private addAuthorToPost(post: Post): Post {
- post.author = post.excerpt;
- post.excerpt = post.html.replace(/<[^>]*>/g, '');
- return post;
- }
}
diff --git a/src/app/post/models/post.model.ts b/src/app/post/models/post.model.ts
index 604f43995..eb13ecef2 100644
--- a/src/app/post/models/post.model.ts
+++ b/src/app/post/models/post.model.ts
@@ -1,3 +1,4 @@
+import { SafeHtml } from '@angular/platform-browser';
import { Tag } from './tag.model';
export class Post {
@@ -9,6 +10,7 @@ export class Post {
html: string;
author: string;
tags: Tag[];
+ safeHtml: SafeHtml;
constructor(obj?: any) {
Object.assign(this, obj);
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index c5f3841bc..a8554c59a 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -13,16 +13,26 @@ export class PostService {
constructor(private http: HttpClient) {}
public getPost(idPost: string): Observable<PostWithMeta> {
- return this.http
- .get<PostWithMeta>(`${this.baseUrl}/` + idPost)
- .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+ return this.http.get<PostWithMeta>(`${this.baseUrl}/` + idPost).pipe(
+ map((item: PostWithMeta) => {
+ item.posts.forEach((post) => {
+ post = this.addAuthorToPost(post);
+ });
+ return new PostWithMeta(item);
+ })
+ );
}
public getPosts(tags?: string[]): Observable<PostWithMeta> {
if (!tags) {
- return this.http
- .get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:-[appels,a-la-une]`)
- .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+ return this.http.get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:-[appels,a-la-une]`).pipe(
+ map((item: PostWithMeta) => {
+ item.posts.forEach((post) => {
+ post = this.addAuthorToPost(post);
+ });
+ return new PostWithMeta(item);
+ })
+ );
}
let tagsString = '';
// Transform tab filters to string filters
@@ -32,8 +42,19 @@ export class PostService {
tagsString += ',';
}
});
- return this.http
- .get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:[${tagsString}]`)
- .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+ return this.http.get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:[${tagsString}]`).pipe(
+ map((item: PostWithMeta) => {
+ item.posts.forEach((post) => {
+ post = this.addAuthorToPost(post);
+ });
+ return new PostWithMeta(item);
+ })
+ );
+ }
+
+ private addAuthorToPost(post: Post): Post {
+ post.author = post.excerpt;
+ post.excerpt = post.html.replace(/<[^>]*>/g, '');
+ return post;
}
}
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 94ebedd43..2a4a34f6e 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,3 +3,4 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$progressBar-height: 50px;
+$header-post-height: 180px;
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index b340d5a63..b4067a794 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -12,6 +12,7 @@ $font-size-xmedium: 1.375em; // 22px
$font-size-large: 1.625em; // 26px
$font-size-xlarge: 1.75em; // 28px
+$font-size-xxlarge: 1.875em; // 28px
html,
body,
@@ -44,6 +45,13 @@ h6,
font-size: $font-size-small;
}
+@mixin cn-bold-30 {
+ font-family: $title-font;
+ font-style: normal;
+ font-weight: bold;
+ font-size: $font-size-xxlarge;
+}
+
@mixin cn-bold-28 {
font-family: $title-font;
font-style: normal;
--
GitLab
From 28d489600edea204c8c9a0afbd40cd9b0a13bf08 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 3 Mar 2021 18:11:53 +0100
Subject: [PATCH 6/9] feat(post) : fix height when post is poor of text
---
.../post/components/post-details/post-details.component.scss | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
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 273483989..597202384 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -7,9 +7,7 @@ $margin-post: 20px;
.postContainer {
max-width: 832px;
margin: $margin-post auto;
- height: calc(
- 100vh - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} - #{$margin-post}* 2
- );
+ min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post}* 3);
.chevronLeft {
height: 24px;
width: 24px;
--
GitLab
From f6a47b11babc48ae2dfbb96e18e8460ddcf88648 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Thu, 4 Mar 2021 15:16:07 +0100
Subject: [PATCH 7/9] feat(post-details) : fix css ghost
---
.../post-details/post-details.component.html | 6 +++---
.../post-details/post-details.component.scss | 14 +++++++++++++-
.../components/post-list/post-list.component.html | 7 +------
src/assets/post/sprite.svg | 2 +-
4 files changed, 18 insertions(+), 11 deletions(-)
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 d31d90812..2e2136a31 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -1,4 +1,4 @@
-<div class="postContainer" *ngIf="post" fxLayout="column" fxLayoutGap="8px">
+<div class="postContainer" *ngIf="post" fxLayout="column" fxLayoutGap="16px">
<div fxLayout="row">
<div class="backLink" fxLayout="row" fxLayoutAlign=" center" (click)="backToPosts()">
<svg class="chevronLeft" aria-hidden="true">
@@ -8,7 +8,7 @@
</div>
</div>
<div fxLayout="column">
- <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0].slug != 'appels'">
+ <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
<app-svg-icon
[iconClass]="'icon-32'"
[iconColor]="'inherit'"
@@ -22,7 +22,7 @@
</div>
</div>
- <div fxLayout="column" class="informations">
+ <div fxLayout="column" class="informations" *ngIf="post.tags[0].slug != 'appels'">
<div fxLayout="row">
{{ post.published_at | date: 'shortDate' }}
</div>
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 597202384..63845f23b 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -1,13 +1,17 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/layout';
+@import '../../../../assets/scss/breakpoint';
+@import '../../../../assets/scss/hyperlink';
$margin-post: 20px;
.postContainer {
max-width: 832px;
margin: $margin-post auto;
- min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post}* 3);
+ min-height: calc(
+ var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post}* 3
+ );
.chevronLeft {
height: 24px;
width: 24px;
@@ -44,6 +48,9 @@ $margin-post: 20px;
object-fit: cover;
height: 360px;
width: 100%;
+ @media #{$large-phone} {
+ height: 147px;
+ }
}
}
.description {
@@ -58,4 +65,9 @@ $margin-post: 20px;
max-width: 100%;
}
}
+ ::ng-deep a {
+ @include hyperlink;
+ padding: 0;
+ font-size: 18px;
+ }
}
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 542eacd15..2af9cad48 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -45,12 +45,7 @@
<div fxLayout="column" fxLayoutAlign=" center" class="project-container desktop">
<div class="background-project-container">
<div class="project-content" fxLayout="column">
- <app-svg-icon
- [iconClass]="'icon-80'"
- [iconColor]="'inherit'"
- [type]="'post'"
- [icon]="'appel-a-projet'"
- ></app-svg-icon>
+ <app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'appels'"></app-svg-icon>
<h2>appels à projets</h2>
<app-post-card
[post]="news"
diff --git a/src/assets/post/sprite.svg b/src/assets/post/sprite.svg
index 7632091da..fe3e4e45a 100644
--- a/src/assets/post/sprite.svg
+++ b/src/assets/post/sprite.svg
@@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg">
-<symbol id="appel-a-projet" viewBox="0 0 80 60" xmlns="http://www.w3.org/2000/svg">
+<symbol id="appels" viewBox="0 0 80 60" xmlns="http://www.w3.org/2000/svg">
<path d="M1.66016 23.2006C4.67429 23.0597 8.52282 22.3132 12.7892 21.1547C17.5608 19.8591 22.9197 18.0302 28.3314 15.8906C38.369 11.9223 48.6614 6.85659 55.7703 2.08884V2.14843V2.22928V2.31051V2.39211V2.47407V2.5564V2.6391V2.72216V2.80559V2.88938V2.97352V3.05802V3.14288V3.2281V3.31367V3.39959V3.48586V3.57248V3.65944V3.74676V3.83441V3.92241V4.01075V4.09943V4.18845V4.27781V4.3675V4.45752V4.54788V4.63856V4.72958V4.82092V4.91259V5.00458V5.0969V5.18954V5.2825V5.37577V5.46937V5.56327V5.6575V5.75203V5.84688V5.94203V6.03749V6.13326V6.22933V6.32571V6.42239V6.51937V6.61664V6.71422V6.81209V6.91025V7.0087V7.10745V7.20649V7.30581V7.40542V7.50532V7.6055V7.70596V7.8067V7.90772V8.00901V8.11059V8.21243V8.31455V8.41694V8.5196V8.62253V8.72573V8.82918V8.93291V9.03689V9.14114V9.24565V9.35041V9.45543V9.5607V9.66622V9.772V9.87803V9.9843V10.0908V10.1976V10.3046V10.4119V10.5194V10.6271V10.7351V10.8433V10.9517V11.0604V11.1693V11.2784V11.3878V11.4974V11.6072V11.7172V11.8275V11.938V12.0487V12.1596V12.2708V12.3821V12.4937V12.6054V12.7174V12.8296V12.942V13.0546V13.1675V13.2805V13.3937V13.5071V13.6207V13.7345V13.8485V13.9628V14.0771V14.1917V14.3065V14.4215V14.5366V14.6519V14.7674V14.8831V14.999V15.1151V15.2313V15.3477V15.4643V15.581V15.6979V15.815V15.9323V16.0497V16.1673V16.2851V16.403V16.521V16.6393V16.7577V16.8762V16.9949V17.1137V17.2327V17.3519V17.4712V17.5906V17.7102V17.83V17.9498V18.0698V18.19V18.3103V18.4307V18.5513V18.672V18.7928V18.9137V19.0348V19.156V19.2774V19.3988V19.5204V19.6421V19.7639V19.8858V20.0079V20.1301V20.2523V20.3747V20.4972V20.6198V20.7425V20.8654V20.9883V21.1113V21.2344V21.3576V21.481V21.6044V21.7279V21.8515V21.9752V22.099V22.2229V22.3468V22.4709V22.595V22.7192V22.8435V22.9679V23.0923V23.2169V23.3415V23.4661V23.5909V23.7157V23.8406V23.9655V24.0905V24.2156V24.3408V24.466V24.5912V24.7166V24.8419V24.9674V25.0929V25.2184V25.344V25.4696V25.5953V25.7211V25.8468V25.9726V26.0985V26.2244V26.3503V26.4763V26.6023V26.7284V26.8544V26.9806V27.1067V27.2328V27.359V27.4852V27.6115V27.7377V27.864V27.9903V28.1166V28.243V28.3693V28.4956V28.622V28.7484V28.8748V29.0012V29.1275V29.2539V29.3803V29.5067V29.6331V29.7595V29.8859V30.0123V30.1387V30.265V30.3914V30.5177V30.6441V30.7704V30.8967V31.023V31.1492V31.2754V31.4017V31.5279V31.654V31.7802V31.9063V32.0323V32.1584V32.2844V32.4104V32.5363V32.6622V32.7881V32.9139V33.0397V33.1654V33.2911V33.4168V33.5424V33.6679V33.7934V33.9188V34.0442V34.1696V34.2948V34.42V34.5452V34.6703V34.7953V34.9203V35.0452V35.17V35.2947V35.4194V35.544V35.6686V35.793V35.9174V36.0417V36.1659V36.2901V36.4141V36.5381V36.662V36.7858V36.9095V37.0331V37.1566V37.2801V37.4034V37.5266V37.6498V37.7728V37.8957V38.0186V38.1413V38.2639V38.3864V38.5088V38.6311V38.7533V38.8754V38.9973V39.1191V39.2408V39.3624V39.4839V39.6053V39.7265V39.8476V39.9685V40.0894V40.2101V40.3307V40.4511V40.5714V40.6916V40.8116V40.9315V41.0512V41.1708V41.2903V41.4096V41.5288V41.6478V41.7667V41.8854V42.004V42.1224V42.2406V42.3587V42.4766V42.5944V42.712V42.8294V42.9467V43.0638V43.1808V43.2975V43.4141V43.5306V43.6468V43.7629V43.8788V43.9945V44.11V44.2254V44.3406V44.4555V44.5703V44.6849V44.7993V44.9136V45.0276V45.1414V45.2551V45.3685V45.4818V45.5948V45.7076V45.8203V45.9327V46.0449V46.1569V46.2687V46.3803V46.4917V46.6029V46.7138V46.8245V46.9351V47.0453V47.1554V47.2653V47.3749V47.4843V47.5934V47.7024V47.8111V47.9195V48.0278V48.1358V48.2435V48.3511V48.4583V48.5654V48.6722V48.7787V48.885V48.9911V49.0969V49.2024V49.3078V49.4128V49.5176V49.6221V49.7264V49.8304V49.9342V50.0377V50.1409V50.2439V50.3465V50.449V50.5511V50.653V50.7546V50.8559V50.957V51.0578V51.1582V51.2585V51.3584V51.458V51.5574V51.6565V51.7552V51.8537V51.9519V52.0498V52.1474V52.2448V52.3418V52.4385V52.5349V52.631V52.7268V52.8223V52.9175V53.0124V53.1069V53.2012V53.2952V53.3888V53.4821V53.5751V53.6678V53.7601V53.8521V53.9439V54.0352V54.1263V54.217V54.3074V54.3975V54.4872V54.5766V54.5932C48.6675 50.7584 38.3441 46.5962 28.2733 43.3173C18.0609 39.9923 7.95384 37.5244 1.66016 37.2769V23.2006Z" fill="none" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.7703 0.181641C42.7428 10.2013 12.6838 22.2249 0.660156 22.2249V38.2564C3.19182 38.2564 8.06936 39.0833 11.8822 39.8595L6.27117 53.4863C5.78047 56.4517 7.78661 59.2534 10.752 59.7441C13.7174 60.2349 16.5192 58.2287 17.0099 55.2633L19.8979 41.4627L19.6442 39.9086L19.5098 39.51L41.2658 9.45105H45.2737L21.5122 42.2809C34.1261 45.936 48.342 51.4756 56.7703 56.2918V28.5373L42.6898 47.8979H38.682L55.0188 25.106L56.7703 28.386V11.4099L32.9349 43.1831H28.9271L55.4659 7.44562L56.7703 10.1451V0.181641ZM25.4388 18.068H21.4309L12.6838 31.1271V37.1106L25.4388 18.068Z" stroke="none"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9531 28.002C64.9531 29.1368 65.919 30.0566 67.1105 30.0566L77.178 30.0566C78.3695 30.0566 79.3353 29.1368 79.3353 28.002C79.3353 26.8673 78.3695 25.9474 77.178 25.9474L67.1105 25.9474C65.919 25.9474 64.9531 26.8673 64.9531 28.002Z" stroke="none"/>
--
GitLab
From 3f8c136fe02d9e003c2c11b0d0dc10af06dda520 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Fri, 5 Mar 2021 16:10:39 +0100
Subject: [PATCH 8/9] fix(post) : fix img size
---
src/app/post/components/post-details/post-details.component.scss | 1 -
1 file changed, 1 deletion(-)
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 63845f23b..496864352 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -61,7 +61,6 @@ $margin-post: 20px;
margin: 0;
img {
object-fit: cover;
- max-height: 360px;
max-width: 100%;
}
}
--
GitLab
From 5b6c51e73c7a9c24f28f5a5a36c829411bca3d5e Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 8 Mar 2021 11:07:58 +0100
Subject: [PATCH 9/9] fix: remove commented code
---
src/app/post/services/post.service.ts | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index 4476dbc76..d70e18881 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -24,16 +24,6 @@ export class PostService {
);
}
- // public getPosts(tags?: string[]): Observable<PostWithMeta> {
- // if (!tags) {
- // return this.http.get<PostWithMeta>(`${this.baseUrl}?include=tags,authors&filter=tag:-[appels,a-la-une]`).pipe(
- // map((item: PostWithMeta) => {
- // item.posts.forEach((post) => {
- // post = this.addAuthorToPost(post);
- // });
- // return new PostWithMeta(item);
- // })
- // );
public getPosts(page: number, tags?: string[]): Observable<PostWithMeta> {
if (!tags) {
return this.http
--
GitLab