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

fix(form) : add footer + informations page

parent 97db8df0
No related branches found
No related tags found
3 merge requests!68Recette,!67Dev,!66Fix/form design create structure
Hide whitespace changes
Inline Side-by-side
src/app/form/form.component.html
+ 20
− 5
View file @ 3ee9322b
...@@ -275,19 +275,34 @@ ...@@ -275,19 +275,34 @@
<h3>Création de compte</h3> <h3>Création de compte</h3>
</div> </div>
<div class="content"> <div class="content">
<div *ngIf="currentPage == 0" class="home page" fxLayout="column" fxLayoutAlign="space-between center"> <div *ngIf="currentPage == 0" class="home page" fxLayout="column" fxLayoutAlign="space-between">
<h2>Ajouter votre structure</h2> <h2>Ajouter votre structure</h2>
<img src="../../assets/form/schedule.svg" alt="logo schedule" /> <img src="../../assets/form/schedule.svg" alt="logo schedule" />
<div> <div>
<p class="titleDesc">Cela va prendre une quinzaine de minutes</p> <p class="titleDesc">Cela va prendre une quinzaine de minutes</p>
<p>Une fois réalisé cela vous permettra d'être référencé sur la platefome</p> <p>Une fois réalisé cela vous permettra d'être référencé sur la platefome</p>
</div> </div>
<button class="btn start" (click)="nextPage()">C'est Parti</button> <div class="btnStart">
<button class="btn start" (click)="nextPage()">C'est Parti</button>
</div>
</div>
<div *ngIf="currentPage == 1" class="informations page" fxLayout="column" fxLayoutGap="28px">
<h3>De quelles informations faut-il vous munir ?</h3>
<img src="../../assets/form/factures.svg" alt="logo factures" />
<div>
<ul>
<li><span>les coordonnées de votre structure</span></li>
<li><span>les horaires d’ouverture</span></li>
<li><span>la liste des ateliers que vous dispensez (optionnel)</span></li>
</ul>
</div>
</div> </div>
<div *ngIf="currentPage == 1" class="informations page"></div> <div *ngIf="currentPage == 2" class="page"></div>
</div> </div>
<div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="space-around center"> <div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="space-around center">
<button class="btn start" (click)="previousPage()">Précédent</button> <button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
<button class="btn start" (click)="nextPage()">Suivant</button> <button class="btn next" (click)="nextPage()">Suivant<span class="chevron right"></span></button>
</div> </div>
</div> </div>
src/app/form/form.component.scss
+ 74
− 1
View file @ 3ee9322b
...@@ -17,6 +17,12 @@ ...@@ -17,6 +17,12 @@
} }
.footer { .footer {
border-top: 1px solid $grey-4;
padding: 17px;
.btn {
border-radius: 22px;
width: 149px;
}
@media #{$tablet} { @media #{$tablet} {
display: flex !important; display: flex !important;
} }
...@@ -45,6 +51,9 @@ ...@@ -45,6 +51,9 @@
@include cn-bold-28; @include cn-bold-28;
color: $secondary-color; color: $secondary-color;
} }
h3 {
@include cn-bold-24;
}
.page { .page {
display: block; display: block;
height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-height-phone}); height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-height-phone});
...@@ -56,8 +65,30 @@ ...@@ -56,8 +65,30 @@
&.home { &.home {
height: calc(100vh - #{$header-height} - #{$footer-height}); height: calc(100vh - #{$header-height} - #{$footer-height});
@media #{$tablet} { @media #{$tablet} {
// -1px because of border-bottom of Header
height: calc(100vh - #{$header-height-phone} - 1px); height: calc(100vh - #{$header-height-phone} - 1px);
} }
.btnStart {
text-align: center;
}
}
&.informations {
ul {
list-style: none;
padding: 0;
span {
padding-top: 2px; // Align text with bullet list
position: absolute;
}
li::before {
content: '\2022';
color: $secondary-color;
font-weight: bold;
display: inline-block;
width: 1em;
font-size: 26px;
}
}
} }
} }
.titleDesc { .titleDesc {
...@@ -66,6 +97,10 @@ ...@@ -66,6 +97,10 @@
p { p {
@include cn-regular-18; @include cn-regular-18;
} }
li {
@include cn-regular-18;
line-height: 36px;
}
} }
.btn { .btn {
...@@ -77,9 +112,47 @@ ...@@ -77,9 +112,47 @@
color: $white; color: $white;
height: 40px; height: 40px;
width: 192px; width: 192px;
@include btn-bold;
&.start { &.start {
@include btn-bold;
margin-bottom: 26px; margin-bottom: 26px;
} }
&.previous {
background-color: initial;
color: $grey-2;
}
}
.chevron {
position: absolute;
&:before,
&:after {
position: absolute;
display: block;
content: '';
border: 7px solid transparent;
}
&.left {
margin: 2px -19px;
&:before {
right: 0;
border-right-color: inherit;
}
&:after {
right: -2px;
border-right-color: $white;
}
}
&.right {
margin: 2px 19px;
&:before {
left: 0;
border-left-color: inherit;
}
&:after {
left: -2px;
border-left-color: $secondary-color;
}
}
} }
src/assets/form/factures.svg 0 → 100644
+ 86
− 0
View file @ 3ee9322b
<svg width="170" height="142" viewBox="0 0 170 142" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<g opacity="0.35" filter="url(#filter0_f)">
<path d="M96.7349 10.5946L25.9592 23.3835L22.9014 54.5339L93.6772 41.7449L96.7349 10.5946Z" fill="#DC2A59"/>
<path d="M36.6071 82.3114L32.8077 117.377L103.583 104.589L107.383 69.5224L93.6772 41.7449L22.9014 54.5339L36.6071 82.3114Z" fill="#DC2A59"/>
</g>
<path opacity="0.55" d="M97.7301 10.6923L97.8594 9.37522L96.5571 9.61055L25.7814 22.3995L25.0378 22.5338L24.964 23.2858L21.9801 53.6842L21.4173 53.7858L21.8783 54.7203L21.7769 55.7532L22.338 55.6519L35.5816 82.4929L31.8135 117.27L31.6695 118.599L32.9855 118.362L103.761 105.573L104.497 105.44L104.578 104.696L108.377 69.6301L108.408 69.3409L108.28 69.0799L94.7003 41.5585L97.7301 10.6923Z" fill="#348899" stroke="#DC2A59" stroke-width="2"/>
<path d="M36.6072 82.3113L107.383 69.5224L103.584 104.588L32.8078 117.377L36.6072 82.3113Z" fill="#FDECF0"/>
<path d="M36.6072 82.3114L107.383 69.5225L93.6771 41.745L22.9014 54.5339L36.6072 82.3114Z" fill="#F3D0D9"/>
<path d="M25.9592 23.3835L96.7349 10.5946L93.6772 41.7449L22.9015 54.5338L25.9592 23.3835Z" fill="#FDECF0"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="40" y="72" width="59" height="37">
<path d="M42.7433 82.9215L98.8361 72.7857L97.8518 88.4515L75.4952 92.4912L74.3715 102.647L40.2676 108.81L42.7433 82.9215Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask0)">
<rect x="38.2935" y="86.4759" width="66.6075" height="2.70654" transform="rotate(-10.2426 38.2935 86.4759)" fill="#DC2A59"/>
<path d="M37.0513 95.0104L99.7692 83.6775L99.7514 86.4311L37.5325 97.6738L37.0513 95.0104Z" fill="#DC2A59"/>
<rect x="36.916" y="103.571" width="66.6075" height="2.70651" transform="rotate(-10.2426 36.916 103.571)" fill="#DC2A59"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="28" y="17" width="61" height="37">
<path d="M30.7004 27.6837L88.9863 17.1516L86.5106 43.0399L28.2247 53.5719L30.7004 27.6837Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask1)">
<path d="M27.3296 41.0132L51.2855 36.6845L50.5941 39.5598L27.8109 43.6766L27.3296 41.0132Z" fill="#DC2A59"/>
<rect x="25.9912" y="48.8185" width="66.6075" height="2.70654" transform="rotate(-10.2426 25.9912 48.8185)" fill="#DC2A59"/>
</g>
<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="29" y="45" width="71" height="35">
<path d="M88.263 45.1299L29.9771 55.6619L41.3563 79.0466L99.6421 68.5146L88.263 45.1299Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask2)">
<rect x="31.9019" y="66.3155" width="66.6075" height="2.70654" transform="rotate(-10.2426 31.9019 66.3155)" fill="#DC2A59"/>
<rect x="27.7964" y="58.8063" width="66.6075" height="2.70653" transform="rotate(-10.2426 27.7964 58.8063)" fill="#DC2A59"/>
<rect x="35.3418" y="73.945" width="66.6075" height="2.70653" transform="rotate(-10.2426 35.3418 73.945)" fill="#DC2A59"/>
</g>
</g>
<g clip-path="url(#clip1)">
<g opacity="0.35" filter="url(#filter1_f)">
<path d="M154.96 36.732L85.0298 19.9223L69.6811 47.2007L139.611 64.0104L154.96 36.732Z" fill="#348899"/>
<path d="M71.0339 78.1459L53.4288 108.709L123.359 125.519L140.964 94.9556L139.611 64.0104L69.6811 47.2007L71.0339 78.1459Z" fill="#348899"/>
</g>
<path opacity="0.55" d="M155.831 37.2224L156.48 36.069L155.193 35.7597L85.2635 18.95L84.5288 18.7734L84.1583 19.432L69.1801 46.0518L68.6241 45.9181L68.6696 46.9592L68.1606 47.8637L68.7149 47.997L70.0222 77.8989L52.5623 108.21L51.8947 109.369L53.1951 109.682L123.125 126.491L123.852 126.666L124.225 126.018L141.83 95.4547L141.976 95.2026L141.963 94.9119L140.622 64.252L155.831 37.2224Z" fill="#348899" stroke="#348899" stroke-width="2"/>
<path d="M71.0339 78.1458L140.964 94.9555L123.359 125.519L53.4287 108.709L71.0339 78.1458Z" fill="#EAF8FB"/>
<path d="M71.0335 78.1459L140.963 94.9556L139.61 64.0104L69.6805 47.2007L71.0335 78.1459Z" fill="#C9ECF3"/>
<path d="M85.0296 19.9223L154.96 36.732L139.611 64.0104L69.6809 47.2007L85.0296 19.9223Z" fill="#EAF8FB"/>
<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="63" y="81" width="69" height="31">
<path d="M76.4042 81.1765L131.827 94.4989L124.614 108.44L102.525 103.131L97.4046 111.973L63.7082 103.873L76.4042 81.1765Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask3)">
<rect x="70.8989" y="82.6369" width="66.6075" height="2.70654" transform="rotate(13.5163 70.8989 82.6369)" fill="#348899"/>
<path d="M66.3237 89.9475L128.292 104.843L127.166 107.357L65.6912 92.5791L66.3237 89.9475Z" fill="#348899"/>
<rect x="62.751" y="97.728" width="66.6075" height="2.70651" transform="rotate(13.5163 62.751 97.728)" fill="#348899"/>
</g>
<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="74" y="25" width="72" height="38">
<path d="M87.6366 25.7683L145.226 39.6116L132.53 62.3084L74.9407 48.4651L87.6366 25.7683Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask4)">
<path d="M79.1812 36.6101L102.851 42.2998L101.06 44.6529L78.5486 39.2417L79.1812 36.6101Z" fill="#348899"/>
<rect x="74.8115" y="43.2148" width="66.6075" height="2.70654" transform="rotate(13.5163 74.8115 43.2148)" fill="#348899"/>
</g>
<mask id="mask5" mask-type="alpha" maskUnits="userSpaceOnUse" x="75" y="51" width="60" height="40">
<path d="M133.292 64.9271L75.7023 51.0838L76.6956 77.0712L134.285 90.9144L133.292 64.9271Z" fill="#FF0101"/>
</mask>
<g mask="url(#mask5)">
<rect x="73.1719" y="61.6101" width="66.6075" height="2.70654" transform="rotate(13.5163 73.1719 61.6101)" fill="#117083"/>
<rect x="72.4395" y="53.0832" width="66.6075" height="2.70653" transform="rotate(13.5163 72.4395 53.0832)" fill="#117083"/>
<rect x="73.2466" y="69.9789" width="66.6075" height="2.70653" transform="rotate(13.5163 73.2466 69.9789)" fill="#117083"/>
</g>
</g>
<defs>
<filter id="filter0_f" x="10.9014" y="-1.4054" width="108.481" height="130.783" 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="41.4287" y="7.92233" width="125.531" height="129.597" 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>
<clipPath id="clip0">
<rect width="109.547" height="112.659" fill="white" transform="translate(0 19.4793) rotate(-10.2426)"/>
</clipPath>
<clipPath id="clip1">
<rect width="109.547" height="112.659" fill="white" transform="translate(62.8438 5.89041) rotate(13.5163)"/>
</clipPath>
</defs>
</svg>
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