diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss index 67ce48453c000b5ebf30a163522befae33234de6..5edae1720a05b007693566ba2d2c69926268c6f6 100644 --- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss +++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss @@ -21,7 +21,7 @@ a { padding: 10px 24px; @media #{$tablet} { width: calc(100% - 2 * 24px); - position: fixed; + position: inherit; height: 100%; .printButton { display: none !important; diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html index 5c163c2a6447344925898634a4c22a01287260a2..ec209f99268528638f436fdf46cff94d17a9e182 100644 --- a/src/app/form/orientation-form/orientation-form.component.html +++ b/src/app/form/orientation-form/orientation-form.component.html @@ -281,13 +281,13 @@ </div> </div> <div fxLayout="row" class="content-container"> - <div class="nbStructure-panel"> + <div class="nbStructure-panel left-pane" [ngClass]="{ mapPhone: isMapPhone == true }"> <div class="nbStructuresLabel" [ngPlural]="structuresList.length"> <ng-template ngPluralCase="0">0 structure trouvée</ng-template> <ng-template ngPluralCase="1">1 structure trouvée</ng-template> <ng-template ngPluralCase="other">{{ structuresList.length }} structures trouvées</ng-template> </div> - <div id="listCard" class="left-pane" (mouseleave)="mouseLeave()"> + <div id="listCard" (mouseleave)="mouseLeave()"> <app-card *ngFor="let structure of structuresList" [structure]="structure" @@ -302,22 +302,27 @@ </p> </div> </div> - <div class="right-pane"> - <div class="deep-map"> - <app-map - [structures]="structuresList" - [structuresToPrint]="structuresToPrint" - [toogleToolTipId]="displayMapMarkerId" - [selectedMarkerId]="selectedMarkerId" - [locate]="locate" - (locatationTrigger)="locatationTrigger($event)" - (selectedStructure)="showDetailStructure($event)" - [isMapPhone]="isMapPhone" - [searchedValue]="searchedValue" - [ngClass]="{ mapPhone: isMapPhone == true }" - ></app-map> - </div> + <div class="btnSwitch"> + <app-button + [style]="'roundedButton'" + [text]="isMapPhone ? 'Liste' : 'Carte'" + [iconBtn]="isMapPhone ? 'liste' : 'map-marker'" + (action)="switchMapList()" + ></app-button> </div> + <app-map + [structures]="structuresList" + [structuresToPrint]="structuresToPrint" + [toogleToolTipId]="displayMapMarkerId" + [selectedMarkerId]="selectedMarkerId" + [locate]="locate" + (locatationTrigger)="locatationTrigger($event)" + (selectedStructure)="showDetailStructure($event)" + [isMapPhone]="isMapPhone" + [searchedValue]="searchedValue" + class="right-pane deep-map" + [ngClass]="{ mapPhone: isMapPhone == true }" + ></app-map> </div> </div> <!-- BENEFICIARY ACCOMPANIMENT --> @@ -436,6 +441,27 @@ ></app-footer-form> </div> </div> + + <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer phone"> + <div fxLayout="row" fxLayoutAlign="center center"> + <app-footer-form + [btnName]="['Précédent', 'Suivant']" + (previousPage)="previousPage()" + (nextPage)="nextPage()" + [isValid]="isPageValid" + ></app-footer-form> + </div> + </div> + <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer phone"> + <div fxLayout="row" fxLayoutAlign="center center"> + <app-footer-form + [btnName]="['Précédent', 'Imprimer']" + (previousPage)="previousPage()" + (nextPage)="runMultiPrint(true)" + [isValid]="isPageValid" + ></app-footer-form> + </div> + </div> </div> <app-structure-list-print diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss index ced3349a7e0f71253bffb910d2fc989779d24cc5..7fd2cb3dfca7a8e3505ad728d13369fc40b0dfce 100644 --- a/src/app/form/orientation-form/orientation-form.component.scss +++ b/src/app/form/orientation-form/orientation-form.component.scss @@ -98,3 +98,41 @@ padding-left: 9px; width: 100%; } + +.footer { + padding: 17px 0; + width: 100%; + max-width: 960px; + margin: 20px auto; + text-align: center; + &.desktop { + @media #{$tablet} { + display: none; + } + } + + &.phone { + display: none; + @media #{$tablet} { + margin: 0 auto; + border-top: 1px solid $grey-4; + display: block; + } + } +} + +.btnSwitch { + position: fixed; + left: 50%; + bottom: $footer-height; + transform: translate(-50%, -50%); + margin: 0 auto; + display: none; + @media #{$tablet} { + display: block; + opacity: 0.8; + z-index: $btn-phone-switch-map-list-z-index; + } + @media #{$large-phone} { + } +} diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts index 83a83bf27a974b65141ea5af1152b2fb40d544eb..e2563d09f7f680f099c0330c79fa0e025a8da20a 100644 --- a/src/app/form/orientation-form/orientation-form.component.ts +++ b/src/app/form/orientation-form/orientation-form.component.ts @@ -26,6 +26,7 @@ export class OrientationFormComponent implements OnInit { public selectedMarkerId: string; public locate = false; public noPassNumeric = false; + public isMapPhone = false; public orientationForm: FormGroup; @@ -341,7 +342,7 @@ export class OrientationFormComponent implements OnInit { public searchStructures(): void { this.filters = []; if (this.orientationForm.value.passNumeric) { - this.filters.push(new Filter('labelsQualifications', 'passNumerique', 'Passe Numérique')); + this.filters.push(new Filter('labelsQualifications', 'passNumerique', 'Pass Numérique')); } if (this.orientationForm.value.specificProfile) { this.orientationForm.get('specificProfile').value.forEach((element) => { @@ -503,6 +504,10 @@ export class OrientationFormComponent implements OnInit { this.setStructuresAndCoord(); } + public switchMapList(): void { + this.isMapPhone = !this.isMapPhone; + } + public getAddress(): void { navigator.geolocation.getCurrentPosition((position) => { this.geoJsonService.getAddressByCoord(position.coords.longitude, position.coords.latitude).subscribe( diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss index a5f96348846e57ff7e63623754888e84528c1e9d..8942e91a98032a60065af0729d6207faf0b8036f 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.scss +++ b/src/app/structure-list/components/structure-details/structure-details.component.scss @@ -23,7 +23,7 @@ a { overflow: auto; @media #{$tablet} { width: calc(100% - 2 * 24px); - position: fixed; + position: inherit; height: 100%; .printButton { display: none !important;