side panel display fixes

infra-geo-ouverte · Sep 21, 2023 · 563d91c · 563d91c
1 parent 3b03f92
commit 563d91c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -68,34 +68,34 @@
       <div *ngIf="mobile" id="scaleLine"></div>
 
         <igo-baselayers-switcher
-          [ngClass]="mobile? ['igo-baselayers-switcher-mobile'] : (panelOpenState? ['baselayers-pushed'] : ['baselayers'])"
+          [ngClass]="mobile ? (!hasFooter ? 'igo-baselayers-switcher-mobile footer-mobile-offset' : 'igo-baselayers-switcher-mobile') : (panelOpenState ? 'baselayers-pushed' : 'baselayers')"
           [map]="map"
           [useStaticIcon]="getBaseLayersUseStaticIcon()">
         </igo-baselayers-switcher>
 
         <div id="map-buttons"
-        [ngClass]="mobile? ['map-buttons-mobile'] : ['map-buttons']">
+          [ngClass]="!hasFooter ? (mobile ? 'map-buttons-mobile footer-mobile-offset' : 'map-buttons') : (mobile ? 'map-buttons-mobile' : 'map-buttons')">
           <igo-geolocate-button *ngIf="hasGeolocateButton" [map]="map" color="primary"></igo-geolocate-button>
           <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
           <igo-rotation-button [showIfNoRotation]="showRotationButtonIfNoRotation" [map]="map" color="primary"></igo-rotation-button>
-          <app-legend-button *ngIf= "hasLegendButton" (toggleLegend)= "toggleLegend()" [legendInPanel]= "legendInPanel" [tooltipDisabled]="mobile" [legendButtonTooltip]="legendButtonTooltip" color= "primary"></app-legend-button>
+          <app-legend-button *ngIf="hasLegendButton" (legendToggled)="toggleLegend()" [legendInPanel]="legendInPanel" [tooltipDisabled]="mobile" [legendButtonTooltip]="legendButtonTooltip" color="primary"></app-legend-button>
         </div>
 
         <app-bottompanel
-          *ngIf= "mobile"
-          [mobile]= "mobile"
-          [store]= "searchStore"
-          [searchInit]= "searchInit"
-          [mapQueryClick]= "mapQueryClick"
-          [legendPanelOpened]= "legendPanelOpened"
-          [panelOpenState]= "panelOpenState"
-          (panelOpened)= "panelOpened($event)"
-          (mapQuery)= "mapQuery($event)"
-          (closeQuery)= "closePanelOnCloseQuery()"
-          (closeLegend)= "closePanelLegend()"
-          (openLegend)= "openPanelLegend()"
-          (toggleLegend)= "togglePanelLegend()"
-          [layers]= "mapLayersShownInLegend">
+          *ngIf="mobile"
+          [mobile]="mobile"
+          [store]="searchStore"
+          [searchInit]="searchInit"
+          [mapQueryClick]="mapQueryClick"
+          [legendPanelOpened]="legendPanelOpened"
+          [panelOpenState]="panelOpenState"
+          (panelOpened)="panelOpened($event)"
+          (mapQuery)="mapQuery($event)"
+          (closeQuery)="closePanelOnCloseQuery()"
+          (closeLegend)="closePanelLegend()"
+          (openLegend)="openPanelLegend()"
+          (toggleLegend)="togglePanelLegend()"
+          [layers]="mapLayersShownInLegend">
         </app-bottompanel>
     </igo-map-browser>
 

diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
@@ -107,12 +107,13 @@
   }
 
   .igo-baselayers-switcher-mobile {
-    bottom: 48px !important;
+    left: 4px;
+    bottom: 36px;
     z-index: 1;
   }
 
-  .igo-baselayers-switcher-mobile {
-    left: 4px;
+  .footer-mobile-offset {
+    bottom: 62px;
   }
 
   .igo-baselayers-switcher {
@@ -207,19 +208,23 @@
     max-height: 50%;
     position: absolute;
     bottom: 6px;
-    right: 4px;
+    right: 16px;
   }
 
   .map-buttons-mobile {
     display: flex;
     flex-direction: column;
     z-index: 10;
     position: absolute;
-    bottom: 48px !important;
+    bottom: 36px;
     max-height: 50%;
     right: 4px;
   }
 
+  .footer-mobile-offset {
+    bottom: 62px;
+  }
+
   .igo-zoom-button-container,
   button,
   app-legend-button,