From 73c2c01def9b063ca444bf2b1be42a2d7386fede Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 11 May 2016 11:32:39 -0700
Subject: [PATCH] [Frontend]  Layout and styling of Time Conductor

open #889
open #298
Fixes for mobile;
Moved popup z-index def into sass;
Datetime picker compressed for
better fit in mobile phone;
Removed hours selector from datetime
picker to enable better fit in mobile;
---
 .../commonUI/general/res/sass/_archetypes.scss     |  5 +++++
 .../general/res/sass/controls/_controls.scss       | 14 +++++++++++++-
 .../res/templates/controls/datetime-field.html     |  3 +--
 .../commonUI/general/src/directives/MCTPopup.js    |  5 +----
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss
index 84045c2520..4abad717ea 100644
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -145,3 +145,8 @@
 .flex-justify-end {
     @include justify-content(flex-end);
 }
+
+/********************************************* POPUPS */
+.t-popup {
+    z-index: 75;
+}
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 6374efaaa0..51f35b505e 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -434,7 +434,6 @@ body.desktop .object-header {
     @include user-select(none);
     font-size: 0.8rem;
     padding: $interiorMarginLg !important;
-    width: 230px;
     .l-month-year-pager {
         $pagerW: 20px;
         height: $r1H;
@@ -526,6 +525,19 @@ body.desktop .object-header {
     }
 }
 
+@include phone {
+    .l-datetime-picker {
+        padding: $interiorMargin !important;
+    }
+    .l-calendar {
+        ul.l-cal-row {
+            li {
+                padding: 2px $interiorMargin;
+            }
+        }
+    }
+}
+
 /******************************************************** TEXTAREA */
 textarea {
     @include nice-textarea($colorInputBg, $colorInputFg);
diff --git a/platform/commonUI/general/res/templates/controls/datetime-field.html b/platform/commonUI/general/res/templates/controls/datetime-field.html
index e890843754..47551fa25b 100644
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-field.html
@@ -37,8 +37,7 @@
         <div mct-click-elsewhere="picker.active = false">
             <mct-control key="'datetime-picker'"
                          ng-model="pickerModel"
-                         field="'value'"
-                         options="{ hours: true }">
+                         field="'value'">
             </mct-control>
         </div>
     </mct-popup>
diff --git a/platform/commonUI/general/src/directives/MCTPopup.js b/platform/commonUI/general/src/directives/MCTPopup.js
index e96c1c0327..f1c6ca79d6 100644
--- a/platform/commonUI/general/src/directives/MCTPopup.js
+++ b/platform/commonUI/general/src/directives/MCTPopup.js
@@ -49,10 +49,7 @@ define(
                     position = [ rect.left, rect.top ],
                     popup = popupService.display(div, position);
 
-                // TODO: Handle in CSS;
-                //       https://github.com/nasa/openmctweb/issues/298
-                div.css('z-index', 75);
-
+                div.addClass('t-popup');
                 transclude(function (clone) {
                     div.append(clone);
                 });