From 08ecf00916eca1b1fa904367103207375c5b0fee Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 10 Nov 2015 17:14:12 -0800
Subject: [PATCH] [Frontend] Misc CSS updates to clean up layout

open #199
IN-PROGRESS
Testing with Time Controller visible;
---
 .../browse/res/templates/browse-object.html   | 25 +-----
 .../commonUI/general/res/sass/_global.scss    |  3 +-
 .../res/sass/controls/_time-controller.scss   |  4 -
 .../res/sass/user-environ/_layout.scss        | 10 +--
 .../espresso/res/css/theme-espresso.css       | 79 ++++++++++---------
 .../themes/snow/res/css/theme-snow.css        | 79 ++++++++++---------
 .../conductor/src/ConductorRepresenter.js     |  2 +-
 7 files changed, 92 insertions(+), 110 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 85b1ed3faa..faf0ee3068 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -19,9 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-init="
-    editBtns = [{ cssclass: 'save',title: 'Save' },{ cssclass: 'cancel',title: 'Discard Changes', action:'cancelEditing' }];
-"></div>
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar l-flex-row">
         <div class="items-select left flex-elem l-flex-row grows">
@@ -50,15 +47,16 @@
 
     <div class="l-object-wrapper"
          ng-class="{ active:editMode, 'edit-main':editMode}">
-        <div class="l-object-wrapper-inner l-flex flex-col">
+        <div class="l-object-wrapper-inner l-flex-col">
             <!-- Toolbar and Save/Cancel buttons -->
             <div class="l-edit-controls flex-elem l-flex-row flex-align-end"
                  ng-class="{ active:editMode }">
-<!--                <mct-toolbar name="mctToolbar"
+<!--            <mct-toolbar name="mctToolbar"
                              structure="toolbar.structure"
                              ng-model="toolbar.state"
                              class="flex-elem grow">
                 </mct-toolbar>-->
+
                 <!-- from toolbar.html -->
                 <mct-toolbar-x class="flex-elem grows ellipsis">
                     <form novalidate>
@@ -82,30 +80,15 @@
                         </div>
                     </form>
                 </mct-toolbar-x>
-
-
-
-
                 <mct-representation key="'edit-action-buttons'"
                                     mct-object="domainObject"
                                     class='flex-elem conclude-editing'>
                 </mct-representation>
-                <!-- from edit-action-buttons.html -->
-<!--                <span class='flex-elem conclude-editing'>
-                    <span ng-repeat="btn in editBtns">
-                        <a class='s-btn t-{{btn.cssclass}}'
-                           title='{{btn.title}}'
-                           ng-click="doAction(btn.action)"
-                           ng-class="{ major: $index === 0 }">
-                            <span class="title-label">{{btn.title}}</span>
-                        </a>
-                    </span> -->
-                </span>
 
             </div>
             <mct-representation key="representation.selected.key"
                                 mct-object="representation.selected.key && domainObject"
-                                class="flex-elem grow object-holder">
+                                class="flex-elem grows object-holder-main scroll">
             </mct-representation>
         </div>
     </div>
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 4132221fb9..545a98610b 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -125,7 +125,8 @@ mct-container {
     @include ellipsize();
 }
 
-.scrolling {
+.scrolling,
+.scroll {
 	overflow: auto;
 }
 
diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index 75f9c2a872..b51e65d45e 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -6,10 +6,6 @@
 	}
 }
 
-.l-time-controller-visible {
-
-}
-
 mct-include.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index f47be7ab42..0e524d5724 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -221,16 +221,16 @@
 .object-holder {
     @include absPosDefault(0, auto);
     top: $ueTopBarH + $interiorMarginLg;
-    &.l-controls-visible {
-        &.l-time-controller-visible {
-            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
-        }
-    }
 }
 
 .l-object-wrapper {
     @extend .abs;
     top: $ueTopBarH + $interiorMarginLg;
+
+    .object-holder-main {
+        position: relative;
+    }
+
     &.active {
         @include pulseBorder($colorKey, 150ms, 8, 0.5s);
         @include border-radius($controlCr);
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 24112baf7e..10808d7faa 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -410,29 +410,30 @@ mct-container {
   white-space: nowrap; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
-.scrolling {
+.scrolling,
+.scroll {
   overflow: auto; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 133, ../../../../general/res/sass/_global.scss */
 .vscroll {
   overflow-y: auto; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 137, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 140, ../../../../general/res/sass/_global.scss */
+/* line 141, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 144, ../../../../general/res/sass/_global.scss */
+/* line 145, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 149, ../../../../general/res/sass/_global.scss */
+/* line 150, ../../../../general/res/sass/_global.scss */
 .off {
   visibility: hidden;
   opacity: 0;
@@ -442,7 +443,7 @@ mct-container {
   border: 0;
   margin: 0 !important; }
 
-/* line 159, ../../../../general/res/sass/_global.scss */
+/* line 160, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -3459,7 +3460,7 @@ label.checkbox.custom {
   .t-message-list .message-contents .l-message {
     margin-right: 10px; } }
 
-/* line 13, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 9, ../../../../general/res/sass/controls/_time-controller.scss */
 mct-include.l-time-controller {
   overflow: hidden;
   position: absolute;
@@ -3474,7 +3475,7 @@ mct-include.l-time-controller {
   height: 83px;
   min-width: 500px;
   font-size: 0.8rem; }
-  /* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-inputs-holder,
   mct-include.l-time-controller .l-time-range-slider-holder,
   mct-include.l-time-controller .l-time-range-ticks-holder {
@@ -3490,7 +3491,7 @@ mct-include.l-time-controller {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     top: auto; }
-  /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 43, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-slider,
   mct-include.l-time-controller .l-time-range-ticks {
     overflow: visible;
@@ -3503,25 +3504,25 @@ mct-include.l-time-controller {
     height: auto;
     left: 150px;
     right: 150px; }
-  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-inputs-holder {
     height: 33px;
     bottom: 46px;
     padding-top: 5px;
     border-top: 1px solid rgba(153, 153, 153, 0.1); }
-    /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 55, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-inputs-holder .type-icon {
       font-size: 120%;
       vertical-align: middle; }
-    /* line 63, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input,
     mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
       margin-right: 5px; }
-      /* line 66, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
         color: #666666; }
-      /* line 69, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 65, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .t-item-icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.s-icon-btn, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .s-icon-btn.t-item-icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .pager.t-item-icon,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .t-item-icon,
@@ -3533,18 +3534,18 @@ mct-include.l-time-controller {
       .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .pager.t-item-icon {
         font-size: 11px;
         width: 11px; }
-  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 72, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-slider-holder {
     height: 20px;
     bottom: 23px; }
-    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-slider-holder .range-holder {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
       background: none;
       border: none; }
-      /* line 84, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 80, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
         -moz-transform: translateX(50%);
         -ms-transform: translateX(50%);
@@ -3558,19 +3559,19 @@ mct-include.l-time-controller {
         width: 8px;
         height: auto;
         z-index: 2; }
-        /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
           background-color: #00c2ff;
           content: "";
           position: absolute; }
-        /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 96, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
           top: 0;
           right: auto;
           bottom: -10px;
           left: 3px;
           width: 2px; }
-        /* line 106, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 102, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
           -moz-border-radius: 8px;
           -webkit-border-radius: 8px;
@@ -3588,7 +3589,7 @@ mct-include.l-time-controller {
       /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
         background-color: #fff; }
-    /* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-slider-holder:not(:active) .knob,
     mct-include.l-time-controller .l-time-range-slider-holder:not(:active) .range {
       -moz-transition-property: left, right;
@@ -3603,13 +3604,13 @@ mct-include.l-time-controller {
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-  /* line 131, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-ticks-holder {
     height: 20px; }
-    /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 129, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
       border-top: 1px solid rgba(255, 255, 255, 0.2); }
-      /* line 135, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 131, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
         background-color: rgba(255, 255, 255, 0.2);
         border: none;
@@ -3617,10 +3618,10 @@ mct-include.l-time-controller {
         width: 1px;
         margin-left: -1px;
         position: absolute; }
-        /* line 142, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 138, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
           margin-left: 0; }
-        /* line 145, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 141, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
           transform: translateX(-50%);
           -webkit-transform: translateX(-50%);
@@ -3631,10 +3632,10 @@ mct-include.l-time-controller {
           top: 8px;
           white-space: nowrap;
           z-index: 2; }
-  /* line 159, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .knob {
     z-index: 2; }
-    /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 157, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob .range-value {
       -moz-transition-property: opacity, background-color, border-color, color;
       -o-transition-property: opacity, background-color, border-color, color;
@@ -3657,27 +3658,27 @@ mct-include.l-time-controller {
       height: 20px;
       line-height: 20px;
       white-space: nowrap; }
-    /* line 170, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob:hover .range-value {
       color: #0099cc; }
-    /* line 173, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob.knob-l {
       margin-left: -10px; }
-      /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-l .range-value {
         text-align: right;
         right: 10px; }
-    /* line 181, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 177, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob.knob-r {
       margin-right: -10px; }
-      /* line 184, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 180, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-r .range-value {
         left: 10px; }
       /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, mct-include.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
         background-color: #fff; }
 
-/* line 198, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 194, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -4607,13 +4608,13 @@ span.req {
   width: auto;
   height: auto;
   top: 34px; }
-  /* line 225, ../../../../general/res/sass/user-environ/_layout.scss */
-  .object-holder.l-controls-visible.l-time-controller-visible {
-    bottom: 88px; }
 
-/* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 226, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-object-wrapper {
   top: 34px; }
+  /* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+  .l-object-wrapper .object-holder-main {
+    position: relative; }
   /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-object-wrapper.active {
     -moz-animation-name: pulseBorder;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 2caaf07089..70785a3613 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -410,29 +410,30 @@ mct-container {
   white-space: nowrap; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
-.scrolling {
+.scrolling,
+.scroll {
   overflow: auto; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 133, ../../../../general/res/sass/_global.scss */
 .vscroll {
   overflow-y: auto; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 137, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 140, ../../../../general/res/sass/_global.scss */
+/* line 141, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 144, ../../../../general/res/sass/_global.scss */
+/* line 145, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 149, ../../../../general/res/sass/_global.scss */
+/* line 150, ../../../../general/res/sass/_global.scss */
 .off {
   visibility: hidden;
   opacity: 0;
@@ -442,7 +443,7 @@ mct-container {
   border: 0;
   margin: 0 !important; }
 
-/* line 159, ../../../../general/res/sass/_global.scss */
+/* line 160, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -3398,7 +3399,7 @@ label.checkbox.custom {
   .t-message-list .message-contents .l-message {
     margin-right: 10px; } }
 
-/* line 13, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 9, ../../../../general/res/sass/controls/_time-controller.scss */
 mct-include.l-time-controller {
   overflow: hidden;
   position: absolute;
@@ -3413,7 +3414,7 @@ mct-include.l-time-controller {
   height: 83px;
   min-width: 500px;
   font-size: 0.8rem; }
-  /* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-inputs-holder,
   mct-include.l-time-controller .l-time-range-slider-holder,
   mct-include.l-time-controller .l-time-range-ticks-holder {
@@ -3429,7 +3430,7 @@ mct-include.l-time-controller {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     top: auto; }
-  /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 43, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-slider,
   mct-include.l-time-controller .l-time-range-ticks {
     overflow: visible;
@@ -3442,25 +3443,25 @@ mct-include.l-time-controller {
     height: auto;
     left: 150px;
     right: 150px; }
-  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-inputs-holder {
     height: 33px;
     bottom: 46px;
     padding-top: 5px;
     border-top: 1px solid rgba(102, 102, 102, 0.2); }
-    /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 55, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-inputs-holder .type-icon {
       font-size: 120%;
       vertical-align: middle; }
-    /* line 63, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input,
     mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
       margin-right: 5px; }
-      /* line 66, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
         color: #999999; }
-      /* line 69, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 65, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .t-item-icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.s-icon-btn, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .s-icon-btn.t-item-icon, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-input .pager.t-item-icon,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
       mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .t-item-icon,
@@ -3472,18 +3473,18 @@ mct-include.l-time-controller {
       .l-datetime-picker .l-month-year-pager mct-include.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .pager.t-item-icon {
         font-size: 11px;
         width: 11px; }
-  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 72, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-slider-holder {
     height: 20px;
     bottom: 23px; }
-    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-slider-holder .range-holder {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
       background: none;
       border: none; }
-      /* line 84, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 80, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
         -moz-transform: translateX(50%);
         -ms-transform: translateX(50%);
@@ -3497,19 +3498,19 @@ mct-include.l-time-controller {
         width: 8px;
         height: auto;
         z-index: 2; }
-        /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
           background-color: #666;
           content: "";
           position: absolute; }
-        /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 96, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
           top: 0;
           right: auto;
           bottom: -10px;
           left: 3px;
           width: 2px; }
-        /* line 106, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 102, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
           -moz-border-radius: 8px;
           -webkit-border-radius: 8px;
@@ -3527,7 +3528,7 @@ mct-include.l-time-controller {
       /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, mct-include.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
         background-color: #0052b5; }
-    /* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-slider-holder:not(:active) .knob,
     mct-include.l-time-controller .l-time-range-slider-holder:not(:active) .range {
       -moz-transition-property: left, right;
@@ -3542,13 +3543,13 @@ mct-include.l-time-controller {
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-  /* line 131, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .l-time-range-ticks-holder {
     height: 20px; }
-    /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 129, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
       border-top: 1px solid rgba(0, 0, 0, 0.2); }
-      /* line 135, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 131, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
         background-color: rgba(0, 0, 0, 0.2);
         border: none;
@@ -3556,10 +3557,10 @@ mct-include.l-time-controller {
         width: 1px;
         margin-left: -1px;
         position: absolute; }
-        /* line 142, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 138, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
           margin-left: 0; }
-        /* line 145, ../../../../general/res/sass/controls/_time-controller.scss */
+        /* line 141, ../../../../general/res/sass/controls/_time-controller.scss */
         mct-include.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
           transform: translateX(-50%);
           -webkit-transform: translateX(-50%);
@@ -3570,10 +3571,10 @@ mct-include.l-time-controller {
           top: 8px;
           white-space: nowrap;
           z-index: 2; }
-  /* line 159, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
   mct-include.l-time-controller .knob {
     z-index: 2; }
-    /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 157, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob .range-value {
       -moz-transition-property: opacity, background-color, border-color, color;
       -o-transition-property: opacity, background-color, border-color, color;
@@ -3596,27 +3597,27 @@ mct-include.l-time-controller {
       height: 20px;
       line-height: 20px;
       white-space: nowrap; }
-    /* line 170, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob:hover .range-value {
       color: rgba(0, 153, 204, 0.7); }
-    /* line 173, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob.knob-l {
       margin-left: -10px; }
-      /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-l .range-value {
         text-align: right;
         right: 10px; }
-    /* line 181, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 177, ../../../../general/res/sass/controls/_time-controller.scss */
     mct-include.l-time-controller .knob.knob-r {
       margin-right: -10px; }
-      /* line 184, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 180, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-r .range-value {
         left: 10px; }
       /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
       mct-include.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, mct-include.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
         background-color: #0052b5; }
 
-/* line 198, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 194, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -4529,13 +4530,13 @@ span.req {
   width: auto;
   height: auto;
   top: 34px; }
-  /* line 225, ../../../../general/res/sass/user-environ/_layout.scss */
-  .object-holder.l-controls-visible.l-time-controller-visible {
-    bottom: 88px; }
 
-/* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 226, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-object-wrapper {
   top: 34px; }
+  /* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+  .l-object-wrapper .object-holder-main {
+    position: relative; }
   /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-object-wrapper.active {
     -moz-animation-name: pulseBorder;
diff --git a/platform/features/conductor/src/ConductorRepresenter.js b/platform/features/conductor/src/ConductorRepresenter.js
index 957e6af9ba..c7b58e6de9 100644
--- a/platform/features/conductor/src/ConductorRepresenter.js
+++ b/platform/features/conductor/src/ConductorRepresenter.js
@@ -30,7 +30,7 @@ define(
                 "<mct-include key=\"'time-conductor'\" ",
                 "ng-model='ngModel' ",
                 "parameters='parameters' ",
-                "class='l-time-controller'>",
+                "class='flex-elem flex-fixed l-time-controller'>",
                 "</mct-include>"
             ].join(''),
             THROTTLE_MS = 200,