Merge branch 'mobile' into 'dev'

mobile responsive

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!32

src/app/home/home.component.html

@@ -23,6 +23,7 @@
     [toogleToolTipId]="displayMarkerId"
     [selectedMarkerId]="selectedMarkerId"
     (selectedStructure)="showDetailStructure($event)"
+    [isMapPhone]="isMapPhone"
     class="right-pane"
     [ngClass]="{ mapPhone: isMapPhone == true }"
   ></app-map>

src/app/map/components/map.component.ts

@@ -41,6 +41,7 @@ export class MapComponent implements OnChanges {
   @Input() public structures: Structure[] = [];
   @Input() public toogleToolTipId: number;
   @Input() public selectedMarkerId: number;
+  @Input() public isMapPhone: boolean;
   @ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent;
   @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
   private currentStructure: Structure;
@@ -69,6 +70,13 @@ export class MapComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.isMapPhone) {
+      if (this.isMapPhone) {
+        setTimeout(() => {
+          this.map.invalidateSize();
+        }, 0);
+      }
+    }
     if (changes.structures) {
       this.handleStructurePosition(changes.structures.previousValue);
     }
@@ -80,7 +88,7 @@ export class MapComponent implements OnChanges {
       this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
     }
     // Handle map marker selection
-    if (changes.selectedMarkerId) {
+    if (changes.selectedMarkerId && this.map) {
       this.map.closePopup();
       if (changes.selectedMarkerId.currentValue === undefined) {
         this.mapService.setDefaultMarker(changes.selectedMarkerId.previousValue);

src/app/structure-list/components/modal-filter/modal-filter.component.scss

@@ -20,14 +20,14 @@
   margin-left: 396px;
 }
 .modal {
-  max-height: 648px;
   max-width: 754px;
   width: 94%;
   z-index: $modal-filter-structure-z-index !important;
-  position: absolute;
+  position: fixed;
   border-radius: 6px;
   margin-top: 3.5px;
   @media #{$large-phone} {
+    height: 100%;
     max-height: auto;
     max-width: auto;
     width: 100%;
@@ -52,6 +52,7 @@
   .body-wrap {
     @media #{$large-phone} {
       height: 100vh;
+      height: -webkit-fill-available;
     }
     .titleFilter {
       display: none !important;
@@ -67,7 +68,7 @@
     max-width: 1100px;
     border-bottom: 1px solid $grey;
     margin-bottom: 16px;
-    max-height: 438px;
+    max-height: 40vh;
     @media #{$large-phone} {
       max-height: none;
       height: 100%;

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -18,9 +18,9 @@
   padding: 10px 24px;
   overflow: auto;
   @media #{$tablet} {
+    width: calc(100% - 2 * 24px);
     position: fixed;
-    padding: 0;
-    height: 100vh;
+    height: 100%;
     .printButton {
       display: none !important;
     }
@@ -90,6 +90,7 @@ a {
     height: unset;
     padding: unset;
     overflow: hidden;
+    border-right: 0;
   }
 
   .hide-on-print {

src/styles.scss

@@ -6,13 +6,20 @@
 @import 'assets/scss/icons';
 @import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
 
-html,
+html {
+  height: -webkit-fill-available;
+  margin: 0;
+  padding: 0;
+  background-color: $grey-6;
+}
 body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: $grey-6;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
 }
 
 a {