From 6f77df0f61ed641fe36ec829f9e9a449a5c37d54 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Tue, 25 May 2021 22:12:32 +0200
Subject: [PATCH] Fix AW-2361

---
 .../fm-map/components/map/map.component.html  | 44 ++++++++++---------
 .../fm-map/components/map/map.component.scss  | 21 +++++++--
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html
index 19b6e61..73f3750 100644
--- a/projects/common-map/src/fm-map/components/map/map.component.html
+++ b/projects/common-map/src/fm-map/components/map/map.component.html
@@ -52,29 +52,31 @@
     <div *ngIf="noContent">
       <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
     </div>
-    <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
-      <div class="panel-wrapper" *ngIf="noContent">
-        <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
-        </div>
-        <div class="panel-bottom">
-  
-          <div *ngIf="!(state.selectedItem)">
-            <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
+    <div class="side-panel-container">
+      <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
+        <div class="panel-wrapper" *ngIf="noContent">
+          <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
           </div>
-  
-          <div *ngIf="state.selectedItem;let item">
-            <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
+          <div class="panel-bottom">
+    
+            <div *ngIf="!(state.selectedItem)">
+              <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
+            </div>
+    
+            <div *ngIf="state.selectedItem;let item">
+              <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
+            </div>
+            <div *ngIf="state.features.length == 0" class="no-results  m-2">
+              <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
+              <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
+            </div>
           </div>
-          <div *ngIf="state.features.length == 0" class="no-results  m-2">
-            <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
-            <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
-          </div>
-        </div>
-      </div>  
-    </fm-side-panel>
-    <fm-side-panel [resizeable]="true" [visible]="!noContent">
-      <router-outlet></router-outlet>
-    </fm-side-panel>
+        </div>  
+      </fm-side-panel>
+      <fm-side-panel [resizeable]="true" [visible]="!noContent">
+        <router-outlet></router-outlet>
+      </fm-side-panel>
+    </div>   
   </aol-map>  
 </ng-container>
 
diff --git a/projects/common-map/src/fm-map/components/map/map.component.scss b/projects/common-map/src/fm-map/components/map/map.component.scss
index 46476e6..90f387a 100644
--- a/projects/common-map/src/fm-map/components/map/map.component.scss
+++ b/projects/common-map/src/fm-map/components/map/map.component.scss
@@ -1,6 +1,6 @@
 @import "~bootstrap/scss/bootstrap.scss";
 
-aol-map { width:100%;}
+aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
 
 .arrow {
   top: 3rem;
@@ -49,11 +49,22 @@ aol-map { width:100%;}
 .control-container {
   position: absolute;
   right: 1em;
-  bottom: 1em;
+  bottom: 8.1em;
 }
 
 .fullscreen .control-container {
-  bottom: 1em;
+  bottom: 5em;
+}
+
+.side-panel-container {
+  position: absolute;
+  top:0em;
+  bottom: 7.1em;
+  width: 100%;
+}
+
+.fullscreen .side-panel-container {
+  bottom: 4em;
 }
 
 switch2d3d {
@@ -125,6 +136,10 @@ timespan.menuVisible {
   .panel-top {
     height: 8.1rem;
   }
+
+  .side-panel-container {
+    width: auto;
+  }
 }
 
 .map {