Commit ae5d2e35 authored by Hugo's avatar Hugo
Browse files

css fixes -> map / list switch & footer nav

parent e9b7bec0
......@@ -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;
......
......@@ -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
......
......@@ -28,6 +28,28 @@
}
}
.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;
}
}
}
.right-pane {
width: 400px;
max-height: 400px;
......@@ -98,3 +120,19 @@
padding-left: 9px;
width: 100%;
}
.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} {
}
}
......@@ -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(
......
......@@ -23,7 +23,7 @@ a {
overflow: auto;
@media #{$tablet} {
width: calc(100% - 2 * 24px);
position: fixed;
position: inherit;
height: 100%;
.printButton {
display: none !important;
......
Markdown is supported
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