feat: adjust map floating btns style

GIScience · Aug 3, 2021 · 3951153 · 3951153
1 parent 963b9c7
commit 3951153
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/src/fragments/header/Header.vue b/src/fragments/header/Header.vue
@@ -18,8 +18,8 @@
     </v-toolbar>
     <v-btn fab small v-if="!$store.getters.embed && $highResolution"
       :title="$store.getters.topBarOpen? $t('header.hideMenuBar'): $t('header.showMenuBar')"
-      style="position:absolute; right:170px; z-index:4; transition:all 1s ease; border-radius: 3px; border: 2px solid rgba(0,0,0,0.2);"
-      :style="{top: $store.getters.topBarOpen? '110px' : '10px'}"
+      style="width: 37px; height: 37px; position:absolute; right:170px; z-index:4; transition:all 1s ease; border-radius: 3px;"
+      :style="{top: $store.getters.topBarOpen? '103px' : '3px'}"
       @click.stop="toggleTopBar" >
       <v-icon large v-if="$store.getters.topBarOpen" >keyboard_arrow_up </v-icon>
       <v-icon large v-else >keyboard_arrow_down </v-icon>

diff --git a/src/fragments/map-view/map-view-leaflet.css b/src/fragments/map-view/map-view-leaflet.css
@@ -18,7 +18,7 @@
   background-color: rgba(256,256,256, 0.6);
 }
 
-.map-view >>> .leaflet-touch.leaflet-control-layers-toggle {
+.map-view >>> .leaflet-control-layers-toggle {
   width: 36px;
   height: 36px;
 }

diff --git a/src/fragments/map-view/map-view.css b/src/fragments/map-view/map-view.css
@@ -53,34 +53,36 @@
 
 .accessibility-btn {
   position: absolute !important;
-  top: 60px;
-  right: 0px;
+  top: 55px;
+  right: 1px;
   z-index: 502;
   background: white !important;
   color: black;
   transition:all 0.5s ease;
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
   border-radius: 3px;
-  border: 2px solid rgba(0,0,0,0.2);
+  width: 37px;
+  height: 37px;
 }
 .accessibility-btn.extra-low-resolution {
-  top: 130px;
+  top: 125px;
 }
 
 
 .fit-all-features {
   position: absolute !important;
-  top: 110px;
-  right: 0px;
+  top: 105px;
+  right: 1px;
   z-index: 502;
   background: white !important;
   color: black;
   border-radius: 3px;
-  border: 2px solid rgba(0,0,0,0.2);
+  width: 37px;
+  height: 37px;
 }
 
 .fit-all-features.extra-low-resolution {
-  top: 180px;
+  top: 175px;
 }
 
 .view-on-ors {

diff --git a/src/fragments/sidebar/sidebar.css b/src/fragments/sidebar/sidebar.css
@@ -46,13 +46,14 @@
 .toggle-sidebar {
   position: absolute;
   top: 300px;
-  left: 400px;
+  left: 403px;
   z-index: 3;
   background: #fff;
   transition:all 0.5s ease;
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
   border-radius: 3px;
-  border: 2px solid rgba(0,0,0,0.2);
+  width: 37px !important;
+  height: 37px !important;
 }