🚸 [feat/maps] #3 add some improvement

JAGFx · Dec 30, 2020 · 3529f40 · 3529f40
1 parent 5b23fc0
commit 3529f40
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/dashboards/maps/assets/scss/maps.scss b/src/dashboards/maps/assets/scss/maps.scss
@@ -37,8 +37,8 @@
 				color: $cWhite;
 				border: 0;
 				border-bottom: 2px solid $cRed;
-				background: $cBlackTransparentMid;
-				font-size: 1.5rem;
+				background: transparentize($cBlackTransparentMid, .3);
+				font-size: 2rem;
 				padding: 0 0 .1rem 0;
 				margin-right: .15rem;
 				outline: 0;
@@ -49,6 +49,10 @@
 					margin-right: 0;
 				}
 			}
+
+			&.ol-zoom > button {
+				padding: 0 0 .4rem 0;
+			}
 		}
 
 		#rotate-wrapper {
@@ -62,14 +66,14 @@
 				justify-content: center;
 				align-items: center;
 				text-align: center;
-				font-size: .9rem;
+				font-size: 1rem;
 
 				i {
 					padding: .2rem 0 0 0;
 				}
 
 				&:not(.enable) {
-					background: $cBlackTransparentHigh;
+					background: transparentize($cBlackTransparentHigh, .3);
 					border-color: $cGray;
 					color: $cGray;
 				}
@@ -87,11 +91,11 @@
 			justify-content: center;
 			align-items: center;
 			text-align: center;
-			font-size: 1rem;
+			font-size: 1.5rem;
 			color: $cWhite;
 			border: 0;
 			border-bottom: 2px solid $cRed;
-			background: $cBlackTransparentMid;
+			background: transparentize($cBlackTransparentMid, .3);
 			padding: .5rem 0.5rem;
 			margin-right: .15rem;
 			outline: 0;
@@ -113,11 +117,11 @@
 				background: $cWhite;
 				border: .3rem solid $cRed;
 				border-radius: 100%;
-				width: 3rem;
-				height: 3rem;
+				width: 3.2rem;
+				height: 3.2rem;
 				color: $cBlack;
 				font-weight: bold;
-				font-size: 1.2rem;
+				font-size: 1.5rem;
 			}
 		}
 
@@ -127,7 +131,7 @@
 			height: 5rem;
 			left: 5rem;
 			top: 5rem;
-			background: $cBlackTransparentMid;
+			background: transparentize($cBlackTransparentMid, .3);;
 		}
 	}
 }
diff --git a/src/dashboards/maps/components/DashMaps.vue b/src/dashboards/maps/components/DashMaps.vue
@@ -6,14 +6,14 @@
       <button id="rotate-button" :class="{ enable: rotateWithPlayer }" @click="onClickRotate">
         <i class="fas fa-location-arrow"></i>
       </button>
-      <button id="center-button" :class="{ enable: focusOnPlayer }" @click="onClickCenter">
+      <button id="center-button" class="enable" @click="onClickCenter">
         <i class="fas fa-bullseye"></i>
       </button>
     </div>
-    <div id="speed-limit">
+    <div id="speed-limit" v-show="telemetry.navigation.speedLimit.value > 0">
       <span>{{ unit_speed( telemetry.navigation.speedLimit, true, false ) }}</span>
     </div>
-    <div id="eta">
+    <div id="eta" v-show="telemetry.navigation.distance > 0">
       ETA:
       {{ $etaDueDate() | $dateTimeLocalized( DATE_FORMAT_LONG, TIME_FORMAT_SHORT ) }},
       {{ unit_length( telemetry.navigation.distance, 'm' ) }},
@@ -35,8 +35,7 @@ export default {
   },
   data() {
     return {
-      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer,
-      focusOnPlayer:    _maps.d.gBehaviorCenterOnPlayer
+      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer
     };
   },
   mounted() {
@@ -61,7 +60,6 @@ export default {
   },
   methods:    {
     onClickRotate() {
-      //console.log( 'R', _maps.d );
       _maps.d.gBehaviorRotateWithPlayer = (_maps.d.gBehaviorCenterOnPlayer)
           ? !_maps.d.gBehaviorRotateWithPlayer
           : true;
@@ -70,8 +68,6 @@ export default {
     },
     onClickCenter() {
       _maps.d.gBehaviorCenterOnPlayer = !_maps.d.gBehaviorCenterOnPlayer;
-
-      this.focusOnPlayer = _maps.d.gBehaviorCenterOnPlayer;
     }
   }
 };