Skip to content
Snippets Groups Projects
Commit cca4a383 authored by Jérémie BRISON's avatar Jérémie BRISON
Browse files

feat(post-publish) : add + design component

parent 69aca554
Branches
Tags
3 merge requests!103Recette,!102Dev,!90Feat/post publish
Hide whitespace changes
Inline Side-by-side
Showing
with 182 additions and 4 deletions
src/app/post/components/post-list/post-list.component.html
+ 3
− 2
View file @ cca4a383
<div class="section-container" fxLayout="row" fxLayoutGap="32px">
<div *ngIf="!isPublishMode" class="section-container" fxLayout="row" fxLayoutGap="32px">
<div fxLayout="column" class="list-container">
<div fxLayout="column">
<div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
......@@ -7,7 +7,7 @@
[type]="'button'"
[style]="'buttonWithHash'"
[text]="'Publier votre actu'"
(action)="publishNews()"
(action)="togglePublishNews()"
></app-button>
</div>
<app-post-card [class]="'bigNew'" [post]="bigNews"></app-post-card>
......@@ -62,3 +62,4 @@
</div>
</div>
</div>
<app-post-publish *ngIf="isPublishMode" (closePublish)="togglePublishNews()"></app-post-publish>
src/app/post/components/post-list/post-list.component.ts
+ 4
− 1
View file @ cca4a383
......@@ -28,6 +28,7 @@ export class PostListComponent implements OnInit {
public bigNews: Post;
public pagination: Pagination;
public isLoading = false;
public isPublishMode = false;
ngOnInit(): void {
this.isLoading = true;
......@@ -43,7 +44,9 @@ export class PostListComponent implements OnInit {
});
}
public publishNews(): void {}
public togglePublishNews(): void {
this.isPublishMode = !this.isPublishMode;
}
//Transform excerpt post to have a custom author.
private addAuthorToPost(post: Post): Post {
......
src/app/post/components/post-publish/post-publish.component.html 0 → 100644
+ 31
− 0
View file @ cca4a383
<div class="container" fxLayout="column" fxLayoutGap="16px">
<div fxLayout="row">
<div class="backLink" fxLayout="row" fxLayoutAlign=" center" (click)="backToPosts()">
<svg class="chevronLeft" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
</svg>
<span>Retour à la liste d'acutalités</span>
</div>
</div>
<div fxLayout="column" class="content" fxLayoutGap="16px">
<h2>Publier votre actualité</h2>
<div class="image">
<img src="../../assets/post/publishNews.svg" alt="logo publishNews" />
</div>
<div>
<p>Vous pouvez nous envoyer votre actualité en distinguant ces 4 éléments :</p>
<ul>
<li>- le titre</li>
<li>- le texte</li>
<li>- l’auteur</li>
<li>- l’image (facultatif)</li>
</ul>
<br />
<p>Si votre actualité existe déjà sur un autre site, envoyez-nous simplement son adresse URL</p>
<br />
</div>
<div>
<a class="btn-primary" href="mailto:inclusionnumerique@grandlyon.com">Envoyer votre actu par mail</a>
</div>
</div>
</div>
src/app/post/components/post-publish/post-publish.component.scss 0 → 100644
+ 58
− 0
View file @ cca4a383
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/layout';
$margin-post: 20px;
.container {
max-width: 832px;
width: 95%;
margin: $margin-post auto;
min-height: calc(
var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post}* 2
);
}
.chevronLeft {
height: 24px;
width: 24px;
stroke: $black;
margin-right: 10px;
}
.backLink {
cursor: pointer;
color: $grey-2;
@include cn-bold-16;
&:hover {
opacity: 0.4;
}
}
.content {
@include cn-regular-18;
color: $grey-1;
h2 {
margin: 0;
color: $grey-1;
}
.image {
width: 100%;
text-align: center;
img {
max-width: 300px;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0;
}
a {
text-decoration: none;
width: auto;
padding: 10.5px 24px;
@include cn-regular-16;
font-size: 16px;
}
}
src/app/post/components/post-publish/post-publish.component.spec.ts 0 → 100644
+ 25
− 0
View file @ cca4a383
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostPublishComponent } from './post-publish.component';
describe('PostPublishComponent', () => {
let component: PostPublishComponent;
let fixture: ComponentFixture<PostPublishComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PostPublishComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(PostPublishComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/post/components/post-publish/post-publish.component.ts 0 → 100644
+ 17
− 0
View file @ cca4a383
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-post-publish',
templateUrl: './post-publish.component.html',
styleUrls: ['./post-publish.component.scss'],
})
export class PostPublishComponent implements OnInit {
@Output() closePublish = new EventEmitter<boolean>();
constructor() {}
ngOnInit(): void {}
public backToPosts(): void {
this.closePublish.emit(true);
}
}
src/app/post/post.module.ts
+ 2
− 1
View file @ cca4a383
......@@ -7,9 +7,10 @@ import { PostListComponent } from './components/post-list/post-list.component';
import { PostDetailsComponent } from './components/post-details/post-details.component';
import { SharedModule } from '../shared/shared.module';
import { PostCardComponent } from './components/post-card/post-card.component';
import { PostPublishComponent } from './components/post-publish/post-publish.component';
@NgModule({
declarations: [NewsComponent, PostHeaderComponent, PostListComponent, PostDetailsComponent, PostCardComponent],
declarations: [NewsComponent, PostHeaderComponent, PostListComponent, PostDetailsComponent, PostCardComponent, PostPublishComponent],
imports: [CommonModule, PostRoutingModule, SharedModule],
})
export class PostModule {}
src/assets/post/publishNews.svg 0 → 100644
+ 41
− 0
View file @ cca4a383
<svg width="310" height="273" viewBox="0 0 310 273" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.35" filter="url(#filter0_f)">
<path d="M12 76.7061L181.621 30.7062L283.777 208.44L114.155 254.44L12 76.7061Z" fill="#348899"/>
</g>
<path d="M114.638 253.273L13.5131 77.3318L181.138 31.8732L282.263 207.814L114.638 253.273Z" fill="#EAF8FB" stroke="#79ACB6" stroke-width="2"/>
<path d="M56.0084 117.902C54.7257 115.671 55.8543 112.826 58.3181 112.08L188.148 72.8014C189.929 72.2624 191.847 73.0232 192.774 74.6367L215.093 113.467C216.376 115.699 215.247 118.544 212.783 119.289L82.9533 158.568C81.172 159.107 79.2544 158.346 78.327 156.733L56.0084 117.902Z" fill="#ABE6F2"/>
<path d="M72.5 81.3037L150.685 57.8712L154.671 64.8072L76.4866 88.2397L72.5 81.3037Z" fill="#117083"/>
<path d="M86.5 167.953L139.359 152.241L142.5 157.706L89.6408 173.418L86.5 167.953Z" fill="#117083"/>
<path d="M91.5 176.445L144.359 160.733L147.5 166.198L94.6408 181.91L91.5 176.445Z" fill="#117083"/>
<path d="M96.5 185.445L149.359 169.733L152.5 175.198L99.6408 190.91L96.5 185.445Z" fill="#117083"/>
<path d="M102.5 193.444L155.359 177.732L158.5 183.197L105.641 198.909L102.5 193.444Z" fill="#117083"/>
<path d="M107.5 202.444L160.359 186.732L163.5 192.197L110.641 207.909L107.5 202.444Z" fill="#117083"/>
<path d="M112.5 211.444L165.359 195.732L168.5 201.197L115.641 216.909L112.5 211.444Z" fill="#117083"/>
<path d="M116.5 221.444L169.359 205.732L172.5 211.197L119.641 226.909L116.5 221.444Z" fill="#117083"/>
<path d="M145.5 150.444L198.359 134.732L201.5 140.197L148.641 155.909L145.5 150.444Z" fill="#117083"/>
<path d="M151.5 158.444L204.359 142.732L207.5 148.197L154.641 163.909L151.5 158.444Z" fill="#117083"/>
<path d="M156.5 167.444L178.359 161.241L181.5 166.706L159.641 172.909L156.5 167.444Z" fill="#117083"/>
<path d="M100 84.6553L139.091 72.7225L143.078 79.6584L103.987 91.5912L100 84.6553Z" fill="#117083"/>
<g opacity="0.35" filter="url(#filter1_f)">
<path d="M252.112 73.7334C249.503 71.652 246.024 71.6753 244.34 73.7856L235.054 85.4249L235.088 85.4519L190.698 141.075L205.252 152.855L190.571 141.242L189.299 142.837C188.606 143.704 188.299 144.837 188.429 146.05L186.205 161.648L185.788 163.604C185.445 165.216 187.089 166.528 188.585 165.835L189.273 165.516C189.436 165.526 189.6 165.521 189.763 165.502L205.18 159.287C206.391 159.144 207.427 158.594 208.12 157.726L209.393 156.131L209.391 156.129L253.778 100.509L253.779 100.51L263.064 88.8704C264.748 86.7602 263.999 83.3622 261.391 81.2807L252.112 73.7334Z" fill="#DC2A59"/>
</g>
<path d="M252.739 72.9577L252.739 72.9576L252.732 72.9518C249.854 70.6558 245.7 70.4733 243.554 73.1618L243.554 73.1619L234.269 84.8012L233.648 85.5792L233.682 85.6061L189.913 140.452L189.293 141.228L189.297 141.231L188.513 142.213C187.666 143.275 187.298 144.626 187.418 146.026L185.216 161.473L184.806 163.395C184.291 165.813 186.758 167.781 189.001 166.743L189.48 166.521C189.612 166.519 189.744 166.511 189.876 166.495L190.009 166.48L190.133 166.43L205.432 160.262C206.819 160.067 208.052 159.409 208.898 158.35L210.17 156.755L210.798 155.969L210.796 155.967L253.929 101.918L253.93 101.918L254.557 101.133L263.842 89.4942C265.986 86.807 264.889 82.7988 262.014 80.5023C262.013 80.5013 262.012 80.5002 262.01 80.4991L252.739 72.9577Z" fill="#E04971" stroke="#E0718E" stroke-width="2"/>
<path d="M244.336 73.7856C246.02 71.6754 249.499 71.652 252.108 73.7335L261.386 81.2808C263.995 83.3622 264.744 86.7602 263.06 88.8705L253.775 100.51L235.05 85.4249L244.336 73.7856Z" fill="#E04971"/>
<path d="M254.161 100.03L235.505 84.9298L190.698 141.076L209.354 156.176L254.161 100.03Z" fill="#E0718E"/>
<path d="M209.393 156.131L190.571 141.242L189.298 142.837C188.606 143.705 188.299 144.838 188.429 146.05L186.075 162.56C186.257 164.27 188.054 165.704 189.762 165.503L205.18 159.288C206.391 159.145 207.427 158.594 208.12 157.727L209.393 156.131Z" fill="#FDECF0"/>
<path d="M185.399 164.08C185.176 165.596 186.672 166.789 188.101 166.236L194.734 163.665C194.734 163.665 194.763 161.501 191.65 159.018C188.537 156.534 186.434 157.041 186.434 157.041L185.399 164.08Z" fill="#E04971"/>
<rect x="190.742" y="140.706" width="24.0099" height="2" transform="rotate(38.3738 190.742 140.706)" fill="white"/>
<rect x="236.152" y="84.0303" width="24.0422" height="2" transform="rotate(38.3738 236.152 84.0303)" fill="white"/>
<defs>
<filter id="filter0_f" x="0" y="18.7061" width="295.777" height="247.734" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
</filter>
<filter id="filter1_f" x="173.742" y="60.1875" width="102.221" height="117.837" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
</filter>
</defs>
</svg>
src/assets/scss/_layout.scss
+ 1
− 0
View file @ cca4a383
......@@ -3,3 +3,4 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$progressBar-height: 50px;
$header-post-height: 180px;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment