[Frontend] Styling for Time Conductor v2

Fixes #933 WIP: Added zoom current range indicator; tweaks to style
nasa · Jul 15, 2016 · 43a804e · 43a804e
1 parent b3a4f52
commit 43a804e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -430,25 +430,35 @@ input[type="search"] {
     //border-radius: 50% !important;
 }
 
+@mixin sliderKnobRound() {
+    $h: 12px;
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    border-radius: 50% !important;
+}
+
 input[type="range"] {
     // HTML5 range inputs
 
     -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
     background: transparent; /* Otherwise white in Chrome */
     &:focus {
-        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+        outline: none; /* Removes the blue border. */
     }
 
     // Thumb
     &::-webkit-slider-thumb {
         -webkit-appearance: none;
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
     &::-moz-range-thumb {
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
     &::-ms-thumb {
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
 
     // Track

diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -119,7 +119,8 @@
     }
 
     .l-time-conductor-inputs-holder,
-    .l-time-conductor-ticks {
+    .l-time-conductor-ticks,
+    .l-time-conductor-zoom-w {
         font-size: 0.8rem;
     }
 
@@ -203,11 +204,16 @@
     .l-time-conductor-controls {
         align-items: center;
         margin-top: $interiorMargin;
-        .time-conductor-zoom {
-            //@include test();
-            min-width: 100px;
-            height: $r3H;
-            width: 25%;
+        .l-time-conductor-zoom-w {
+            @include justify-content(flex-end);
+            .time-conductor-zoom {
+                height: $r3H;
+                min-width: 100px;
+                width: 20%;
+            }
+            .time-conductor-zoom-current-range {
+                color: $colorTick;
+            }
         }
 
     }

diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -105,8 +105,9 @@
                     ]}">
             </mct-control>
             <!-- Zoom control -->
-            <div class="l-time-conductor-zoom-w grows flex-elem contents-align-right">
-                <input class="time-conductor-zoom" type="range" />
+            <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
+                <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder">Mars Minutes</span>
+                <input class="time-conductor-zoom flex-elem" type="range" />
             </div>
         </div>