From a7a0606bdd06502e8b278fa33f6c6a987a06a57f Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Mon, 6 Aug 2018 16:14:44 +0200
Subject: [PATCH] Remove flex layout for OL map

The initial approach of having a CSS flex layout for the app, so the OL
map graps automatically the available space was buggy on large screens.
This removes the flex layout and sets the avaible height for the OL map
via JavaScript.
---
 src/assets/css/wegue.css     |  8 +-------
 src/components/AppHeader.vue |  2 +-
 src/components/ol/Map.vue    | 10 ++++++++++
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/wegue.css b/src/assets/css/wegue.css
index 2fcfbcf5..3e9aef08 100644
--- a/src/assets/css/wegue.css
+++ b/src/assets/css/wegue.css
@@ -7,10 +7,7 @@ html {
 .wgu-app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   position: relative;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
+  width: 100%;
 }
 .wgu-app-embedded {
   width: 100%;
@@ -19,11 +16,8 @@ html {
 }
 
 .wgu-app .wgu-map {
-  /* temp. solution since flex: 1 doe not work as expected */
-  height: calc(100vh - 56px);
 }
 .wgu-app-embedded .wgu-map {
-  height: calc(100% - 56px);
 }
 
 .wgu-app-logo {
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index c195c0a3..2786c151 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -30,8 +30,8 @@ export default {
 <style>
 
   .wgu-app-toolbar {
-    /*background-color: red;*/
     z-index: 1;
+    display: block;
   }
 
 </style>
diff --git a/src/components/ol/Map.vue b/src/components/ol/Map.vue
index a4d74c3f..e2c7ee04 100644
--- a/src/components/ol/Map.vue
+++ b/src/components/ol/Map.vue
@@ -30,6 +30,16 @@ export default {
     // Send the event 'ol-map-mounted' with the OL map as payload
     WguEventBus.$emit('ol-map-mounted', this.map)
 
+    const appHeaderEl = document.querySelector('.wgu-app-toolbar');
+    if (appHeaderEl) {
+      const headerHeight = appHeaderEl.offsetHeight;
+      if (this.$isEmbedded) {
+        this.map.getTarget().style.height = 'calc(100% - ' + headerHeight + 'px)';
+      } else {
+        this.map.getTarget().style.height = 'calc(100vh - ' + headerHeight + 'px)';
+      }
+    }
+
     // resize the map, so it fits to parent
     window.setTimeout(() => {
       this.map.updateSize();