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

Merge branch 'ui/news' into 'dev' 

feat(ui): news

See merge request !650
parents b2f4aa96 6d9c0da3
No related branches found
No related tags found
2 merge requests!783V3.0.0,!650feat(ui): news
Hide whitespace changes
Inline Side-by-side
Showing
with 364 additions and 569 deletions
src/app/post/components/post-card/post-card.component.html
+ 13
− 21
View file @ 33766f58
<div <div
*ngIf="post" *ngIf="post"
fxLayout="column"
class="post" class="post"
fxLayoutGap="12px"
tabindex="0" tabindex="0"
role="listitem" role="listitem"
[ngClass]="class"
(click)="showDetails(post)" (click)="showDetails(post)"
(keyup.enter)="showDetails(post)" (keyup.enter)="showDetails(post)"
> >
<div *ngIf="post.feature_image" fxLayout="column" class="imageContainer"> <div class="imageContainer">
<img class="image" alt="image about the news" [src]="post.feature_image" /> <img *ngIf="post.feature_image" alt="Image du post" [src]="post.feature_image" />
</div>
<div *ngIf="!post.feature_image" fxLayout="column" class="imageContainer">
<img
*ngIf="isAppelAProjet()"
class="image"
alt="image about appels a projets"
src="../../../../assets/post/aap.png"
/>
<img <img
*ngIf="!isAppelAProjet()" *ngIf="!post.feature_image"
class="image" alt=""
alt="image about appels a projets" [src]="isAppelAProjet() ? '../../../../assets/post/aap.png' : '../../../../assets/post/placeholder.png'"
src="../../../../assets/post/placeholder.png"
/> />
</div> </div>
<div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center"> <div class="informations">
<app-post-tag [post]="post" /> <div class="inline">
<app-v3-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" />
</div>
<h2 fxLayout="row" class="title"> <h2 fxLayout="row" class="title">
{{ post.title }} {{ post.title }}
</h2> </h2>
<div fxLayout="column" class="informations"> <div class="details">
<div>{{ post.author }}</div> <div>Publié par : {{ post.author }}</div>
<div> <div>
Publié le :
{{ post.created_at | date : 'd MMM y' }} {{ post.created_at | date : 'd MMM y' }}
</div> </div>
<!-- TODO description -->
</div> </div>
</div> </div>
</div> </div>
src/app/post/components/post-card/post-card.component.scss
+ 36
− 31
View file @ 33766f58
...@@ -4,11 +4,26 @@ ...@@ -4,11 +4,26 @@
.post { .post {
cursor: pointer; cursor: pointer;
padding: 16px 0px; padding: 16px;
border: 1px solid transparent;
transition: all 0.2s ease-in-out;
border-radius: 16px;
display: flex;
flex-direction: column;
column-gap: 32px;
row-gap: 12px;
&:hover {
border-color: $grey-1;
box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.12);
}
.imageContainer { .imageContainer {
margin-bottom: 12px !important; display: flex;
flex-direction: column;
max-width: 600px; max-width: 600px;
.image { img {
border-radius: 8px;
object-fit: cover; object-fit: cover;
@media #{$large-phone} { @media #{$large-phone} {
height: 70px; height: 70px;
...@@ -16,36 +31,26 @@ ...@@ -16,36 +31,26 @@
} }
} }
.title { .informations {
@media #{$large-phone} { display: flex;
@include font-bold-18; flex-direction: column;
gap: 8px;
.inline {
display: flex;
gap: 8px;
} }
@include font-bold-22;
color: $grey-1; .title {
} @include font-bold-20;
.description { @media #{$large-phone} {
@media #{$large-phone} { @include font-bold-18;
display: none !important; }
} }
@include font-regular-16;
color: $black; .details {
overflow: hidden; @include font-regular-14;
text-overflow: ellipsis; color: $grey-4-text;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.informations {
@include font-regular-16;
div:nth-child(2n) {
color: $grey-3;
} }
} }
} }
.project {
text-align: left;
.imageContainer,
.informations {
display: none !important;
}
}
src/app/post/components/post-card/post-card.component.ts
+ 1
− 1
View file @ 33766f58
...@@ -10,7 +10,7 @@ import { Post } from '../../models/post.model'; ...@@ -10,7 +10,7 @@ import { Post } from '../../models/post.model';
}) })
export class PostCardComponent { export class PostCardComponent {
@Input() post: Post; @Input() post: Post;
@Input() class: string;
public tagEnum = TagEnum; public tagEnum = TagEnum;
constructor(private router: Router) {} constructor(private router: Router) {}
......
src/app/post/components/post-details/post-details.component.html
+ 21
− 29
View file @ 33766f58
<div class="section-container no-padding news"> <div *ngIf="post" class="postContainer">
<div *ngIf="post" class="postContainer" fxLayout="column" fxLayoutGap="16px"> <app-v3-button
<div fxLayout="row"> [label]="'Retour'"
<div [variant]="buttonTypeEnumV3.Tertiary"
class="backLink" [iconFolder]="'ico'"
fxLayout="row" [iconName]="'arrowBackV3'"
fxLayoutAlign=" center" (action)="backToPosts()"
tabindex="0" />
(click)="backToPosts()"
(keyup.enter)="backToPosts()" <div class="gh-canvas">
> <div class="inline">
<svg class="chevronLeft" aria-hidden="true"> <app-v3-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" />
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'" />
</svg>
<span>Retour</span>
</div>
</div> </div>
<div class="gh-canvas"> <h1 class="title">{{ post.title }}</h1>
<div fxLayout="column" fxLayoutAlign="center none"> <div class="details">
<app-post-tag [post]="post" /> <div>Publié par : {{ post.author }}</div>
<h2 fxLayout="row" class="title">{{ post.title }}</h2> <div>
<div fxLayout="column" class="informations"> Publié le :
<div>{{ post.author }}</div> {{ post.created_at | date : 'd MMM y' }}
<div>
{{ post.created_at | date : 'dd MMM y' }}
</div>
</div>
</div>
<div class="description">
<div [innerHtml]="post.safeHtml"></div>
</div> </div>
</div> </div>
<div class="description">
<div [innerHtml]="post.safeHtml"></div>
</div>
</div> </div>
</div> </div>
src/app/post/components/post-details/post-details.component.scss
+ 37
− 5
View file @ 33766f58
...@@ -5,15 +5,47 @@ ...@@ -5,15 +5,47 @@
@import 'hyperlink'; @import 'hyperlink';
@import 'ghost'; @import 'ghost';
h1 {
@include font-bold-20;
}
.postContainer { .postContainer {
.chevronLeft { display: flex;
height: 24px; flex-direction: column;
width: 24px; gap: 32px;
stroke: $black; padding-block: 32px;
margin-right: 10px;
max-width: 1080px;
margin: auto;
width: 80%;
}
.gh-canvas {
display: flex;
flex-direction: column;
gap: 1rem;
}
.inline {
display: flex;
gap: 8px;
}
.title {
@include font-bold-20;
@media #{$large-phone} {
@include font-bold-18;
} }
} }
.details {
display: flex;
flex-direction: column;
gap: 4px;
@include font-regular-14;
color: $grey-4-text;
}
.informations { .informations {
@include font-regular-16; @include font-regular-16;
div:nth-child(2n) { div:nth-child(2n) {
......
src/app/post/components/post-details/post-details.component.ts
+ 2
− 0
View file @ 33766f58
...@@ -2,6 +2,7 @@ import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@an ...@@ -2,6 +2,7 @@ import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@an
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { RouterListenerService } from '../../../services/routerListener.service'; import { RouterListenerService } from '../../../services/routerListener.service';
import { ButtonTypeV3 } from '../../../shared/components/v3/button/button-type.enum';
import { Post } from '../../models/post.model'; import { Post } from '../../models/post.model';
import { PostService } from '../../services/post.service'; import { PostService } from '../../services/post.service';
...@@ -13,6 +14,7 @@ import { PostService } from '../../services/post.service'; ...@@ -13,6 +14,7 @@ import { PostService } from '../../services/post.service';
}) })
export class PostDetailsComponent implements OnInit { export class PostDetailsComponent implements OnInit {
public post: Post; public post: Post;
public buttonTypeEnumV3 = ButtonTypeV3;
constructor( constructor(
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
......
src/app/post/components/post-header/post-header.component.html
+ 27
− 34
View file @ 33766f58
<div class="header-container"> <div class="section-container news">
<div class="section-container news" fxLayout="column" fxLayoutAlign="space-between"> <header>
<div class="section-container title" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px"> <h1>Les actualités</h1>
<app-svg-icon class="icon" role="img" [type]="'ico'" [iconClass]="'icon-80'" [icon]="'news-header'" /> <h2>du réseau d’inclusion numérique</h2>
<div> </header>
<h1 class="no-margin">Fil d’actualité</h1>
<p class="subtitle no-margin onlyOnDesktop">du réseau d’inclusion numérique</p> <div class="navigation">
</div> <nav>
</div> <span
<div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="space-between flex-end" class="overflow"> *ngFor="let tag of tags.others"
<div fxLayout="row" class="row-mobile" role="list"> class="btnTag"
<span tabindex="0"
*ngFor="let tag of tags.others" role="listitem"
class="tag-button" [ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }"
fxLayout="row" (click)="activateTag(tag)"
fxLayoutAlign="center center" (keydown.enter)="activateTag(tag)"
tabindex="0" >
role="listitem" {{ tag.name }}
[ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }" </span>
(click)="activateTag(tag)" </nav>
(keydown.enter)="activateTag(tag)" <app-v3-button
>{{ tag.name }}</span class="publish-button hide-on-mobile"
> [variant]="buttonTypeEnumV3.PrimaryBlack"
</div> [label]="'Publier'"
<div fxLayout="row" class="row-mobile"> [iconName]="'addV3'"
<app-v3-button (action)="togglePublishNews()"
class="publish-button hide-on-mobile" />
[variant]="buttonTypeEnumV3.PrimaryBlack"
[label]="'Publier'"
[iconName]="'addV3'"
(action)="togglePublishNews()"
/>
</div>
</div>
</div> </div>
</div> </div>
src/app/post/components/post-header/post-header.component.scss
+ 35
− 122
View file @ 33766f58
...@@ -4,135 +4,48 @@ ...@@ -4,135 +4,48 @@
@import 'breakpoint'; @import 'breakpoint';
@import 'layout'; @import 'layout';
h1 { header {
.onlyOnDesktop { padding-block: 2rem;
margin: 0; h1 {
@include font-bold-30;
} }
@media #{$large-phone} { h2 {
@include font-bold-28; @include font-regular-20;
.onlyOnDesktop {
display: none;
}
}
}
.header-container {
background: $white;
.title {
margin: 32px 0;
width: 100%;
}
.subtitle {
@include font-regular-24;
color: $grey-3; color: $grey-3;
@media #{$large-phone} {
@include font-regular-18;
}
} }
} }
.section-container { .navigation {
height: 100%; display: flex;
} justify-content: space-between;
align-items: center;
.btnSection { border-bottom: 1px solid $grey-4;
padding: 16px 0 0px 0;
button {
background: $white;
height: 40px;
width: 210px;
border: 1px solid $grey-5;
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: $focus-color;
}
}
.selected {
background-color: $primary-color;
border-color: $primary-color !important;
color: $white;
.arrow {
background-color: transparent;
border-bottom: 1px solid $white;
border-right: 1px solid $white;
transform: translateY(25%) rotate(-135deg);
margin: 0 5px 0 10px;
height: 7px;
width: 7px;
}
}
.containCheckedFilters {
border-color: $primary-color;
}
.icon {
display: none !important;
}
@media #{$desktop} {
button {
width: 90px;
}
.text {
display: none !important;
}
.icon {
display: inherit !important;
}
}
@media #{$tablet} {
button {
display: none !important;
}
}
}
.tag-button {
padding: 8px 10px;
@include font-regular-16;
color: $grey-3;
cursor: pointer;
white-space: nowrap;
&.active {
@include font-bold-16;
color: $grey-2;
text-decoration: underline $button-secondary;
text-underline-offset: 3px;
}
&:focus {
outline-color: $primary-color;
}
}
// Remove margin right on filter pop-up trigger
.btn-filter-no-margin {
margin-right: 0 !important;
}
.row-mobile { nav {
@media #{$tablet} { display: flex;
justify-content: space-between;
}
}
.overflow {
@media #{$tablet} {
overflow-x: auto; overflow-x: auto;
.btnTag {
padding: 0 16px;
height: 60px;
@include font-regular-14;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: all 0.3s ease-in-out;
&.active {
@include font-bold-14;
border-color: $grey-1;
}
&:hover {
border-color: $grey-4;
}
&:focus {
outline-color: $primary-color;
}
}
} }
} }
.publish-button {
white-space: nowrap;
}
src/app/post/components/post-header/post-header.component.ts
+ 0
− 46
View file @ 33766f58
...@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { ButtonTypeV3 } from '../../../shared/components/v3/button/button-type.enum'; import { ButtonTypeV3 } from '../../../shared/components/v3/button/button-type.enum';
import { TagEnum } from '../../enum/tag.enum'; import { TagEnum } from '../../enum/tag.enum';
import { TypeModalNews } from '../../enum/typeModalNews.enum';
import { Tag } from '../../models/tag.model'; import { Tag } from '../../models/tag.model';
import { TagWithMeta } from '../../models/tagWithMeta.model'; import { TagWithMeta } from '../../models/tagWithMeta.model';
import { parseSlugToTag } from '../utils/NewsUtils'; import { parseSlugToTag } from '../utils/NewsUtils';
...@@ -12,7 +11,6 @@ import { parseSlugToTag } from '../utils/NewsUtils'; ...@@ -12,7 +11,6 @@ import { parseSlugToTag } from '../utils/NewsUtils';
styleUrls: ['./post-header.component.scss'], styleUrls: ['./post-header.component.scss'],
}) })
export class PostHeaderComponent implements OnInit { export class PostHeaderComponent implements OnInit {
public modalTypeOpened: TypeModalNews;
public tags: TagWithMeta; public tags: TagWithMeta;
public mainActiveTag: Tag = new Tag({ slug: TagEnum.aLaUne }); public mainActiveTag: Tag = new Tag({ slug: TagEnum.aLaUne });
public tagEnum = TagEnum; public tagEnum = TagEnum;
...@@ -69,55 +67,11 @@ export class PostHeaderComponent implements OnInit { ...@@ -69,55 +67,11 @@ export class PostHeaderComponent implements OnInit {
return nameTagA.localeCompare(nameTagB); return nameTagA.localeCompare(nameTagB);
} }
// Open the modal and display the list according to the right filter button
public openModal(modalType: TypeModalNews): void {
// if modal already opened, reset type
if (this.modalTypeOpened === modalType) {
this.closeModal();
} else if (this.modalTypeOpened !== modalType) {
this.modalTypeOpened = modalType;
}
}
public closeModal(): void {
this.modalTypeOpened = undefined;
}
// Accessor to template angular.
public get TypeModal(): typeof TypeModalNews {
return TypeModalNews;
}
public getModalData(): Tag[] {
if (this.modalTypeOpened === this.TypeModal.public) {
return this.tags.public;
}
return this.tags.commune;
}
public getCheckedModalData(): Tag[] {
if (this.modalTypeOpened === this.TypeModal.public) {
return this.checkedPublicTags;
}
return this.checkedLocationTags;
}
public activateTag(tag: Tag): void { public activateTag(tag: Tag): void {
this.mainActiveTag = tag; this.mainActiveTag = tag;
this.setQueryParam(); this.setQueryParam();
} }
public filter(data: Tag[]): void {
if (this.modalTypeOpened === this.TypeModal.public) {
this.checkedPublicTags = data;
} else {
this.checkedLocationTags = data;
}
this.setQueryParam();
this.closeModal();
}
private setQueryParam(): void { private setQueryParam(): void {
this.router.navigate(['/news'], { this.router.navigate(['/news'], {
relativeTo: this.route, relativeTo: this.route,
......
src/app/post/components/post-list/post-list.component.html
+ 20
− 24
View file @ 33766f58
<app-post-header /> <app-post-header />
<div class="section-container no-padding news"> <div class="section-container news">
<div fxLayout="column" class="list-container" fxLayoutGap="16px"> <div *ngIf="!isLoading && allPosts.length === 0">
<div fxLayout="column"> <p>Aucun résultat ne correspond à votre recherche.</p>
<div *ngIf="allPosts.length <= 0 && !isLoading" fxLayout="column"> </div>
<p>Aucun résultat ne correspond à votre recherche.</p>
</div> <div class="posts-container" role="list">
<div fxLayout="row" fxLayoutGap="33px"> <app-post-card *ngFor="let news of allPosts" class="col" [post]="news" />
<div class="posts-container" role="list"> </div>
<app-post-card *ngFor="let news of allPosts" class="col" [post]="news" />
</div> <div *ngIf="isLoading" class="loader" aria-busy="true">
</div> <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
<div *ngIf="isLoading" class="loader" aria-busy="true"> </div>
<img class="loader-gif" src="/assets/gif/loader_circle.gif" alt /> <div *ngIf="!isLastPage && !isLoading" class="loadMore">
</div> <app-v3-button
<div *ngIf="!isLastPage && !isLoading" fxLayout="row" fxLayoutAlign="center center"> class="loadMoreB"
<app-v3-button [variant]="buttonTypeEnumV3.PrimaryBlack"
class="loadMore" [label]="'Voir plus d\'actualités'"
[variant]="buttonTypeEnumV3.PrimaryBlack" [wide]="true"
[label]="'Voir plus d\'actualités'" (click)="loadMore()"
[wide]="true" />
(click)="loadMore()"
/>
</div>
</div>
</div> </div>
</div> </div>
src/app/post/components/post-list/post-list.component.scss
+ 103
− 134
View file @ 33766f58
...@@ -3,169 +3,138 @@ ...@@ -3,169 +3,138 @@
@import 'shapes'; @import 'shapes';
@import 'breakpoint'; @import 'breakpoint';
.last-child { .news {
::ng-deep .post { padding-top: 2rem;
border: 0;
}
} }
.list-container {
width: 100%;
.columnPosts { @mixin big-container {
@media #{$large-phone} { grid-column: 1 / span 12;
display: none !important; ::ng-deep .post {
flex-direction: row !important;
.title {
@include font-regular-32;
} }
width: 50%;
} }
::ng-deep .post .imageContainer {
@mixin big-container { .image {
grid-column: 1 / span 12; height: 40vw;
::ng-deep .post { max-height: 320px;
flex-direction: row !important; @media #{$news-max} {
.title { height: unset;
@include font-regular-32; max-height: unset;
}
}
::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 { @mixin small-container {
margin-right: unset; // remove margin from other cotnainers margin-right: unset; // remove margin from other cotnainers
grid-column: 1 / span 12; grid-column: 1 / span 12;
::ng-deep .post { ::ng-deep .post {
flex-direction: column !important; flex-direction: column !important;
.title { .title {
@include font-regular-32; @include font-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: 320px;
}
} }
} }
@mixin twin-container($start) { @media #{$news-max} {
margin-right: 40px;
grid-column: $start / span 6;
::ng-deep .post .imageContainer .image { ::ng-deep .post .imageContainer .image {
height: 40vw; height: unset;
max-height: 250px; max-height: 320px;
}
@media #{$news-max} {
margin-right: unset;
} }
} }
}
@mixin triple-container-first { @mixin twin-container($start) {
margin-right: 40px; grid-column: $start / span 6;
grid-column: 1 / span 4; ::ng-deep .post .imageContainer .image {
::ng-deep .post .imageContainer .image { height: 40vw;
height: 40vw; max-height: 250px;
max-height: 180px; }
} @media #{$news-max} {
margin-right: unset;
}
}
@mixin triple-container-first {
grid-column: 1 / span 4;
::ng-deep .post .imageContainer .image {
height: 40vw;
max-height: 180px;
}
@media #{$news-max} {
margin-right: unset;
}
}
@mixin triple-container {
grid-column: span 4;
::ng-deep .post .imageContainer .image {
height: 40vw;
max-height: 180px;
}
@media #{$news-max} {
margin-right: unset;
}
}
.posts-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5%, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
max-width: 1080px;
.col:nth-child(6n + 1) {
@include big-container;
@media #{$news-max} { @media #{$news-max} {
margin-right: unset; @include small-container;
} }
} @media #{$large-phone} {
@mixin triple-container { @include small-container;
margin-right: 40px;
grid-column: span 4;
::ng-deep .post .imageContainer .image {
height: 40vw;
max-height: 180px;
} }
}
.col:nth-child(6n + 2) {
@include triple-container-first;
@media #{$news-max} { @media #{$news-max} {
margin-right: unset; @include twin-container(1);
}
@media #{$large-phone} {
@include small-container;
} }
} }
.col:nth-child(6n + 3) {
.posts-container { @include triple-container;
display: grid; @media #{$news-max} {
padding: 4vmin 0; @include twin-container(7);
grid-template-columns: repeat(auto-fill, minmax(7%, 1fr));
grid-column-gap: 1%;
grid-row-gap: 40px;
max-width: 1080px;
.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) { @media #{$large-phone} {
@include triple-container-first; @include small-container;
@media #{$news-max} {
@include twin-container(1);
}
@media #{$large-phone} {
@include small-container;
}
} }
.col:nth-child(6n + 3) { }
@include triple-container; .col:nth-child(6n + 4) {
@media #{$news-max} { @include triple-container;
@include twin-container(7); @media #{$news-max} {
} @include small-container;
@media #{$large-phone} {
@include small-container;
}
} }
.col:nth-child(6n + 4) { @media #{$large-phone} {
@include triple-container; @include small-container;
@media #{$news-max} {
@include small-container;
}
@media #{$large-phone} {
@include small-container;
}
} }
.col:nth-child(6n + 5) { }
@include twin-container(1); .col:nth-child(6n + 5) {
@media #{$large-phone} { @include twin-container(1);
@include small-container; @media #{$large-phone} {
} @include small-container;
} }
.col:nth-child(6n + 6) { }
@include twin-container(7); .col:nth-child(6n + 6) {
@media #{$large-phone} { @include twin-container(7);
@include small-container; @media #{$large-phone} {
} @include small-container;
} }
} }
} }
.tag {
background: $grey-3;
color: $white;
border-radius: 20px;
cursor: pointer;
margin-bottom: 10px;
padding: 0 20px;
p {
margin-top: 0;
margin-bottom: 0;
}
}
.loadMore { .loadMore {
margin-bottom: 20px; margin: 16px auto 32px auto;
display: flex;
justify-content: center;
} }
src/app/post/components/post-list/post-list.component.ts
+ 1
− 1
View file @ 33766f58
...@@ -31,9 +31,9 @@ export class PostListComponent implements OnInit { ...@@ -31,9 +31,9 @@ export class PostListComponent implements OnInit {
constructor(private postService: PostService, private route: ActivatedRoute, private router: Router) {} constructor(private postService: PostService, private route: ActivatedRoute, private router: Router) {}
ngOnInit(): void { ngOnInit(): void {
this.isLoading = true;
// Init APP news list // Init APP news list
this.route.queryParams.subscribe((queryParams) => { this.route.queryParams.subscribe((queryParams) => {
this.isLoading = true;
this.isPublishMode = false; this.isPublishMode = false;
this.isInSection = false; this.isInSection = false;
// If main tag is in route, set it // If main tag is in route, set it
......
src/app/post/components/post-publish/post-publish.component.html
+ 30
− 41
View file @ 33766f58
<div class="section-container no-padding news"> <div class="section-container no-padding news">
<div class="container" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="16px"> <div class="container">
<div fxLayout="row"> <div class="goBack">
<div <app-v3-button
class="backLink" [label]="'Retour'"
fxLayout="row" [variant]="buttonTypeEnumV3.Tertiary"
fxLayoutAlign="center" [iconFolder]="'ico'"
tabindex="0" [iconName]="'arrowBackV3'"
(click)="backToPosts()" (action)="backToPosts()"
(keyup.enter)="backToPosts()" />
>
<svg class="chevronLeft" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'" />
</svg>
<span>Retour</span>
</div>
</div> </div>
<div fxLayout="column" class="content" fxLayoutGap="16px" fxLayoutAlign="center center">
<h2>Publier votre actualité</h2> <img src="../../../../assets/post/publishLogo.svg" alt="" />
<div class="image"> <h2>Publier votre actualité</h2>
<svg aria-hidden="true"> <div class="informations">
<use [attr.xlink:href]="'../../../../assets/post/sprite.svg#publishLogo'" /> <p>Vous pouvez nous envoyer votre actualité en distinguant ces 4 éléments :</p>
</svg> <ul>
</div> <li>le titre</li>
<div class="informations"> <li>le texte</li>
<p>Vous pouvez nous envoyer votre actualité en distinguant ces 4 éléments :</p> <li>l’auteur</li>
<ul> <li>l’image <span class="optional">(facultatif)</span></li>
<li>- le titre</li> </ul>
<li>- le texte</li> <p>Si votre actualité existe déjà sur un autre site, envoyez-nous simplement son adresse URL</p>
<li>- l’auteur</li> </div>
<li>- l’image (facultatif)</li> <div>
</ul> <app-v3-button
<br /> routerLink="'mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer&body=' + bodyMail"
<p>Si votre actualité existe déjà sur un autre site, envoyez-nous simplement son adresse URL</p> [label]="'Envoyer votre actu par mail'"
<br /> [variant]="buttonTypeEnumV3.Primary"
</div> [wide]="true"
<div> (action)="backToPosts()"
<a />
class="btn-primary"
[href]="'mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer&body=' + bodyMail"
>Envoyer votre actu par mail</a
>
</div>
</div> </div>
</div> </div>
</div> </div>
src/app/post/components/post-publish/post-publish.component.scss
+ 36
− 38
View file @ 33766f58
...@@ -2,53 +2,51 @@ ...@@ -2,53 +2,51 @@
@import 'typography'; @import 'typography';
@import 'layout'; @import 'layout';
$margin-post: 20px; .goBack {
display: flex;
width: 100%;
justify-content: flex-start;
}
.container { .container {
margin: $margin-post 0 100px 0; display: flex;
min-height: calc( flex-direction: column;
var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 2 align-items: center;
); gap: 1rem;
width: 100%; padding-block: 32px;
} }
.chevronLeft {
height: 24px; h2 {
width: 24px; @include font-bold-24;
stroke: $black;
margin-right: 10px;
} }
.content { .image {
color: $grey-1; width: 100%;
h2 { text-align: center;
@include font-bold-30; svg {
margin: 0; max-width: 200px;
height: 200px;
} }
.image { }
width: 100%; .informations {
text-align: center; @include font-regular-18;
svg { display: flex;
max-width: 300px; flex-direction: column;
height: 300px; gap: 8px;
ul {
margin: 0;
padding-left: 24px;
li::marker {
color: $red;
} }
} }
.informations {
@include font-regular-18; p:last-child {
ul { margin-top: 16px;
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0;
}
} }
a { span.optional {
text-decoration: none; color: $grey-3;
width: auto;
padding: 10.5px 24px;
@include font-regular-16;
font-size: 16px;
} }
} }
src/app/post/components/post-publish/post-publish.component.ts
+ 2
− 0
View file @ 33766f58
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ButtonTypeV3 } from '../../../shared/components/v3/button/button-type.enum';
@Component({ @Component({
selector: 'app-post-publish', selector: 'app-post-publish',
...@@ -8,6 +9,7 @@ import { Router } from '@angular/router'; ...@@ -8,6 +9,7 @@ import { Router } from '@angular/router';
}) })
export class PostPublishComponent { export class PostPublishComponent {
constructor(private router: Router) {} constructor(private router: Router) {}
public buttonTypeEnumV3 = ButtonTypeV3;
public bodyMail = 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"; "Bonjour,%0D Je souhaite ajouter cette publication sur Rés'in :%0D- Titre :%0D- Texte :%0D- Auteur :%0D- Image : à joindre en pièce jointe";
......
src/app/post/components/post-tag/post-tag.component.html deleted 100644 → 0
+ 0
− 8
View file @ b2f4aa96
<div>
<div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
<span class="uppercase">{{ displayTag(post) }}</span>
</div>
<div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
<span class="uppercase">infos</span>
</div>
</div>
src/app/post/components/post-tag/post-tag.component.scss deleted 100644 → 0
+ 0
− 9
View file @ b2f4aa96
@import 'typography';
@import 'color';
.tag {
@include font-bold-16;
color: $primary-color;
fill: $primary-color;
stroke: $primary-color;
}
src/app/post/components/post-tag/post-tag.component.ts deleted 100644 → 0
+ 0
− 19
View file @ b2f4aa96
import { Component, Input } from '@angular/core';
import { TagEnum } from '../../enum/tag.enum';
import { Post } from '../../models/post.model';
@Component({
selector: 'app-post-tag',
templateUrl: './post-tag.component.html',
styleUrls: ['./post-tag.component.scss'],
})
export class PostTagComponent {
@Input() post: Post;
public displayTag(post: Post): string {
if (post.tags.length > 1) {
return post.tags.filter((tag) => tag.slug !== TagEnum.aLaUne)[0].name;
}
return post.tags[0].name;
}
}
src/app/post/enum/typeModalNews.enum.ts deleted 100644 → 0
+ 0
− 4
View file @ b2f4aa96
export enum TypeModalNews {
public = 1,
location,
}
src/app/post/post.module.ts
+ 0
− 2
View file @ 33766f58
...@@ -6,7 +6,6 @@ import { PostDetailsComponent } from './components/post-details/post-details.com ...@@ -6,7 +6,6 @@ import { PostDetailsComponent } from './components/post-details/post-details.com
import { PostHeaderComponent } from './components/post-header/post-header.component'; import { PostHeaderComponent } from './components/post-header/post-header.component';
import { PostListComponent } from './components/post-list/post-list.component'; import { PostListComponent } from './components/post-list/post-list.component';
import { PostPublishComponent } from './components/post-publish/post-publish.component'; import { PostPublishComponent } from './components/post-publish/post-publish.component';
import { PostTagComponent } from './components/post-tag/post-tag.component';
import { NewsComponent } from './news.component'; import { NewsComponent } from './news.component';
import { PostRoutingModule } from './post-routing.module'; import { PostRoutingModule } from './post-routing.module';
import { TagResolver } from './resolvers/tags.resolver'; import { TagResolver } from './resolvers/tags.resolver';
...@@ -19,7 +18,6 @@ import { TagResolver } from './resolvers/tags.resolver'; ...@@ -19,7 +18,6 @@ import { TagResolver } from './resolvers/tags.resolver';
PostDetailsComponent, PostDetailsComponent,
PostCardComponent, PostCardComponent,
PostPublishComponent, PostPublishComponent,
PostTagComponent,
], ],
imports: [CommonModule, PostRoutingModule, SharedModule], imports: [CommonModule, PostRoutingModule, SharedModule],
providers: [TagResolver], providers: [TagResolver],
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment