fix(map-view): uI elements z-index and positioning

GIScience · Jul 28, 2021 · 6ea7bca · 6ea7bca
1 parent d7bb23a
commit 6ea7bca
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/src/fragments/map-view/map-view.css b/src/fragments/map-view/map-view.css
@@ -35,21 +35,26 @@
   right: 5px;
   z-index: 501;
   opacity: 0.7;
-  height: 100px;
-  display: hidden;
+  height: 100px
+}
+
+@media (max-width: 600px) {
+  .over-brand {
+    height: 70px
+  }
 }
 
 .my-location-btn {
   position: absolute !important;
   bottom: 80px;
   right: 0px;
-  z-index: 502;
+  z-index: 1000;
 }
 
 .accessibility-btn {
   position: absolute !important;
   top: 60px;
-  right: 0px;
+  right: 5px;
   z-index: 502;
   background: white !important;
   color: black;
@@ -62,7 +67,7 @@
 .fit-all-features {
   position: absolute !important;
   top: 110px;
-  right: 0px;
+  right: 5px;
   z-index: 502;
   background: white !important;
   color: black;

diff --git a/src/fragments/map-view/map-view.js b/src/fragments/map-view/map-view.js
@@ -27,7 +27,22 @@
  * @emits setInputPlace
  */
 
-import { LMap, LTileLayer, LLayerGroup, LTooltip, LPopup, LControlZoom, LControlAttribution, LControlScale, LWMSTileLayer, LControlLayers, LGeoJson, LPolygon, LCircle, LCircleMarker } from 'vue2-leaflet'
+import { 
+  LMap, 
+  LTileLayer, 
+  LLayerGroup, 
+  LTooltip, 
+  LPopup, 
+  LControlZoom, 
+  LControlAttribution, 
+  LControlScale, 
+  LWMSTileLayer, 
+  LControlLayers, 
+  LGeoJson, 
+  LPolygon, 
+  LCircle, 
+  LCircleMarker 
+} from 'vue2-leaflet'
 
 import routeData from '@/support/map-data-services/ors-response-data-extractors/route-data'
 import ExtraInfoHighlight from './components/extra-info-highlight/ExtraInfoHighlight'