From a930f1a9a0672d49d67810540c02ee2cef03fd46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 31 Jan 2023 15:03:52 +0100
Subject: [PATCH] Make style map buttons moving above the map on mobile

---
 webapp/pages/map.vue | 42 ++++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue
index 2e8807da8..b0754f13a 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -6,6 +6,18 @@
     </ds-space>
     <ds-space margin="large" />
     <client-only>
+      <div v-if="isMobile">
+        <base-button
+          :class="['map-style-button', mapOptions.style === style.url ? '' : '--deactivated']"
+          v-for="style in styles"
+          :key="style.title"
+          filled
+          size="small"
+          @click="setStyle(style.url)"
+        >
+          {{ style.title }}
+        </base-button>
+      </div>
       <mgl-map
         :mapbox-gl="mapboxgl"
         :access-token="mapOptions.accessToken"
@@ -21,17 +33,18 @@
         :max-pitch="60"
         @load="onMapLoad"
       >
-        <!-- may use MglPopup for the styles? -->
-        <base-button
-          :class="['map-style-button', mapOptions.style === style.url ? '' : '--deactivated']"
-          v-for="style in styles"
-          :key="style.title"
-          filled
-          size="small"
-          @click="setStyle(style.url)"
-        >
-          {{ style.title }}
-        </base-button>
+        <div v-if="!isMobile">
+          <base-button
+            :class="['map-style-button', mapOptions.style === style.url ? '' : '--deactivated']"
+            v-for="style in styles"
+            :key="style.title"
+            filled
+            size="small"
+            @click="setStyle(style.url)"
+          >
+            {{ style.title }}
+          </base-button>
+        </div>
         <MglFullscreenControl />
         <MglNavigationControl position="top-right" />
         <MglGeolocateControl position="top-right" />
@@ -45,13 +58,17 @@
 import mapboxgl from 'mapbox-gl'
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
-import { objectValuesToArray } from '../utils/utils'
 import { mapGetters } from 'vuex'
+import { objectValuesToArray } from '~/utils/utils'
 import { profileUserQuery, mapUserQuery } from '~/graphql/User'
 import { groupQuery } from '~/graphql/groups'
+import mobile from '~/mixins/mobile'
+
+const maxMobileWidth = 639 // on this width and smaller the mapbox 'MapboxGeocoder' search gets bigger
 
 export default {
   name: 'Map',
+  mixins: [mobile(maxMobileWidth)],
   head() {
     return {
       title: this.$t('map.pageTitle'),
@@ -461,6 +478,7 @@ export default {
   position: relative;
   margin-left: 6px;
   margin-top: 6px;
+  margin-bottom: 6px;
 
   &.--deactivated {
     color: $text-color-base;