From adc0525737cbe43f2922043067f691a3822c7d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20BRISON?=
<ext.sopra.jbrison@grandlyon.com>
Date: Fri, 12 Mar 2021 15:05:15 +0100
Subject: [PATCH] Fix/news
---
.../post-card/post-card.component.scss | 4 ++
.../post-details/post-details.component.scss | 8 ++-
.../post-details/post-details.component.ts | 6 +-
.../post-header/post-header.component.html | 9 ++-
.../post-header/post-header.component.scss | 59 +++++--------------
.../post-header/post-header.component.ts | 16 ++++-
.../post-list/post-list.component.html | 18 +++---
.../post-list/post-list.component.scss | 7 +--
.../post-list/post-list.component.ts | 5 +-
.../post-publish/post-publish.component.html | 4 +-
.../post-publish/post-publish.component.scss | 5 +-
.../post-publish/post-publish.component.ts | 3 +-
src/assets/ico/sprite.svg | 10 ++--
src/assets/scss/_layout.scss | 3 +-
14 files changed, 77 insertions(+), 80 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 aaf3133af..8aad13d4b 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -19,6 +19,9 @@
}
}
.title {
+ @media #{$large-phone} {
+ @include cn-bold-22;
+ }
@include cn-bold-30;
}
.description {
@@ -27,6 +30,7 @@
}
}
.imageContainer {
+ margin-bottom: 12px !important;
.image {
object-fit: cover;
height: 88px;
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 1adbe3606..27e6544e5 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -7,8 +7,8 @@
$margin-post: 20px;
.postContainer {
- max-width: 832px;
- margin: $margin-post auto;
+ max-width: 860px;
+ margin: $margin-post 0;
min-height: calc(
var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
);
@@ -67,6 +67,8 @@ $margin-post: 20px;
::ng-deep a {
@include hyperlink;
padding: 0;
- font-size: 18px;
+ }
+ ::ng-deep p {
+ @include cn-regular-18;
}
}
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 797763328..317585f70 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
+import { RouterListenerService } from '../../../services/routerListener.service';
import { Post } from '../../models/post.model';
import { PostService } from '../../services/post.service';
@@ -14,7 +15,8 @@ export class PostDetailsComponent implements OnInit {
private activatedRoute: ActivatedRoute,
private router: Router,
private postService: PostService,
- private sanitizer: DomSanitizer
+ private sanitizer: DomSanitizer,
+ private routerListener: RouterListenerService
) {}
post: Post;
ngOnInit(): void {
@@ -31,6 +33,6 @@ export class PostDetailsComponent implements OnInit {
}
public backToPosts(): void {
- this.router.navigateByUrl('/news');
+ this.routerListener.goToPreviousUrl();
}
}
diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html
index 6b48f6d33..ae793b227 100644
--- a/src/app/post/components/post-header/post-header.component.html
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -1,6 +1,9 @@
<div class="header-container">
<div class="section-container" fxLayout="column" fxLayoutAlign="space-between">
- <h1>Actualités</h1>
+ <h1>
+ Fil d’actualité
+ <p class="onlyOnDesktop">du réseau d’inclusion numérique</p>
+ </h1>
<div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="space-between flex-end" class="overflow">
<div fxLayout="row" class="row-mobile">
<div fxLayout="row" fxLayoutAlign="center center" *ngFor="let tag of tags.others">
@@ -9,7 +12,7 @@
tabindex="0"
(click)="activateTag(tag)"
(keydown.enter)="activateTag(tag)"
- [ngClass]="{ active: tag.slug === mainActiveTag.slug }"
+ [ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }"
>{{ tag.name }}</span
>
</div>
@@ -35,7 +38,7 @@
<app-svg-icon
class="icon"
[type]="'ico'"
- [iconClass]="modalTypeOpened === TypeModal.public ? 'white' : 'grey-1'"
+ [iconClass]="modalTypeOpened === TypeModal.public ? 'white icon-32' : 'grey-1 icon-32'"
[icon]="'news-public'"
></app-svg-icon>
<div class="arrow"></div>
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 46d4f71b1..7a51cec87 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -5,11 +5,24 @@
@import '../../../../assets/scss/layout';
h1 {
+ margin-top: 25px;
margin-bottom: 0px;
+ .onlyOnDesktop {
+ margin: 0;
+ }
+ @media #{$large-phone} {
+ @include cn-bold-28;
+ .onlyOnDesktop {
+ display: none;
+ }
+ }
}
.header-container {
height: #{$header-post-height};
+ @media #{$large-phone} {
+ height: #{$header-post-height-mobile};
+ }
background: $white;
}
@@ -22,7 +35,7 @@ h1 {
button {
background: $white;
height: 40px;
- width: 100%;
+ width: 210px;
border: 1px solid $grey-4;
padding: 3px 16px 3px 16px;
outline: none;
@@ -81,50 +94,6 @@ h1 {
}
}
-// .btnSection {
-// padding: 16px 0 0px 0;
-// button {
-// background: $white;
-// height: 40px;
-// width: 210px;
-// border: 1px solid $grey-4;
-// padding: 3px 16px 3px 16px;
-// outline: none;
-// border-radius: 4px;
-// cursor: pointer;
-// white-space: nowrap;
-// @include btn-normal;
-// .arrow {
-// background-color: transparent;
-// border-bottom: 1px solid $grey-2;
-// border-right: 1px solid $grey-2;
-// transform: translateY(-25%) rotate(45deg);
-// margin: 0 5px 0 10px;
-// height: 7px;
-// width: 7px;
-// }
-// &:focus {
-// border-color: $blue-hover;
-// }
-// }
-// .selected {
-// border-color: $primary-color !important;
-// color: inherit;
-// .arrow {
-// background-color: transparent;
-// border-bottom: 1px solid $primary-color;
-// border-right: 1px solid $primary-color;
-// transform: translateY(25%) rotate(-135deg);
-// margin: 0 5px 0 10px;
-// height: 7px;
-// width: 7px;
-// }
-// }
-// .containCheckedFilters {
-// border-color: $secondary-color;
-// }
-// }
-
.tag-button {
padding: 8px 10px;
@include cn-regular-16;
diff --git a/src/app/post/components/post-header/post-header.component.ts b/src/app/post/components/post-header/post-header.component.ts
index 1cbc7f338..21ef7a388 100644
--- a/src/app/post/components/post-header/post-header.component.ts
+++ b/src/app/post/components/post-header/post-header.component.ts
@@ -27,6 +27,12 @@ export class PostHeaderComponent implements OnInit {
this.route.data.subscribe((data) => {
if (data.tags) {
this.tags = data.tags;
+ this.tags.others.forEach((tag) => {
+ tag.slug == TagEnum.aLaUne ? (tag.name = 'Les + récentes') : tag.name;
+ });
+ this.tags.commune.sort((tagA, tagB) => {
+ return this.sortArray(tagA, tagB);
+ });
}
});
@@ -43,6 +49,14 @@ export class PostHeaderComponent implements OnInit {
});
}
+ private sortArray(tagA: Tag, tagB: Tag): number {
+ const nameTagA = tagA.name.toUpperCase();
+ const nameTagB = tagB.name.toUpperCase();
+ if (nameTagA < nameTagB) {
+ return -1;
+ }
+ return 1;
+ }
// Open the modal and display the list according to the right filter button
public openModal(modalType: TypeModalNews): void {
// if modal already opened, reset type
@@ -96,7 +110,7 @@ export class PostHeaderComponent implements OnInit {
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
- mainTag: this.mainActiveTag.slug,
+ mainTag: this.mainActiveTag.slug == this.tagEnum.etudes ? this.mainActiveTag.name : this.mainActiveTag.slug,
publicTags: this.checkedPublicTags.map((tag) => tag.slug),
locationTags: this.checkedLocationTags.map((tag) => tag.slug),
},
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 00642e6c0..2d6c15596 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -17,7 +17,7 @@
</div>
<div fxLayout="column" *ngIf="isALaUneTag() && !displayTags()">
<div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
- <h2>Ã la une</h2>
+ <h2>dernières actualités</h2>
<app-button
[type]="'button'"
[style]="'buttonWithHash'"
@@ -25,7 +25,7 @@
(action)="togglePublishNews()"
></app-button>
</div>
- <app-post-card [class]="'bigNew'" [post]="bigNews"></app-post-card>
+ <app-post-card *ngIf="bigNews" [class]="'bigNew'" [post]="bigNews"></app-post-card>
</div>
<div fxLayout="column" fxLayoutAlign=" center" class="project-container mobile">
<div class="background-project-container">
@@ -46,18 +46,22 @@
</div>
</div>
<div fxLayout="column">
- <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
- <h2 [ngClass]="{ 'padding-16-Top': isALaUneTag() && !displayTags() }">{{ getDisplayedTag() }}</h2>
+ <div
+ *ngIf="!isALaUneTag() || displayTags()"
+ fxLayout="row"
+ class="row-border"
+ fxLayoutAlign="space-between center"
+ >
+ <h2>{{ getDisplayedTag() }}</h2>
<app-button
- *ngIf="displayTags() || !isALaUneTag()"
[type]="'button'"
[style]="'buttonWithHash'"
[text]="'Publier votre actu'"
- (action)="publishNews()"
+ (action)="togglePublishNews()"
></app-button>
</div>
<div *ngIf="leftColumnPosts.length <= 0" fxLayout="column">
- <p>Aucun résultat ne correspond a votre recherche.</p>
+ <p>Aucun résultat ne correspond à votre recherche.</p>
</div>
<div fxLayout="row" fxLayoutGap="33px">
<div fxLayout="column" class="columnPosts">
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 ea2f433a9..38cf7dc00 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -5,7 +5,6 @@
.section-container {
background: $grey-6;
- margin-top: 40px;
min-height: 68vh;
width: 100%;
.row-border {
@@ -31,7 +30,7 @@ h2 {
@media #{$tablet} {
width: 100%;
}
- width: 70%;
+ width: 80%;
h2 {
@media #{$large-phone} {
@include cn-bold-22;
@@ -111,7 +110,3 @@ h2 {
margin-bottom: 0;
}
}
-
-.padding-16-Top {
- padding-top: 16px;
-}
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 6bba02204..7703df215 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -52,9 +52,12 @@ export class PostListComponent implements OnInit {
this.projectsNew = projectNews;
});
this.postService.getPosts(1, [TagEnum.aLaUne]).subscribe((news) => {
- this.bigNews = this.addAuthorToPost(news.posts[0]);
+ if (news.posts[0]) {
+ this.bigNews = this.addAuthorToPost(news.posts[0]);
+ }
});
this.route.queryParams.subscribe((queryParams) => {
+ this.isPublishMode = false;
// If main tag is in route, set it
if (queryParams.mainTag) {
this.selectedMainTagSlug = queryParams.mainTag;
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 1578c1ea9..7c28907ac 100644
--- a/src/app/post/components/post-publish/post-publish.component.html
+++ b/src/app/post/components/post-publish/post-publish.component.html
@@ -27,7 +27,9 @@
<br />
</div>
<div>
- <a class="btn-primary" href="mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer"
+ <a
+ class="btn-primary"
+ [href]="'mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer&body=' + bodyMail"
>Envoyer votre actu par mail</a
>
</div>
diff --git a/src/app/post/components/post-publish/post-publish.component.scss b/src/app/post/components/post-publish/post-publish.component.scss
index 05cb307a7..1868e8d4a 100644
--- a/src/app/post/components/post-publish/post-publish.component.scss
+++ b/src/app/post/components/post-publish/post-publish.component.scss
@@ -5,9 +5,8 @@
$margin-post: 20px;
.container {
- max-width: 832px;
- width: 95%;
- margin: $margin-post auto;
+ max-width: 860px;
+ margin: $margin-post 0 100px 0;
min-height: calc(
var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 2
);
diff --git a/src/app/post/components/post-publish/post-publish.component.ts b/src/app/post/components/post-publish/post-publish.component.ts
index a1df80d6e..061bc6698 100644
--- a/src/app/post/components/post-publish/post-publish.component.ts
+++ b/src/app/post/components/post-publish/post-publish.component.ts
@@ -8,7 +8,8 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
export class PostPublishComponent implements OnInit {
@Output() closePublish = new EventEmitter<boolean>();
constructor() {}
-
+ public bodyMail =
+ "Bonjour,%0D Je souhaite ajouter cette publication sur Rés'in :%0D- Titre :%0D- Texte :%0D- Auteur :%0D- Image : à joindre en pièce jointe";
ngOnInit(): void {}
public backToPosts(): void {
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 08a36d469..a8f21b0b4 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -218,12 +218,10 @@
<rect x="21.7109" y="16.4634" width="1.33333" height="9.11111"/>
</symbol>
-<symbol id="news-public" viewBox="0 0 29 26" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8488 19.9496C16.7844 19.3911 17.4109 18.3687 17.4109 17.2C17.4109 15.4327 15.9782 14 14.2109 14C12.4436 14 11.0109 15.4327 11.0109 17.2C11.0109 18.3687 11.6375 19.3911 12.573 19.9496C11.1806 20.5754 10.2109 21.9745 10.2109 23.6V26H18.2109V23.6C18.2109 21.9745 17.2413 20.5754 15.8488 19.9496Z" />
-<path d="M5.84883 19.9496C6.78438 19.3911 7.41094 18.3687 7.41094 17.2C7.41094 15.4327 5.97825 14 4.21094 14C2.44363 14 1.01094 15.4327 1.01094 17.2C1.01094 18.3687 1.6375 19.3911 2.57304 19.9496C1.18059 20.5754 0.210938 21.9745 0.210938 23.6V26H8.21094V23.6C8.21094 21.9745 7.24128 20.5754 5.84883 19.9496Z" />
-<path d="M10.8488 5.94963C11.7844 5.39114 12.4109 4.36874 12.4109 3.2C12.4109 1.43269 10.9782 0 9.21094 0C7.44363 0 6.01094 1.43269 6.01094 3.2C6.01094 4.36874 6.6375 5.39114 7.57304 5.94963C6.18059 6.57538 5.21094 7.97445 5.21094 9.6V12H13.2109V9.6C13.2109 7.97445 12.2413 6.57538 10.8488 5.94963Z" />
-<path d="M25.8488 19.9496C26.7844 19.3911 27.4109 18.3687 27.4109 17.2C27.4109 15.4327 25.9782 14 24.2109 14C22.4436 14 21.0109 15.4327 21.0109 17.2C21.0109 18.3687 21.6375 19.3911 22.573 19.9496C21.1806 20.5754 20.2109 21.9745 20.2109 23.6V26H28.2109V23.6C28.2109 21.9745 27.2413 20.5754 25.8488 19.9496Z" />
-<path d="M20.8488 5.94963C21.7844 5.39114 22.4109 4.36874 22.4109 3.2C22.4109 1.43269 20.9782 0 19.2109 0C17.4436 0 16.0109 1.43269 16.0109 3.2C16.0109 4.36874 16.6375 5.39114 17.573 5.94963C16.1806 6.57538 15.2109 7.97445 15.2109 9.6V12H23.2109V9.6C23.2109 7.97445 22.2413 6.57538 20.8488 5.94963Z"/>
+<symbol id="news-public" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5985 23.9446C24.6326 23.3273 25.3251 22.1973 25.3251 20.9055C25.3251 18.9522 23.7416 17.3687 21.7882 17.3687C19.8349 17.3687 18.2514 18.9522 18.2514 20.9055C18.2514 22.1973 18.9439 23.3273 19.9779 23.9446C18.4389 24.6362 17.3672 26.1825 17.3672 27.9792V29.5265H26.2093V27.9792C26.2093 26.1825 25.1376 24.6362 23.5985 23.9446Z" stroke="none"/>
+<path d="M11.4423 23.9446C12.4763 23.3273 13.1688 22.1973 13.1688 20.9055C13.1688 18.9522 11.5853 17.3687 9.63199 17.3687C7.67865 17.3687 6.09515 18.9522 6.09515 20.9055C6.09515 22.1973 6.78766 23.3273 7.82169 23.9446C6.28266 24.6362 5.21094 26.1825 5.21094 27.9792V29.5265H14.053V27.9792C14.053 26.1825 12.9813 24.6362 11.4423 23.9446Z" stroke="none"/>
+<path d="M16.9696 9.5759C18.0037 8.95863 18.6962 7.82861 18.6962 6.53684C18.6962 4.5835 17.1127 3 15.1593 3C13.206 3 11.6225 4.5835 11.6225 6.53684C11.6225 7.82861 12.315 8.95863 13.349 9.5759C11.81 10.2675 10.7383 11.8139 10.7383 13.6105V15.1579H19.5804V13.6105C19.5804 11.8139 18.5087 10.2675 16.9696 9.5759Z" stroke="none"/>
</symbol>
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 3da7ec582..d8f402ac2 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,4 +3,5 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$progressBar-height: 50px;
-$header-post-height: 140px;
+$header-post-height: 180px;
+$header-post-height-mobile: 140px;
--
GitLab