Planovac, lepsi social image

src/components/flightPlans/FlightPlanMap.vue

@@ -81,7 +81,7 @@ const handleMarkerMove = async (idx, event) => {
 <template>
   <MapWrapper
     ref="mapWrap"
-    style="width: 100%; height: 100%; min-height: 500px"
+    style="width: 100%; height: 65vh; min-height: 500px"
     :center="center"
     :zoom="8"
     :track="{path: track, geodesic: true, strokeColor: '#ff00ff', strokeOpacity: 1, strokeWeight: 3}"

src/components/flightPlans/FlightPlanSideControls.vue

@@ -43,7 +43,7 @@ const totalTime = computed(() => {
 
 <template>
   <q-list bordered class="q-ml-md-md q-pt-md">
-    <q-item>
+    <q-item class="mobile-hide">
       <q-item-section>
         <div style="display: flex; justify-content: space-between">
           <q-btn
@@ -65,7 +65,7 @@ const totalTime = computed(() => {
       </q-item-section>
     </q-item>
 
-    <q-scroll-area style="height: 50vh">
+    <q-scroll-area class="mobile-hide" style="height: 55vh">
       <template v-for="(segment, i) in props.flightPlan.track" :key="segment">
         <q-item dense>
           <q-item-section>
@@ -114,7 +114,7 @@ const totalTime = computed(() => {
     </q-scroll-area>
 
     <template v-if="totalDistance">
-      <q-item>
+      <q-item class="mobile-hide">
         <q-item-section>
           <q-separator/>
         </q-item-section>

src/components/map/MapWrapper.vue

@@ -245,7 +245,7 @@ const isControlsOpened = ref(false);
     @click="handleMapClick"
     map-type-id="roadmap"
     gesture-handling="greedy"
-    :max-zoom="13"
+    :max-zoom="11"
     ref="mapRef"
   >
     <AirspaceInfoWindow
@@ -289,24 +289,23 @@ const isControlsOpened = ref(false);
           &#9650;
         </CustomMarker>
       </template>
-
-      <template v-for="poi in pointsOfInterest" :key="poi.name">
-        <CustomMarker
-          v-if="poi.gpsLatitude && poi.gpsLongitude"
-          :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
-          @click.stop="handlePoiClick(poi)"
-        >
-          <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
-            <img style="width: 20px" src="/public/mapIcons/photo-32x32.png" alt="">
-          </div>
-        </CustomMarker>
-      </template>
-
-      <Polyline v-if="track" :options="track"/>
     </template>
 
+    <template v-for="poi in pointsOfInterest" :key="poi.name">
+      <CustomMarker
+        v-if="poi.gpsLatitude && poi.gpsLongitude"
+        :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
+        @click.stop="handlePoiClick(poi)"
+      >
+        <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
+          <img style="width: 20px" src="/mapIcons/photo-32x32.png" alt="">
+        </div>
+      </CustomMarker>
+    </template>
 
-    <CustomControl position="BOTTOM_LEFT" v-if="showLayerControls" style="width: 30%">
+    <Polyline v-if="track" :options="track"/>
+
+    <CustomControl position="BOTTOM" v-if="showLayerControls" style="width: auto; max-width: 200px">
       <q-btn
         @click="isControlsOpened = !isControlsOpened"
         :icon="isControlsOpened ? 'layers_clear' : 'layers'"
@@ -320,8 +319,8 @@ const isControlsOpened = ref(false);
       <q-card
         v-if="isControlsOpened"
         class="q-my-md q-mx-auto q-px-lg"
+        style="max-width: 30%; min-width: 200px;"
       >
-
         <template v-for="(airspaceLayer, key) in airspaceLayers" :key="airspaceLayer">
           <q-checkbox
             v-model="airspaceLayers[key].displayed"