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 ff06f423aac5debc155bdf5c269e02d9500e6e45..c6b32c5a1d0e3511bafa10526583f7714fa51c83 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1,34 +1,37 @@
<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="post.tags[0] && post.tags[0].slug != tagEnum.appels"
- >
- <app-svg-icon
- [iconClass]="'icon-32'"
- [iconColor]="'inherit'"
- [type]="'post'"
- [icon]="post.tags[0].slug"
- ></app-svg-icon>
+ <div fxLayout="column" class="imageContainer" *ngIf="post.feature_image">
+ <img class="image" alt="image about the news" [src]="post.feature_image" />
+ </div>
+ <div fxLayout="column" class="imageContainer" *ngIf="!post.feature_image">
+ <img
+ *ngIf="isAppelAProjet()"
+ class="image"
+ alt="image about appels a projets"
+ src="../../../../assets/post/aap.png"
+ />
+ <img
+ *ngIf="!isAppelAProjet()"
+ class="image"
+ alt="image about appels a projets"
+ src="../../../../assets/post/placeholder.png"
+ />
+ </div>
+ <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center">
+ <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]">
<span>{{ post.tags[0].name }}</span>
</div>
- <div fxLayout="row" class="imageContainer" *ngIf="post.feature_image">
- <img class="image" alt="image about the news" [src]="post.feature_image" />
+ <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]">
+ <span>info</span>
</div>
+
<div fxLayout="row" class="title">
{{ post.title }}
</div>
- </div>
- <div fxLayout="row" class="description">
- {{ post.excerpt }}
- </div>
- <div fxLayout="column" class="informations">
- <div fxLayout="row">
- {{ post.updated_at | date: 'shortDate' }}
+ <div fxLayout="column" class="informations">
+ <div>{{ post.author }}</div>
+ <div>
+ {{ post.updated_at | date: 'dd MMM y' }}
+ </div>
</div>
- <div fxLayout="row">par {{ post.author }}</div>
</div>
</div>
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 16ed503c9849d0b76bdf76c89f4a66e8110715bb..394089ce2a7747367d5707dec9efb3fe9cbe7eab 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -5,36 +5,11 @@
.post {
cursor: pointer;
padding: 16px 0px;
- border-bottom: 1px dashed $grey-3;
- &.bigNew {
- border: 0;
- .imageContainer {
- .image {
- object-fit: cover;
- height: 360px;
- width: 100%;
- @media #{$large-phone} {
- height: 147px;
- }
- }
- }
- .title {
- @media #{$large-phone} {
- @include cn-bold-22;
- }
- @include cn-bold-30;
- }
- .description {
- @include cn-regular-18;
- color: $grey-1;
- }
- }
.imageContainer {
margin-bottom: 12px !important;
+ max-width: 600px;
.image {
object-fit: cover;
- max-height: 180px;
- max-width: 90%;
@media #{$large-phone} {
height: 70px;
}
@@ -51,7 +26,7 @@
@media #{$large-phone} {
@include cn-bold-18;
}
- @include cn-bold-20;
+ @include cn-bold-22;
color: $grey-1;
}
.description {
@@ -68,8 +43,10 @@
}
.informations {
@include cn-regular-16;
- color: $grey-3;
- font-style: italic;
+ div:nth-child(2n) {
+ text-transform: uppercase;
+ color: $grey-3;
+ }
}
}
.project {
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 78970f17fde1248ad7c9604de683217b361ce432..36ce0ea85b5ab0cb5e0bc0a370ba37806d55ca64 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -8,14 +8,17 @@ import { Post } from '../../models/post.model';
templateUrl: './post-card.component.html',
styleUrls: ['./post-card.component.scss'],
})
-export class PostCardComponent implements OnInit {
+export class PostCardComponent {
@Input() post: Post;
@Input() class: string;
public tagEnum = TagEnum;
constructor(private router: Router) {}
- ngOnInit(): void {}
public showDetails(post: Post): void {
this.router.navigateByUrl('news/details/' + post.id, { state: { data: post } });
}
+
+ public isAppelAProjet(): boolean {
+ return this.post.tags[0].slug === this.tagEnum.appels;
+ }
}
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 3de9a5c0406951f7630379e0f7d627b65dcd584b..8877f2920cbe669594c18c3792f2f224f5765598 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -4,34 +4,33 @@
<svg class="chevronLeft" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
</svg>
- <span>Retour à la liste d'actualités</span>
+ <span>Retour</span>
</div>
</div>
- <div fxLayout="column">
- <div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
- <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 class="gh-canvas">
+ <div fxLayout="column" fxLayoutAlign="center none">
+ <div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
+ <span>{{ post.tags[0].name }}</span>
+ </div>
+ <div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
+ <span>Infos</span>
+ </div>
+ <div fxLayout="row" class="title">
+ {{ post.title }}
+ </div>
+ <div fxLayout="column" class="informations">
+ <div>{{ post.author }}</div>
+ <div>
+ {{ post.updated_at | date: 'dd MMM y' }}
+ </div>
+ </div>
</div>
- <div fxLayout="row" class="title">
- {{ post.title }}
- </div>
- </div>
- <div fxLayout="column" class="informations" *ngIf="post.tags[0] && post.tags[0].slug != 'appels'">
- <div fxLayout="row">
- {{ post.updated_at | date: 'shortDate' }}
+ <div fxLayout="row" class="article-image" *ngIf="post.feature_image">
+ <img class="image" alt="image about the news" [src]="post.feature_image" />
+ </div>
+ <div fxLayout="row" class="description">
+ <div [innerHtml]="post.safeHtml"></div>
</div>
- <div fxLayout="row">par {{ post.author }}</div>
- </div>
- <div fxLayout="row" class="imageContainer" *ngIf="post.feature_image">
- <img class="image" alt="image about the news" [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 a52df2d916b766cf0bfe737122c20f327c63ec78..c06de925a4408a0ecd1c3645fa8617d335a9f2fc 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -7,7 +7,7 @@
$margin-post: 20px;
.postContainer {
- max-width: 860px;
+ max-width: 1200px;
margin: $margin-post 0;
min-height: calc(
var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
@@ -18,14 +18,6 @@ $margin-post: 20px;
stroke: $black;
margin-right: 10px;
}
- .backLink {
- cursor: pointer;
- color: $grey-2;
- @include cn-bold-16;
- &:hover {
- opacity: 0.4;
- }
- }
}
.tag {
@include cn-bold-16;
@@ -37,25 +29,19 @@ $margin-post: 20px;
.title {
@include cn-bold-30;
color: $grey-1;
+ margin-bottom: 8px;
}
.informations {
@include cn-regular-16;
- color: $grey-3;
- font-style: italic;
-}
-.imageContainer {
- .image {
- object-fit: cover;
- height: 360px;
- width: 80%;
- @media #{$large-phone} {
- height: 147px;
- }
+ div:nth-child(2n) {
+ text-transform: uppercase;
+ color: $grey-3;
}
}
+
.description {
div {
- width: 80%;
+ max-width: 860px;
line-height: 180%;
}
::ng-deep hr {
@@ -99,10 +85,12 @@ $margin-post: 20px;
padding: 0;
}
::ng-deep p {
- @include cn-regular-16;
+ @include cn-regular-20;
+ line-height: 1.6em;
}
::ng-deep li {
- @include cn-regular-16;
+ @include cn-regular-20;
+ line-height: 1.6em;
margin-bottom: 10px;
}
::ng-deep h2 {
@@ -198,3 +186,26 @@ $margin-post: 20px;
}
}
}
+
+.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: 6vmin 0 0;
+ img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ }
+}
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 bc6e70a8fe2a9e87fdc3a572313e6f9d94c35160..f9b127809e471441cd4f1f4ad1526a3fc5e0b4df 100644
--- a/src/app/post/components/post-header/post-header.component.html
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -1,9 +1,12 @@
<div class="header-container">
- <div class="section-container" fxLayout="column" fxLayoutAlign="space-between">
- <h1>
- Fil d’actualité
- <p class="onlyOnDesktop">du réseau d’inclusion numérique</p>
- </h1>
+ <div class="section-container news" fxLayout="column" fxLayoutAlign="space-between">
+ <div class="section-container title" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
+ <app-svg-icon class="icon" [type]="'ico'" [iconClass]="'icon-80'" [icon]="'news-header'"></app-svg-icon>
+ <div>
+ <h1 class="no-margin">Fil d’actualité</h1>
+ <p class="subtitle no-margin onlyOnDesktop">du réseau d’inclusion numérique</p>
+ </div>
+ </div>
<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">
@@ -17,7 +20,16 @@
>
</div>
</div>
- <div
+ <div fxLayout="row" class="row-mobile">
+ <app-button
+ class="publish-button hide-on-mobile"
+ [type]="'button'"
+ [style]="'buttonWithHash'"
+ [text]="'Publier votre actu'"
+ (action)="togglePublishNews()"
+ ></app-button>
+ </div>
+ <!-- <div
class="btnSection"
fxLayout="row"
fxLayoutAlign="space-between center"
@@ -74,7 +86,7 @@
(closeEvent)="closeModal()"
></app-post-modal-filters>
</div>
- </div>
+ </div> -->
</div>
</div>
</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 118fe3ac17c4813485139adad3af6a47085c0d10..333772a3cc7cc86edf24d18466e387268fee2a45 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -5,8 +5,6 @@
@import '../../../../assets/scss/layout';
h1 {
- margin-top: 25px;
- margin-bottom: 0px;
.onlyOnDesktop {
margin: 0;
}
@@ -19,11 +17,19 @@ h1 {
}
.header-container {
- height: #{$header-post-height};
- @media #{$large-phone} {
- height: #{$header-post-height-mobile};
- }
background: $white;
+ .title {
+ margin: 32px 0;
+ width: 100%;
+ }
+ .subtitle {
+ @include cn-regular-24;
+ color: $grey-3;
+
+ @media #{$large-phone} {
+ @include cn-regular-18;
+ }
+ }
}
.section-container {
@@ -97,11 +103,14 @@ h1 {
.tag-button {
padding: 8px 10px;
@include cn-regular-16;
+ color: $grey-3;
cursor: pointer;
white-space: nowrap;
&.active {
- background-color: $secondary-color;
- color: $white;
+ @include cn-bold-16;
+ color: $grey-2;
+ text-decoration: underline $button-secondary;
+ text-underline-offset: 3px;
}
&:focus {
outline-color: $secondary-color;
@@ -115,7 +124,6 @@ h1 {
.row-mobile {
@media #{$tablet} {
- width: 100%;
justify-content: space-between;
}
}
@@ -124,3 +132,7 @@ h1 {
overflow-x: auto;
}
}
+
+.publish-button {
+ white-space: nowrap;
+}
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 1a7ca628d1c9a293626be12dc9d36b7271e21a72..5d1d62907212bb7b01514f4814a6889433c0057d 100644
--- a/src/app/post/components/post-header/post-header.component.ts
+++ b/src/app/post/components/post-header/post-header.component.ts
@@ -1,11 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Tag } from '../../models/tag.model';
import { TagWithMeta } from '../../models/tagWithMeta.model';
import { TypeModalNews } from '../../enum/typeModalNews.enum';
import { ActivatedRoute, Router } from '@angular/router';
import { TagEnum } from '../../enum/tag.enum';
import { parseSlugToTag } from '../utils/NewsUtils';
-
@Component({
selector: 'app-post-header',
templateUrl: './post-header.component.html',
@@ -19,13 +18,13 @@ export class PostHeaderComponent implements OnInit {
public checkedPublicTags: Tag[] = [];
public checkedLocationTags: Tag[] = [];
-
constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit(): void {
this.route.data.subscribe((data) => {
if (data.tags) {
this.tags = data.tags;
+ // this.tags = data.tags.filter((tag) => tag.slug === TagEnum.aLaUne);
this.tags.others.forEach((tag) => {
if (tag.slug == TagEnum.aLaUne) {
tag.name = 'Les + récentes';
@@ -111,11 +110,22 @@ export class PostHeaderComponent implements OnInit {
this.router.navigate(['/news'], {
relativeTo: this.route,
queryParams: {
- mainTag: this.mainActiveTag.slug == this.tagEnum.etudes ? this.mainActiveTag.name : this.mainActiveTag.slug,
+ mainTag: this.getMainTag(),
publicTags: this.checkedPublicTags.map((tag) => tag.slug),
locationTags: this.checkedLocationTags.map((tag) => tag.slug),
},
queryParamsHandling: 'merge',
});
}
+
+ public getMainTag(): string {
+ if (this.mainActiveTag.slug === TagEnum.aLaUne) {
+ return '';
+ }
+ return this.mainActiveTag.slug == this.tagEnum.etudes ? this.mainActiveTag.name : this.mainActiveTag.slug;
+ }
+
+ public togglePublishNews(): void {
+ this.router.navigate(['publish'], { relativeTo: this.route });
+ }
}
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 c5577e7c1021c71bfd98f967ed6b60652b9e25fd..01056ea4fe41fb4ec3421d2dbcc05e297ae26ec5 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -1,9 +1,9 @@
-<div *ngIf="!isPublishMode" class="section-container" fxLayout="row" fxLayoutGap="32px">
+<div class="section-container no-padding" fxLayout="row" fxLayoutGap="32px">
<div *ngIf="isLoading" class="loader">
<img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
</div>
<div *ngIf="!isLoading" fxLayout="column" class="list-container" fxLayoutGap="16px">
- <div fxLayout="column" *ngIf="displayTags()">
+ <!-- <div fxLayout="column" *ngIf="displayTags()">
<div fxLayout="row wrap" fxLayoutAlign="none center" fxLayoutGap="8px">
<div
fxLayout="row"
@@ -17,86 +17,16 @@
<app-svg-icon [type]="'ico'" [iconColor]="'currentColor'" [icon]="'cancel'"></app-svg-icon>
</div>
</div>
- </div>
- <div fxLayout="column" *ngIf="isALaUneTag() && !displayTags()">
- <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
- <h2>dernières actualités</h2>
- <app-button
- [type]="'button'"
- [style]="'buttonWithHash'"
- [text]="'Publier votre actu'"
- (action)="togglePublishNews()"
- ></app-button>
- </div>
- <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">
- <div class="project-content mobile" fxLayout="column">
- <h2>appels à projets</h2>
- <div *ngIf="projectsNew.length !== 0">
- <app-post-card
- [post]="news"
- [class]="'project'"
- [ngClass]="{ 'last-child': last }"
- *ngFor="let news of projectsNew; let last = last"
- ></app-post-card>
- </div>
- <div *ngIf="projectsNew.length === 0">
- <p>Aucun appels à projet pour le moment.</p>
- </div>
- </div>
- </div>
- </div>
+ </div> -->
<div fxLayout="column">
- <div
- *ngIf="!isALaUneTag() || displayTags()"
- fxLayout="row"
- class="row-border"
- fxLayoutAlign="space-between center"
- >
- <h2>{{ getDisplayedTag() }}</h2>
- <app-button
- [type]="'button'"
- [style]="'buttonWithHash'"
- [text]="'Publier votre actu'"
- (action)="togglePublishNews()"
- ></app-button>
- </div>
- <div *ngIf="leftColumnPosts.length <= 0" fxLayout="column">
+ <div *ngIf="allPosts.length <= 0 && !isLoading" fxLayout="column">
<p>Aucun résultat ne correspond à votre recherche.</p>
</div>
<div fxLayout="row" fxLayoutGap="33px">
- <div fxLayout="column" class="columnPosts">
- <app-post-card [post]="news" *ngFor="let news of leftColumnPosts"></app-post-card>
- </div>
- <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 *ngIf="!isLoading" 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]="'appels'"></app-svg-icon>
- <h2>appels à projets</h2>
- <div *ngIf="projectsNew.length !== 0">
- <app-post-card
- [post]="news"
- [class]="'project'"
- [ngClass]="{ 'last-child': last }"
- *ngFor="let news of projectsNew; let last = last"
- ></app-post-card>
- </div>
- <div *ngIf="projectsNew.length === 0">
- <p>Aucun appels à projet pour le moment.</p>
+ <div class="posts-container">
+ <app-post-card [post]="news" class="col" *ngFor="let news of allPosts"></app-post-card>
</div>
</div>
</div>
</div>
</div>
-<app-post-publish *ngIf="isPublishMode" (closePublish)="togglePublishNews()"></app-post-publish>
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 43d3381e4e5a290b96e83a43c57ae0335d204566..d802fe468b36af82caa7499d485c6b3c0a7855f8 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -30,7 +30,7 @@ h2 {
@media #{$tablet} {
width: 100%;
}
- width: 862px;
+
h2 {
@media #{$large-phone} {
@include cn-bold-22;
@@ -45,10 +45,138 @@ h2 {
}
width: 50%;
}
- .columnPostsMobile {
- display: none !important;
- @media #{$large-phone} {
- display: flex !important;
+
+ @mixin big-container {
+ grid-column: 1 / span 12;
+ ::ng-deep .post {
+ flex-direction: row !important;
+ .title {
+ @include cn-regular-32;
+ }
+ }
+ ::ng-deep .post .imageContainer {
+ margin-right: 36px !important;
+ margin-bottom: unset !important;
+ .image {
+ height: 40vw;
+ max-height: 320px;
+ @media #{$news-max} {
+ height: unset;
+ max-height: unset;
+ }
+ }
+ }
+ }
+
+ @mixin small-container {
+ margin-right: unset; // remove margin from other cotnainers
+ grid-column: 1 / span 12;
+ ::ng-deep .post {
+ flex-direction: column !important;
+ .title {
+ @include cn-regular-32;
+ }
+ }
+ ::ng-deep .post .imageContainer {
+ margin-right: unset !important;
+ margin-bottom: 36px !important;
+ }
+ @media #{$news-max} {
+ ::ng-deep .post .imageContainer .image {
+ height: unset;
+ max-height: unset;
+ }
+ }
+ }
+
+ @mixin twin-container($start) {
+ margin-right: 40px;
+ grid-column: $start / span 6;
+ ::ng-deep .post .imageContainer .image {
+ height: 40vw;
+ max-height: 250px;
+ }
+ @media #{$news-max} {
+ margin-right: unset;
+ }
+ }
+
+ @mixin triple-container-first {
+ margin-right: 40px;
+ grid-column: 1 / span 4;
+ ::ng-deep .post .imageContainer .image {
+ height: 40vw;
+ max-height: 180px;
+ }
+ @media #{$news-max} {
+ margin-right: unset;
+ }
+ }
+ @mixin triple-container {
+ margin-right: 40px;
+ grid-column: span 4;
+ ::ng-deep .post .imageContainer .image {
+ height: 40vw;
+ max-height: 180px;
+ }
+ @media #{$news-max} {
+ margin-right: unset;
+ }
+ }
+
+ .posts-container {
+ display: grid;
+ padding: 4vmin 0;
+ grid-template-columns: repeat(auto-fill, minmax(7%, 1fr));
+ grid-column-gap: 1%;
+ grid-row-gap: 40px;
+ .col:nth-child(6n + 1) {
+ @include big-container;
+ @media #{$news-max} {
+ @include small-container;
+ }
+ @media #{$large-phone} {
+ @include small-container;
+ }
+ }
+ .col:nth-child(6n + 2) {
+ @include triple-container-first;
+ @media #{$news-max} {
+ @include twin-container(1);
+ }
+ @media #{$large-phone} {
+ @include small-container;
+ }
+ }
+ .col:nth-child(6n + 3) {
+ @include triple-container;
+ @media #{$news-max} {
+ @include twin-container(7);
+ }
+ @media #{$large-phone} {
+ @include small-container;
+ }
+ }
+ .col:nth-child(6n + 4) {
+ @include triple-container;
+ @media #{$news-max} {
+ @include small-container;
+ }
+ @media #{$large-phone} {
+ @include small-container;
+ }
+ }
+ .col:nth-child(6n + 5) {
+ @include twin-container(1);
+ @media #{$large-phone} {
+ @include small-container;
+ }
+ }
+ .col:nth-child(6n + 6) {
+ @include twin-container(7);
+ @media #{$large-phone} {
+ @include small-container;
+ }
}
}
}
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 14f617978e24fc07755fc88058d4e9c4958c1097..f1b0ffb9061461cb44ba5c4518ee0159be866eaf 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -20,10 +20,9 @@ export class PostListComponent implements OnInit {
public selectedLocationTagSlug = [];
public selectedPublicTagsSlug = [];
public filters: Tag[];
- public postsMobileView: Post[] = [];
+ public allPosts: Post[] = [];
public leftColumnPosts: Post[] = [];
public rightColumnPosts: Post[] = [];
- public projectsNew: Post[] = [];
public bigNews: Post;
public pagination: Pagination;
public isLoading = false;
@@ -47,10 +46,6 @@ export class PostListComponent implements OnInit {
ngOnInit(): void {
this.isLoading = true;
// Init APP news list
- this.postService.getPosts(1, [TagEnum.appels]).subscribe((news) => {
- let projectNews = news.posts.map((newsData) => this.addAuthorToPost(newsData));
- this.projectsNew = projectNews;
- });
this.postService.getPosts(1, [TagEnum.aLaUne]).subscribe((news) => {
if (news.posts[0]) {
this.bigNews = this.addAuthorToPost(news.posts[0]);
@@ -75,14 +70,12 @@ export class PostListComponent implements OnInit {
// Init default news list
this.postService.getPosts(1).subscribe((news) => {
this.setNews(news);
+ this.allPosts.unshift(this.bigNews);
});
}
});
}
- public togglePublishNews(): void {
- this.isPublishMode = !this.isPublishMode;
- }
public getPosts(filters?: Tag[]): void {
// Parse filter
let parsedFilters = null;
@@ -91,11 +84,6 @@ export class PostListComponent implements OnInit {
return filter.slug;
});
- // remove 'a la une' filter
- parsedFilters = parsedFilters.filter((item) => {
- return item !== TagEnum.aLaUne;
- });
-
if (parsedFilters.length <= 0) {
parsedFilters = null;
}
@@ -104,6 +92,7 @@ export class PostListComponent implements OnInit {
// Reset posts
this.resetPosts();
+ this.isLoading = true;
this.postService.getPosts(1, parsedFilters).subscribe((news) => {
this.setNews(news);
});
@@ -126,7 +115,7 @@ export class PostListComponent implements OnInit {
public resetPosts(): void {
this.leftColumnPosts = [];
this.rightColumnPosts = [];
- this.postsMobileView = [];
+ this.allPosts = [];
}
public publishNews(): void {}
@@ -150,22 +139,12 @@ export class PostListComponent implements OnInit {
// Split news on two columns on desktop mode or one column in mobile mode.
private setNews(news: PostWithMeta): void {
- if (this.bigNews) {
- news.posts = news.posts.filter((elem) => {
- return elem.id != this.bigNews.id;
- });
- }
this.pagination = news.meta.pagination;
- const customIndex = this.postsMobileView.length; // For scroll loading, start with previous index.
- news.posts.forEach((val, index) => {
+ const customIndex = this.allPosts.length; // For scroll loading, start with previous index.
+ this.allPosts = news.posts.map((val, index) => {
val = this.addAuthorToPost(val);
index += customIndex;
- if (index % 2 == 0) {
- this.leftColumnPosts.push(val);
- } else {
- this.rightColumnPosts.push(val);
- }
- this.postsMobileView.push(val);
+ return val;
});
this.isLoading = false;
}
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 36d4d13b0b2d21afaba645b7f200ee2daa49e8b0..e18d6cfc7fa614a1a2205e2328255530975cc7d9 100644
--- a/src/app/post/components/post-publish/post-publish.component.html
+++ b/src/app/post/components/post-publish/post-publish.component.html
@@ -4,10 +4,10 @@
<svg class="chevronLeft" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
</svg>
- <span>Retour à la liste d'actualités</span>
+ <span>Retour</span>
</div>
</div>
- <div fxLayout="column" class="content" fxLayoutGap="16px">
+ <div fxLayout="column" class="content" fxLayoutGap="16px" fxLayoutAlign="center center">
<h2>Publier votre actualité</h2>
<div class="image">
<svg aria-hidden="true">
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 1868e8d4a32642747876d0497836cb35a85987e2..79d50ca95648ba700fc446796bfd4fb3666900aa 100644
--- a/src/app/post/components/post-publish/post-publish.component.scss
+++ b/src/app/post/components/post-publish/post-publish.component.scss
@@ -17,14 +17,7 @@ $margin-post: 20px;
stroke: $black;
margin-right: 10px;
}
-.backLink {
- cursor: pointer;
- color: $grey-2;
- @include cn-bold-16;
- &:hover {
- opacity: 0.4;
- }
-}
+
.content {
color: $grey-1;
h2 {
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 061bc66988fdb53f99e288c6f559dc7ecd04bfe6..ce704b0e93fd0c10ea1fd4b0eebe2e1016bc62df 100644
--- a/src/app/post/components/post-publish/post-publish.component.ts
+++ b/src/app/post/components/post-publish/post-publish.component.ts
@@ -1,18 +1,19 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-post-publish',
templateUrl: './post-publish.component.html',
styleUrls: ['./post-publish.component.scss'],
})
-export class PostPublishComponent implements OnInit {
+export class PostPublishComponent {
@Output() closePublish = new EventEmitter<boolean>();
- constructor() {}
+ constructor(private route: ActivatedRoute, private router: Router) {}
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 {
this.closePublish.emit(true);
+ this.router.navigate(['items'], { relativeTo: this.route });
}
}
diff --git a/src/app/post/news.component.html b/src/app/post/news.component.html
index 34a02820651599afa85d024b6bdffe8dcc3591c4..06566da7fdb831b20c78fe7265b780c2bb2df46b 100644
--- a/src/app/post/news.component.html
+++ b/src/app/post/news.component.html
@@ -1,4 +1,4 @@
<app-post-header (filterTags)="setFilters($event)"></app-post-header>
-<div class="section-container">
+<div class="section-container no-padding news">
<router-outlet></router-outlet>
</div>
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
index c95c0ba7cbea2c96e03ae08ecea77819b367b348..75eae7cad093f042fc4a7919d8e6159299c81d79 100644
--- a/src/app/post/post-routing.module.ts
+++ b/src/app/post/post-routing.module.ts
@@ -2,6 +2,7 @@ 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 { PostPublishComponent } from './components/post-publish/post-publish.component';
import { NewsComponent } from './news.component';
import { TagResolver } from './resolvers/tags.resolver';
@@ -21,6 +22,10 @@ const routes: Routes = [
path: 'details/:id',
component: PostDetailsComponent,
},
+ {
+ path: 'publish',
+ component: PostPublishComponent,
+ },
],
},
];
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index 70423382e57f4f42a0fb51173fcd98b0624732a2..89020397d8274a59afb75c72d212dd211ba20f0d 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Post } from '../models/post.model';
-import { TagEnum } from '../enum/tag.enum';
import { PostWithMeta } from '../models/postWithMeta.model';
import { TagWithMeta } from '../models/tagWithMeta.model';
@@ -26,7 +25,7 @@ export class PostService {
public getPosts(page: number, tags?: string[]): Observable<PostWithMeta> {
if (!tags) {
return this.http
- .get<PostWithMeta>(`${this.baseUrl}?page=${page}&include=tags,authors&filter=tag:-[${TagEnum.appels}]`)
+ .get<PostWithMeta>(`${this.baseUrl}?page=${page}&include=tags,authors`)
.pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
}
let tagsString = '';
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 51458d05e5c669593064271c8b2756a6850c87d3..bed7e3e0d741f9d08735c2df410fbda5c61eff4c 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -3,6 +3,10 @@
display: inline-block;
height: 2em;
width: 1.5em;
+ &.icon-full {
+ width: unset;
+ height: unset;
+ }
&.icon-28 {
width: 28px;
height: 28px;
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index c86bb8603c610a3b47d673534f2eff2a86e9cdf4..98c018889389daac68c6086f43f03d021cb55d3b 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -247,6 +247,15 @@
<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>
+<symbol id="news-header" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63 70H26.5392C28.6476 68.3259 30 65.7505 30 62.8571V15H70V63C70 66.866 66.866 70 63 70Z" stroke="#828282" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 50C36 49.4477 36.4477 49 37 49H63C63.5523 49 64 49.4477 64 50C64 50.5523 63.5523 51 63 51H37C36.4477 51 36 50.5523 36 50ZM36 56C36 55.4477 36.4477 55 37 55H63C63.5523 55 64 55.4477 64 56C64 56.5523 63.5523 57 63 57H37C36.4477 57 36 56.5523 36 56ZM37 61C36.4477 61 36 61.4477 36 62C36 62.5523 36.4477 63 37 63H52C52.5523 63 53 62.5523 53 62C53 61.4477 52.5523 61 52 61H37Z" fill="#828282"/>
+<path d="M30 70C26.5 70 26.5 70 22.5 70C18.3055 69.702 15 66.3806 15 62.327V53H29.5" stroke="#828282" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4211 65.663C15.6618 66.4235 16.0012 67.1312 16.4283 67.7667L29 55.195V53L28.0841 53L15.4211 65.663ZM20.4667 70.7284C19.6942 70.5073 18.9861 70.1679 18.3539 69.7302L29 59.0841V62.195L20.4667 70.7284ZM24.9046 70.1795C26.2069 69.4951 27.2523 68.4308 27.9608 67.1232L24.9046 70.1795ZM24.195 53L21.0841 53L15 59.0841V62.195L24.195 53ZM15 53L17.195 53L15 55.195V53Z" fill="#828282"/>
+<rect x="34" y="22" width="32" height="20" rx="2" fill="#BDBDBD"/>
+</symbol>
+
+
<symbol id="calendar" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H5V13H8V10Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44772 4 2 4.44772 2 5V19C2 19.5523 2.44772 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55229 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
diff --git a/src/assets/post/aap.png b/src/assets/post/aap.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ab7602ddaf21ff14857f119b921e6f15704bb6a
Binary files /dev/null and b/src/assets/post/aap.png differ
diff --git a/src/assets/post/placeholder.png b/src/assets/post/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb86cc23f8b92246c7d2bb91a479b8b093a0226e
Binary files /dev/null and b/src/assets/post/placeholder.png differ
diff --git a/src/assets/post/sprite.svg b/src/assets/post/sprite.svg
index 945e0fda5c0373d3e0c804b87b4fd42a59110c68..bbaa197c5e06c4e4681c81a89534688604b8eba7 100644
--- a/src/assets/post/sprite.svg
+++ b/src/assets/post/sprite.svg
@@ -1,5 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg">
+
+<symbol id="aap" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 322 180"><path fill="#fff" d="M0 0h322v180H0z"/><path d="m0 0 83.5.5L108 84l7-12.5L147.5 180H0V0Z" fill="#348899"/><path d="M29.5 107.8c2.9-.8 6.4-2.5 10.3-4.6A154.8 154.8 0 0 0 77 74.5v.1l.1.1V75l.1.1V75.5l.1.1V75.9l.1.1V76.2l.1.1v.4h.1v.4l.1.1v.2l.1.2V78l.1.1V78.3l.1.1v.2l.1.2v.4h.1v.4h.1V80l.1.1V80.3l.1.1v.4l.1.1V81.2l.1.1V81.6l.1.1V82l.1.2v.2l.1.2v.2h.1v.4l.1.1V83.6l.1.1v.4h.1v.4h.1v.4l.1.1v.2l.1.2v.2l.1.2V86.1l.1.1v.2l.1.2V87l.1.1V87.3l.1.2v.2l.1.1v.4h.1v.4l.1.1V89h.1v.4l.1.1v.2l.1.2V90.2l.1.2v.2l.1.1v.4h.1V91.5l.1.1v.4l.1.1v.2l.1.2V92.8l.1.1v.2l.1.2v.2l.1.2V94l.1.1v.2l.1.2v.4h.1V95.2l.1.2v.2l.1.1V96l.1.2v.2l.1.2V96.9l.1.2v.2l.1.1V97.6h.1v.5h.1V98.5l.1.1v.2l.1.2V99.2l.1.2v.2l.1.2v.2l.1.1v.4l.1.1v.2l.1.2v.2l.1.2V101.8l.1.2v.2l.1.1V102.5h.1v.5h.1V103.4l.1.2v.2l.1.1V104.1l.1.2V104.6h.1V105l.1.1v.4l.1.1v.2l.1.2v.4h.1V106.7l.1.1v.2l.1.2v.4h.1V107.9l.1.2V108.4l.1.1v.2l.1.2v.2l.1.2V109.6l.1.1V110h.1v.4l.1.2v.2l.1.1v.4h.1V111.6l.1.1v.4l.1.1v.2l.1.2V112.9l.1.1v.2l.1.2V113.7l.1.1V114l.1.2v.2l.1.1v.4h.1V115.3l.1.1V115.6l.1.2v.2l.1.2v.2l.1.1V116.8l.1.2V117.4l.1.1V117.7l.1.1V118.1l.1.2v.2h.1v.4l.1.1V119.3l.1.1V119.7l.1.1v.4h.1v.4h.1v.4h.1v.4h.1v.4l.1.2v.2l.1.1V122.6l.1.1V123l.1.1V123.4l.1.2v.2l.1.2V124.3l.1.1V124.7h.1v.4l.1.1V125.5a179.1 179.1 0 0 0-56.6-4l-3.3-13.7Z" stroke="#fff" stroke-width="2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M77.6 72.4C66.3 85.4 40 104.2 28.3 107l3.8 15.6c2.4-.6 7.4-1 11.3-1.1L41 136a5.4 5.4 0 1 0 10.9-.8l-.5-14-.6-1.5-.2-.4 14-34.3 3.9-1-15.3 37.5c13.1.6 28.2 2.6 37.6 5.3l-6.6-27-9.1 22.2-4 1 10.6-26 2.4 2.7-4-16.5-15.6 36.5-3.9 1 17.3-41 2 2.3-2.4-9.7ZM51.4 97.2l-4 1-5.3 14.7 1.4 5.8 7.9-21.5Z" fill="#fff"/><path d="m157.3 77.1-1.5-3.8-7 1.7-1.3 4.5-3.6 1 7-22.7 1.2-.3 8.8 18.8-3.6.8ZM152 63.8l-2.2 8.3 5-1.3-2.8-7Zm13.7 3.8.5 7.4-3.6.9-1-20.3 4.1-1.4c5.2-1.2 8.2 0 9.1 4 .6 2.1.2 4-1 5.7a9.7 9.7 0 0 1-5.7 3.3l-2.4.4Zm-.6-9.8.4 6.7c.5 0 1.1 0 1.8-.3 1.5-.3 2.6-1 3.4-1.8.7-.9 1-1.9.6-3.1-.5-2-1.9-2.8-4.2-2.2-.6.1-1.3.4-2 .7Zm16.5 5.9.4 7.5-3.5.8-1-20.3a45 45 0 0 1 4.1-1.3c5.1-1.3 8.2 0 9.1 3.9.6 2.2.2 4-1 5.7a9.7 9.7 0 0 1-5.7 3.3c-.8.2-1.6.4-2.4.4Zm-.6-9.8.4 6.7c.5 0 1.1 0 1.8-.2 1.5-.4 2.6-1 3.4-1.9.7-.8.9-1.9.6-3-.5-2.1-1.9-2.9-4.2-2.3-.6.1-1.3.4-2 .7Zm24.8-6-9 2.2.3 4.7 6.5-1.6.1 3-6.4 1.6.4 6.3 8.8-2.1.2 3.2-12.4 3-1.2-20.4 12.6-3 .1 3.1Zm17 13.3-12.2 3-1.2-20.3 3.5-.9 1 17.2 8.7-2.2.2 3.2Zm-58 46-1.6-3.7-7 1.7-1.3 4.5-3.6.8 7-22.6 1.3-.3 8.8 18.8-3.6.9ZM159.2 94l-2.2 8.2 5.1-1.2-2.9-7Zm-2-7.2-3.2-4 3.8-.8 1.5 4.3-2.2.5Zm24 8.9.4 7.4-3.5 1-1.1-20.4a45 45 0 0 1 4.2-1.3c5.1-1.3 8.2 0 9 3.9.6 2.2.3 4-1 5.7a9.7 9.7 0 0 1-5.6 3.3l-2.4.4Zm-.6-9.8.4 6.7c.5 0 1 0 1.8-.2 1.5-.4 2.6-1 3.3-1.9.7-.8 1-1.9.7-3.1-.5-2-2-2.8-4.3-2.2-.6.1-1.2.4-2 .7Zm21.8 3 6.5 7.6-4 1-5.6-7.2-2.2.4.4 8.6-3.5.8-1.2-20.3a132 132 0 0 1 5-1.4 9 9 0 0 1 5.3 0 4 4 0 0 1 2.7 3c.4 1.6.3 3-.4 4.4a6.3 6.3 0 0 1-3 3.1Zm-5.9-6.8.4 5.6 1.4-.2c3.3-.8 4.7-2.3 4.2-4.4-.2-1-.7-1.5-1.4-1.7-.7-.2-1.8-.1-3.3.2l-1.3.5Zm13.3 6.5c-.8-3.5-.6-6.7.7-9.6 1.3-2.9 3.5-4.7 6.5-5.5 2.3-.5 4.3-.3 5.8.6 1.6 1 2.6 2.5 3.2 4.9 1 3.8.7 7.2-.6 10a10 10 0 0 1-7 5.5c-2.1.5-4 .3-5.5-.8a8.4 8.4 0 0 1-3-5.1Zm3.5-1.2c.4 1.5 1 2.6 1.8 3.3a3 3 0 0 0 3 .7 5.8 5.8 0 0 0 4.2-4c.8-2.2.8-4.7.2-7.3-.7-3-2.4-4.1-5-3.5-1.9.5-3.2 1.8-3.9 4a12 12 0 0 0-.3 6.8Zm15-.4 3-.7c.3 1.1.9 1.6 1.8 1.4.8-.2 1.4-.5 1.8-.9.4-.3.7-.8.8-1.3.2-.6.2-1.7 0-3.3l-.7-12.7 3.5-.8.7 12.7c.2 3.2-.2 5.4-1.1 6.7a7.6 7.6 0 0 1-4.6 2.7c-1.3.3-2.4.2-3.3-.3-1-.5-1.5-1.3-1.8-2.5l-.1-1ZM255 67.8l-9 2.2.4 4.7 6.4-1.6.2 3-6.5 1.6.4 6.3 8.8-2.1.2 3.1-12.4 3-1.1-20.3 12.5-3 .1 3.1Zm18.6-4.5-6.2 1.5 1 17.2-3.4.8-1-17.1-6.2 1.5-.2-3.2 15.8-3.8.2 3.1Zm12.8-2.3a5.4 5.4 0 0 0-3.4-.3c-2.1.5-3 1.6-2.6 3.2.2.7 1 1.3 2.3 2l2.4 1.2 1.6.9 1 .8 1 1.2.5 1.3a5 5 0 0 1-1 4.6 8.6 8.6 0 0 1-4.9 2.8c-1.7.4-3.4.5-5.2 0l.3-3.6c1.4.6 3 .7 4.5.3 1-.2 1.7-.6 2.2-1.1a2 2 0 0 0 .5-2c-.2-.7-1-1.4-2.3-2l-2.5-1.2-1.6-.8a5.7 5.7 0 0 1-1.5-7.9 7 7 0 0 1 4.3-2.7 17.4 17.4 0 0 1 4.7-.4l-.3 3.7Z" fill="#348899"/></symbol>
+
<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"/>
diff --git a/src/assets/scss/_breakpoint.scss b/src/assets/scss/_breakpoint.scss
index d58c83c3fb8a88245ea232ed63dabf134a8a6916..2c0f772ee77d438d7e838d15be2a298cbd87b379 100644
--- a/src/assets/scss/_breakpoint.scss
+++ b/src/assets/scss/_breakpoint.scss
@@ -4,10 +4,12 @@ $width-large-phone: 600px;
$width-tablet: 980px;
$width-desktop: 1280px;
$width-large-desktop: 1201px;
+$width-news-max: 830px;
$small-phone: 'only screen and (max-width : #{$width-small-phone})';
$phone: 'only screen and (max-width : #{$width-phone})';
$large-phone: 'only screen and (max-width : #{$width-large-phone})';
+$news-max: 'only screen and (max-width : #{$width-news-max})';
$tablet: 'only screen and (max-width : #{$width-tablet})';
$desktop: 'only screen and (max-width : #{$width-desktop})';
$large-desktop: 'only screen and (min-width : #{$width-large-desktop})';
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 658823519f422e22bfd7c68b609b95b705302417..76fc1257d2f0856d2bd3ca592d4f233eaa0df5ee 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -9,10 +9,11 @@ $font-size-small: 1em; // 16px
$font-size-smedium: 1.125em; // 18px
$font-size-medium: 1.25em; // 20px
$font-size-xmedium: 1.375em; // 22px
-
+$font-size-xxmedium: 1.5em; // 24px
$font-size-large: 1.625em; // 26px
$font-size-xlarge: 1.75em; // 28px
-$font-size-xxlarge: 1.875em; // 28px
+$font-size-xxlarge: 1.875em; // 30px
+$font-size-xcxlarge: 2em; // 32px
html,
body,
@@ -45,6 +46,12 @@ h6,
font-size: $font-size-small;
}
+@mixin cn-regular-32 {
+ font-family: $title-font;
+ font-style: normal;
+ font-weight: bold;
+ font-size: $font-size-xcxlarge;
+}
@mixin cn-bold-30 {
font-family: $title-font;
font-style: normal;
@@ -72,6 +79,12 @@ h6,
font-size: $font-size-large;
}
+@mixin cn-regular-24 {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: $font-size-xxmedium;
+}
@mixin cn-regular-22 {
font-family: $text-font;
font-style: normal;
diff --git a/src/styles.scss b/src/styles.scss
index ed277ef13c5f961ff8ba4316e9e4713f5d450520..06d1870e5c5197698d05c45bb91f8142cb5f0a4a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -88,6 +88,12 @@ a {
margin-bottom: 1rem;
width: unset;
}
+ &.news {
+ max-width: 1080px;
+ }
+ &.no-padding {
+ padding: 0;
+ }
}
/** Buttons **/
@@ -278,6 +284,16 @@ button {
margin: 0 !important;
}
+.backLink {
+ cursor: pointer;
+ color: $grey-2;
+ margin-bottom: 40px;
+ @include cn-bold-16;
+ &:hover {
+ opacity: 0.4;
+ }
+}
+
.userList {
max-width: 50%;
}
@@ -301,3 +317,9 @@ button {
color: $white;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
}
+
+.hide-on-mobile {
+ @media #{$tablet} {
+ display: none !important;
+ }
+}