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

@@ -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 {

src/components/AppHeader.vue

@@ -30,8 +30,8 @@ export default {
 <style>
 
   .wgu-app-toolbar {
-    /*background-color: red;*/
     z-index: 1;
+    display: block;
   }
 
 </style>

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();