diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7ca9f3b7903260c2bf15c9d54c1f9cc2902f5a41..1525a61ccde0d476f2b348163b42631b9558b814 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { ResetPasswordComponent } from './reset-password/reset-password.componen
import { AdminModule } from './admin/admin.module';
import { AdminGuard } from './guards/admin.guard';
import { DeactivateGuard } from './guards/deactivate.guard';
+import { FooterFormComponent } from './footer-form/footer-form.component';
@NgModule({
declarations: [
@@ -50,6 +51,7 @@ import { DeactivateGuard } from './guards/deactivate.guard';
ResetEmailComponent,
ResetPasswordComponent,
FormComponent,
+ FooterFormComponent,
],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule, ProfileModule, AdminModule],
providers: [
diff --git a/src/app/footer-form/footer-form.component.html b/src/app/footer-form/footer-form.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b4c50c392d10abbdfd41c3cbed5746039a0362ef
--- /dev/null
+++ b/src/app/footer-form/footer-form.component.html
@@ -0,0 +1,17 @@
+<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+ <button class="btn previous" (click)="goToPreviousPage()">
+ <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+ <svg class="chevronLeft" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
+ </svg>
+ Précédent
+ </div>
+ </button>
+ <button class="btn next" (click)="goToNextPage()" [disabled]="!isValid" [ngClass]="{ invalid: !isValid }">
+ <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+ Suivant<svg class="chevronRight" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
+ </svg>
+ </div>
+ </button>
+</div>
diff --git a/src/app/footer-form/footer-form.component.scss b/src/app/footer-form/footer-form.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dfecb83344d2312d4da1d75544930de155203094
--- /dev/null
+++ b/src/app/footer-form/footer-form.component.scss
@@ -0,0 +1,39 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/typography';
+
+.btn {
+ background: $secondary-color;
+ border-radius: 4px;
+ outline: none;
+ cursor: pointer;
+ border: 0;
+ color: $white;
+ height: 40px;
+ width: 149px;
+ @include btn-bold;
+ &.previous {
+ background-color: initial;
+ color: $grey-2;
+ }
+ &.next {
+ .rowBtn {
+ margin-left: 24px;
+ }
+ }
+ &.invalid {
+ opacity: 0.4;
+ }
+}
+
+.chevronLeft {
+ height: 24px;
+ width: 24px;
+ stroke: $black;
+ margin-right: 10px;
+}
+.chevronRight {
+ height: 24px;
+ width: 24px;
+ stroke: $white;
+ margin-left: 10px;
+}
diff --git a/src/app/footer-form/footer-form.component.spec.ts b/src/app/footer-form/footer-form.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..422db4dac87b955f78d5dd813fc2f52656ab9f80
--- /dev/null
+++ b/src/app/footer-form/footer-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterFormComponent } from './footer-form.component';
+
+describe('FooterFormComponent', () => {
+ let component: FooterFormComponent;
+ let fixture: ComponentFixture<FooterFormComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ FooterFormComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FooterFormComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/footer-form/footer-form.component.ts b/src/app/footer-form/footer-form.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a703d492afc5d94812965fbaab6ecc39b9e496a8
--- /dev/null
+++ b/src/app/footer-form/footer-form.component.ts
@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-footer-form',
+ templateUrl: './footer-form.component.html',
+ styleUrls: ['./footer-form.component.scss'],
+})
+export class FooterFormComponent implements OnInit {
+ @Input() isValid: boolean;
+ @Output() nextPage = new EventEmitter<any>();
+ @Output() previousPage = new EventEmitter<any>();
+ constructor() {}
+
+ ngOnInit(): void {
+ console.log(this.isValid);
+ }
+
+ public goToNextPage(): void {
+ this.nextPage.emit();
+ }
+ public goToPreviousPage(): void {
+ this.previousPage.emit();
+ }
+}
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 5b46183c290cc3b585ed1dea67d6a0683345b794..01b0163ba4d0d7e1468f0932a51307fcdabd1ac1 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -305,7 +305,7 @@
</div>
<app-radio-form
[selectedOption]="getStructureControl('pmrAccess').value"
- (selectedEvent)="onRadioBtnChange('pmrAccess',$event)"
+ (selectedEvent)="onRadioBtnChange('pmrAccess', $event)"
>
</app-radio-form>
</div>
@@ -669,7 +669,7 @@
</div>
<app-radio-form
[selectedOption]="getStructureControl('freeWorkShop').value"
- (selectedEvent)="onRadioBtnChange('freeWorkShop',$event)"
+ (selectedEvent)="onRadioBtnChange('freeWorkShop', $event)"
>
</app-radio-form>
</div>
@@ -679,7 +679,7 @@
</div>
<app-radio-form
[selectedOption]="getStructureControl('freeWifi').value"
- (selectedEvent)="onRadioBtnChange('freeWifi',$event)"
+ (selectedEvent)="onRadioBtnChange('freeWifi', $event)"
>
</app-radio-form>
</div>
@@ -977,14 +977,40 @@
</div>
</div>
</form>
- </div>
- <div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
- <div *ngIf="currentPage != nbPagesForm">
- <button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
- <button class="btn next" (click)="nextPage()" [disabled]="!isPageValid" [ngClass]="{ invalid: !isPageValid }">
- Suivant<span class="chevron right"></span>
+ <div *ngIf="currentPage != 0" class="footer desktop">
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm">
+ <app-footer-form
+ (previousPage)="previousPage()"
+ (nextPage)="nextPage()"
+ [isValid]="isPageValid"
+ ></app-footer-form>
+ </div>
+ <button
+ *ngIf="currentPage == nbPagesForm && !profile"
+ class="btn validate unique"
+ routerLink="/home"
+ [routerLinkActive]="'active'"
+ >
+ Ok
+ </button>
+ <button
+ *ngIf="currentPage == nbPagesForm && profile"
+ class="btn unique"
+ routerLink="/home"
+ [state]="{ data: createdStructure }"
+ >
+ Voir ma structure
</button>
</div>
+ </div>
+ <div *ngIf="currentPage != 0" class="footer phone">
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm">
+ <app-footer-form
+ (previousPage)="previousPage()"
+ (nextPage)="nextPage()"
+ [isValid]="isPageValid"
+ ></app-footer-form>
+ </div>
<button
*ngIf="currentPage == nbPagesForm && !profile"
class="btn validate unique"
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index cf266d0101369395fdb7595dd5c343e7c0801fb6..c51c6a9fc4c0f6e2c8f16549b68cb65beb13566a 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -23,10 +23,11 @@ h3 {
}
.footer {
- padding: 17px;
+ padding: 17px 0;
width: 100%;
max-width: 960px;
margin: 20px auto;
+ text-align: center;
.btn {
width: 149px;
&.validate {
@@ -36,9 +37,19 @@ h3 {
width: 240px;
}
}
- @media #{$tablet} {
- margin: 0 auto;
- border-top: 1px solid $grey-4;
+ &.desktop {
+ @media #{$tablet} {
+ display: none;
+ }
+ }
+
+ &.phone {
+ display: none;
+ @media #{$tablet} {
+ margin: 0 auto;
+ border-top: 1px solid $grey-4;
+ display: block;
+ }
}
}
.header {
@@ -84,7 +95,6 @@ h3 {
display: block;
overflow-y: auto;
height: auto;
-
h2 {
@include cn-bold-28;
color: $secondary-color;
@@ -186,51 +196,9 @@ h3 {
width: 192px;
@include btn-bold;
- &.invalid {
- opacity: 0.4;
- }
-
&.start {
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;
- }
- }
}
.progressBar {
height: #{$progressBar-height};
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 19114200052fc136dff3a4bbf5fdbdb89dfa903e..4b583444aee071e61035d2d63fdc558c69f37ed0 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -316,5 +316,12 @@
</defs>
</symbol>
+<symbol id="chevronRight" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6L16 12.5L8 19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="chevronLeft" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 6L8 12.5L16 19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
</svg>
\ No newline at end of file