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 aaf3133afb7c3934b0811019b9fdbb07fbc5a816..8aad13d4bdaaeb7315519ef4bf95a9a9e8d52cdd 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 1adbe3606c607884214c4cd180250ac4a2eb4fc3..27e6544e52c89eaa6b5a05e0224630bd4a7fee56 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 797763328a00fcac9c3ca4decdd414ea0573b935..317585f7003799f50a5f31ee0fbb68dcd50f9122 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 6b48f6d33f96eba0e3c0870fda0c0386008b31d0..ae793b227d69c38fd322ea32c32ef2e2ed400ddb 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 46d4f71b12decf8b428f60d42a2a2b7c3be01021..7a51cec87a45e457f3d996b3a8acbb4ffd9bd023 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 1cbc7f338536e9de749a7068acd5bf95a0bb0bd9..21ef7a3886d7c40fa1b0a54f2676cc1555f48a41 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 00642e6c004de4d319ecc55fe9f50016f8b25a46..2d6c15596f98a52c5ea0e3b483ee85358844cbbe 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 ea2f433a97865800f2f865667c04436aec37b698..38cf7dc0002250f8fb520bc674865deb169aa518 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 6bba022048db48864888ef6b0b02d36f054d6ee0..7703df2157496f0e71fdfdbe3fa546c5c14c4c65 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 1578c1ea97a04c19055055da475f82247ca5a0c5..7c28907ac8b5a4e3bf06c711ca18e5e32b0fde5b 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 05cb307a759204c4e1d3fec30ce286b23838eda3..1868e8d4a32642747876d0497836cb35a85987e2 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 a1df80d6ea8d58d7558ad2dbeddbaac3ca5292b7..061bc66988fdb53f99e288c6f559dc7ecd04bfe6 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 08a36d469f3f3996f893aa748235f81fef761570..a8f21b0b4bfe20ff720b5863195a7fe7d46ebe8a 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 3da7ec5824fd3a195d13192e2ec305972e27637d..d8f402ac2af754d5866c26ec9bf2c3bff5356053 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;