fixed fullscreen map view

labswp_2019_sose_geocaching_frontend/frontend/quasar.conf.js

@@ -75,7 +75,8 @@ module.exports = function (ctx) {
         'QLinearProgress',
         'QBtnGroup',
         'QTooltip',
-        'QMenu'
+        'QMenu',
+        'QResizeObserver',
       ],
 
       directives: [

labswp_2019_sose_geocaching_frontend/frontend/src/layouts/MyLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <q-layout view="hhh Lpr lFf" @click.native="counter()">
     <q-header id="qheader" class="bg-white text-grey-14" elevated>
-      <q-toolbar class="q-pa-md">
+      <q-toolbar id="toolbar" class="q-pa-md">
         <router-link to="/">
           <q-img src="statics/buga_logo.svg" style="width: 40px;" class="q-mr-sm"/>
         </router-link>

labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-             data-projection="EPSG:4326" style="height: 200px" >
+             data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
       <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
       <vl-feature id="marker" ref="marker">

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue

@@ -10,6 +10,7 @@
         active-color="cyan-14"
         indicator-color="cyan-14"
         switch-indicator
+        ref="tabView"
       >
         <q-tab name="list" label="Liste" icon="list"/>
         <q-tab name="map" label="Karte" icon="map"/>
@@ -17,10 +18,10 @@
       <q-separator color="grey-4"/>
     </div>
 
-    <div class="col flex column">
+    <div ref="contentView" class="col flex column">
-      <q-tab-panels v-model="tab" animated class="col">
+      <q-tab-panels v-model="tab" animated class="col column">
 
-        <q-tab-panel name="list" class=" fit">
+        <q-tab-panel name="list" class="fit column">
           <q-spinner-oval
             v-if="!render"
             class="absolute-center"
@@ -107,12 +108,12 @@
         </q-tab-panel>
 
 
-        <q-tab-panel name="map" class="q-pa-none fit">
+        <q-tab-panel name="map" class="q-pa-none">
           <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
           <!--</div>-->
-          <div class="full-width full-height absolute-full">
+          <div v-if="render" class="">
             <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-                     data-projection="EPSG:4326">
+                     data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }">
               <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
               <vl-geoloc @update:position="geolocPosition = $event">
@@ -170,27 +171,42 @@ Vue.use(VueLayers);
         center: [ 9.208858198755664, 49.14785422283188],
         rotation: 0,
         geolocPosition: undefined,
+        mapHeight: 0,
       }
     },
     mounted: function () {
       this.initMap().then(features => {
         this.features = features.map(Object.freeze)
-      })
+      });
+    },
+    destroyed() {
+      window.removeEventListener('resize', this.matchHeight)
     },
     computed: {
       hasAdminState() {
         return this.$store.getters['auth/GET_ADMINSTATE'];
-      }
+      },
     },
     async created() {
       console.log("created(): " + this.caches);
       this.loadData();
+      window.addEventListener('resize', this.matchHeight);
+
     },
     methods: {
+      matchHeight() {
+        console.log("matchHeight");
+        const heightWindow = window.innerHeight;
+        const heightBar = this.$refs.tabView.$el.clientHeight + document.getElementById('toolbar').clientHeight;
+        console.log("heightWindow="+heightWindow);
+        console.log("heightBar="+heightBar);
+        this.mapHeight = heightWindow - heightBar;
+      },
       async loadData() {
         this.render = false;
         await this.fetchAllCaches();
         this.render = await this.fetchMyCaches();
+        this.matchHeight();
       },
       getColorClass(cache) {
         switch (this.getCacheAccesDefinition(cache)) {

labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-             data-projection="EPSG:4326" style="height: 200px" >
+             data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
       <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
       <vl-geoloc @update:position="geolocPosition = $event">