From 7a7877d7c4b7907b4f0a782b26ed613ea12e2121 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Wed, 13 Apr 2016 16:17:17 -0700
Subject: [PATCH] [Conductor] Add basic style for phone

Add styling for time conductor on mobile that removes slider and rearranges
inputs to utilize space more effectively.

https://github.com/nasa/openmct/issues/318
---
 .../res/sass/controls/_time-controller.scss   | 72 ++++++++++++++++++-
 .../res/templates/time-conductor.html         |  2 +-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index 49d996102d..fb37df77cf 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -6,6 +6,10 @@
 	}
 }
 
+// Question for Charles: I believe this mct-include is unnecessary here.  It
+// adds more specificity to the selector and makes the later override for
+// mobile styling also require more specificity. Without knowing whether or
+// not there is a specific reason this specifier is used, I won't remove it.
 mct-include.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
@@ -185,6 +189,13 @@ mct-include.l-time-controller {
 			}
 		}
 	}
+
+	.l-time-domain-selector {
+		position: absolute;
+		right: 0px;
+		bottom: 46px;
+	}
+
 }
 
 //.slot.range-holder {
@@ -196,4 +207,63 @@ mct-include.l-time-controller {
 	border-radius: $controlCr;
 	background-color: $colorInputBg;
 	padding: 1px 1px 0 $interiorMargin;
-}
\ No newline at end of file
+}
+
+@include phoneandtablet {
+	mct-include.l-time-controller, mct-include.l-time-range-inputs-holder {
+		min-width: 0px;
+	}
+
+	mct-include.l-time-controller {
+		height: 48px;
+
+		.l-time-range-inputs-holder {
+			bottom: 24px;
+		}
+
+		.l-time-domain-selector {
+			width: 33%;
+			bottom: -9px;
+			select {
+				height: 25px;
+				margin-bottom: 0px;
+			}
+		}
+
+		.l-time-range-slider-holder, .l-time-range-ticks-holder {
+			display: none;
+		}
+
+		.time-range-start, .time-range-end, {
+			width: 100%;
+		}
+
+		.l-time-range-inputs-holder {
+			.l-time-range-input {
+				display: block;
+				margin-bottom: 5px;
+				.s-btn {
+					width: 66%;
+					padding-right: 18px;
+					white-space: nowrap;
+					input {
+						width: 100%;
+					}
+				}
+			}
+			.l-time-range-inputs-elem {
+				display: none;
+				&.lbl {
+					display: block;
+					height: 25px;
+					width: 33%;
+					right: 0px;
+					margin: 0;
+					top: 5px;
+					line-height: 25px;
+					position: absolute;
+				}
+			}
+		}
+	}
+}
diff --git a/platform/features/conductor/res/templates/time-conductor.html b/platform/features/conductor/res/templates/time-conductor.html
index 16cc6296c8..1a2392b1e3 100644
--- a/platform/features/conductor/res/templates/time-conductor.html
+++ b/platform/features/conductor/res/templates/time-conductor.html
@@ -6,6 +6,6 @@
              ng-model='ngModel'
              field="'domain'"
              options="ngModel.options"
-             style="position: absolute; right: 0px; bottom: 46px;"
+             class="l-time-domain-selector"
              >
 </mct-control>