From c2310d5a5628a841115729f65c3d7cb320e94311 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Fri, 26 Feb 2021 15:44:24 +0100
Subject: [PATCH] =?UTF-8?q?feat(post)=20:=20add=20design=20"appel=20=C3=A0?=
=?UTF-8?q?=20projet"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../post-list/post-list.component.html | 26 ++++++++++----
.../post-list/post-list.component.scss | 34 +++++++++++++++++++
.../post-list/post-list.component.ts | 9 +++--
src/app/post/post.component.html | 2 --
.../svg-icon/svg-icon.component.scss | 4 +++
src/assets/post/sprite.svg | 11 ++++++
src/assets/scss/_typography.scss | 8 +++++
7 files changed, 80 insertions(+), 14 deletions(-)
create mode 100644 src/assets/post/sprite.svg
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 0c1d36f47..c9e22c225 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -1,17 +1,29 @@
-<div class="section-container" fxLayout="row">
+<div class="section-container" fxLayout="row" fxLayoutGap="32px">
<div fxLayout="column" class="list-container">
<div fxLayout="column">
- <div fxLayout="row" fxLayoutAlign="space-between center">
- <h2>A la une</h2>
- <button>Publier votre actu</button>
+ <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
+ <h2>à la une</h2>
+ <app-button
+ [type]="'button'"
+ [style]="'buttonWithHash'"
+ [text]="'Publier votre actu'"
+ (action)="publishNews()"
+ ></app-button>
</div>
</div>
<div fxLayout="column">
- <div fxLayout="row">
- <h2>Autres actualités</h2>
+ <div fxLayout="row" class="row-border">
+ <h2>autres actualités</h2>
+ </div>
+ </div>
+ </div>
+ <div fxLayout="column" fxLayoutAlign=" center" class="project-container">
+ <div class="background-project-container">
+ <div class="project-content" fxLayout="column">
+ <app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'project'"></app-svg-icon>
+ <h2>appels à projets</h2>
</div>
</div>
</div>
- <div fxLayout="column" fxLayoutAlign=" center" class="project-container">Appels ap rojets</div>
</div>
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 6d3bff0c2..b3cf207d9 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -1,12 +1,46 @@
@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
.section-container {
background: $grey-6;
+ .row-border {
+ border-bottom: 1px dashed $grey-4;
+ margin: 16px 0;
+ }
+ h2 {
+ font-style: italic !important;
+ text-transform: uppercase;
+ }
}
.list-container {
width: 80%;
+ h2 {
+ @include cn-bold-28;
+ color: $grey-2;
+ }
}
.project-container {
width: 20%;
+ min-width: 306px;
+ @include background-hash($secondary-color);
+ border: 1px solid $secondary-color;
+ border-radius: 6px;
+ .background-project-container {
+ width: 100%;
+ height: 100%;
+ background: $white;
+ border-radius: 6px;
+ .project-content {
+ padding: 18px 32px 62px 36px;
+ fill: $secondary-color;
+ stroke: $secondary-color;
+ text-align: center;
+ h2 {
+ @include cn-bold-26;
+ color: $secondary-color;
+ }
+ }
+ }
}
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 b8742d722..52014ff68 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
- styleUrls: ['./post-list.component.scss']
+ styleUrls: ['./post-list.component.scss'],
})
export class PostListComponent implements OnInit {
+ constructor() {}
- constructor() { }
-
- ngOnInit(): void {
- }
+ ngOnInit(): void {}
+ public publishNews(): void {}
}
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
index eaa0bc1a6..2ea36328d 100644
--- a/src/app/post/post.component.html
+++ b/src/app/post/post.component.html
@@ -1,4 +1,2 @@
<app-post-header></app-post-header>
<app-post-list></app-post-list>
-<app-post-details></app-post-details>
-<p>posts works!</p>
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 e688256ea..0d40e293b 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -9,6 +9,10 @@
&.icon-75 {
width: 4.688em;
}
+ &.icon-80 {
+ height: 80px;
+ width: 80px;
+ }
&.validation {
height: 100%;
width: 26px;
diff --git a/src/assets/post/sprite.svg b/src/assets/post/sprite.svg
new file mode 100644
index 000000000..9c8181e25
--- /dev/null
+++ b/src/assets/post/sprite.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<symbol id="project" 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"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9531 28.002C64.9531 29.1368 65.919 30.0566 67.1105 30.0566L77.178 30.0566C78.3695 30.0566 79.3353 29.1368 79.3353 28.002C79.3353 26.8673 78.3695 25.9474 77.178 25.9474L67.1105 25.9474C65.919 25.9474 64.9531 26.8673 64.9531 28.002Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 16.1736C64.0749 17.2789 65.353 17.7927 66.4582 17.3214L75.7969 13.3389C76.9021 12.8675 77.416 11.5895 76.9447 10.4843C76.4734 9.37908 75.1953 8.86521 74.0901 9.33653L64.7514 13.3191C63.6462 13.7904 63.1323 15.0684 63.6036 16.1736Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 39.4919C64.0749 38.3867 65.353 37.8728 66.4582 38.3441L75.7969 42.3267C76.9021 42.798 77.416 44.076 76.9447 45.1812C76.4734 46.2864 75.1953 46.8003 74.0901 46.329L64.7514 42.3464C63.6462 41.8751 63.1323 40.5971 63.6036 39.4919Z" stroke="none"/>
+</symbol>
+
+</svg>
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index d5f92bac1..b340d5a63 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -11,6 +11,7 @@ $font-size-medium: 1.25em; // 20px
$font-size-xmedium: 1.375em; // 22px
$font-size-large: 1.625em; // 26px
+$font-size-xlarge: 1.75em; // 28px
html,
body,
@@ -43,6 +44,13 @@ h6,
font-size: $font-size-small;
}
+@mixin cn-bold-28 {
+ font-family: $title-font;
+ font-style: normal;
+ font-weight: bold;
+ font-size: $font-size-xlarge;
+}
+
@mixin cn-bold-26 {
font-family: $title-font;
font-style: normal;
--
GitLab