💄 [feat/maps] #3 change the UI for map

JAGFx · Jan 2, 2021 · b0cb8db · b0cb8db
1 parent e8d6671
commit b0cb8db
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/src/dashboards/maps/assets/scss/maps.scss b/src/dashboards/maps/assets/scss/maps.scss
@@ -140,7 +140,8 @@
 		#speed-limit {
 			position: absolute;
 			width: auto;
-			bottom: .6rem;
+			left: .3rem;
+			top: .3rem;
 
 			span {
 				display: flex;
@@ -160,15 +161,21 @@
 
 		#speed-area {
 			position: absolute;
-			top: .3rem;
-			height: 3.1rem;
+			bottom: .3rem;
+			height: auto;
+
+			.button {
+				height: auto;
+				width: auto;
+				padding: .3rem;
+			}
 
 			.speed {
-				height: 3rem;
-
 				.value {
-					font-size: 2rem;
-					line-height: 1.5rem;
+					font-family: suprrpg !important;
+					@include prefixer(transform, skew(19deg, 0deg), ("webkit", "moz", "o"));
+					font-size: 2.5rem;
+					line-height: 2.3rem;
 				}
 
 				.unit {
@@ -177,11 +184,14 @@
 			}
 
 			.truck-gear {
-				line-height: 1rem;
+				line-height: 1.4rem;
 				background: $cWhiteGray;
 				color: $cBlack;
-				width: 3rem;
-				height: 3rem;
+				padding: .3rem;
+				height: inherit;
+				font-weight: bold;
+				//width: 3rem;
+				//height: 3rem;
 				font-size: 1.5rem;
 			}
 		}

diff --git a/src/dashboards/maps/components/DashMaps.vue b/src/dashboards/maps/components/DashMaps.vue
@@ -1,20 +1,12 @@
 <template>
   <Dashboard class="maps wrapper">
-    <div id="map" class="w-100 h-100">
-    </div>
+    <div id="map" class="w-100 h-100"></div>
 
-    <!-- Speed area-->
-    <div id="speed-area" class="justify-content-center align-items-center bottom">
-      <div class="speed button w-auto d-flex justify-content-center align-items-center flex-column">
-        <span class="value h-100">{{ unit_speed( telemetry.truck.speed, true, false ) | $toFixed( 0 ) }}</span>
-        <small class="unit h-100">{{ unit_speed( telemetry.truck.speed, false ) }}</small>
-      </div>
-
-      <div :class="telemetry.truck.transmission.shifterType" class="truck-gear button">
-        <span class="value">{{ $trukGear( telemetry.truck.transmission, telemetry.truck.brand ) }}</span>
-      </div>
+    <!-- Speed limit -->
+    <div v-show="telemetry.navigation.speedLimit.value > 0" id="speed-limit" class="justify-content-center align-items-center">
+      <span>{{ unit_speed( telemetry.navigation.speedLimit, true, false ) }}</span>
     </div>
-    <!-- ./Speed area -->
+    <!-- ./Speed limit -->
 
     <!-- Control map buttons -->
     <div class="controls-wrapper bottom">
@@ -28,11 +20,20 @@
     </div>
     <!-- ./Control map buttons -->
 
-    <!-- Speed limit -->
-    <div v-show="telemetry.navigation.speedLimit.value > 0" id="speed-limit" class="justify-content-center align-items-center">
-      <span>{{ unit_speed( telemetry.navigation.speedLimit, true, false ) }}</span>
+    <!-- Speed area-->
+    <div id="speed-area" class=" bottom button">
+      <div class="d-flex justify-content-center align-items-center bottom button">
+        <div class="speed">
+          <span class="value d-block">{{ unit_speed( telemetry.truck.speed, true, false ) | $toFixed( 0 ) }}</span>
+          <!--        <small class="unit h-100">{{ unit_speed( telemetry.truck.speed, false ) }}</small>-->
+        </div>
+
+        <div :class="telemetry.truck.transmission.shifterType" class="truck-gear ml-2">
+          {{ $trukGear( telemetry.truck.transmission, telemetry.truck.brand ) }}
+        </div>
+      </div>
     </div>
-    <!-- ./Speed limit -->
+    <!-- ./Speed area -->
 
     <!-- Navigation ETA -->
     <div v-show="telemetry.navigation.distance > 0" class="eta-wrapper d-flex justify-content-end align-items-start flex-column left">