From 22a5122ab71d69ceb124aba3e7ed0a3f62d0d055 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Wed, 13 Apr 2016 17:17:52 -0700
Subject: [PATCH] [Conductor] Style for Phone and Tablet

Specify styles for time conductor on phone an tablet to hide the slider and
utilize space better.

https://github.com/nasa/openmct/issues/318
---
 .../res/sass/controls/_time-controller.scss   | 147 ++++++++++++++++--
 1 file changed, 130 insertions(+), 17 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index fb37df77cf..ec7aa33cb3 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -6,11 +6,11 @@
 	}
 }
 
-// Question for Charles: I believe this mct-include is unnecessary here.  It
+// Question for Charles: I believe this  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 {
+.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
 	$knobM: ($sliderKnobW + $knobHOffset) * -1;
@@ -210,20 +210,13 @@ mct-include.l-time-controller {
 }
 
 @include phoneandtablet {
-	mct-include.l-time-controller, mct-include.l-time-range-inputs-holder {
+	.l-time-controller, .l-time-range-inputs-holder {
 		min-width: 0px;
 	}
 
-	mct-include.l-time-controller {
-		height: 48px;
-
-		.l-time-range-inputs-holder {
-			bottom: 24px;
-		}
+	.l-time-controller {
 
 		.l-time-domain-selector {
-			width: 33%;
-			bottom: -9px;
 			select {
 				height: 25px;
 				margin-bottom: 0px;
@@ -241,9 +234,7 @@ mct-include.l-time-controller {
 		.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 {
@@ -252,14 +243,44 @@ mct-include.l-time-controller {
 				}
 			}
 			.l-time-range-inputs-elem {
-				display: none;
+
+			}
+		}
+	}
+}
+
+@include phone {
+	.l-time-controller {
+		height: 48px;
+
+		.l-time-range-inputs-holder {
+			bottom: 24px;
+		}
+
+		.l-time-domain-selector {
+			width: 33%;
+			bottom: -9px;
+		}
+
+		.l-time-range-inputs-holder {
+			.l-time-range-input {
+				margin-bottom: 5px;
+				.s-btn {
+					width: 66%;
+				}
+			}
+			.l-time-range-inputs-elem {
+				&.ui-symbol {
+					display: none;
+				}
+
 				&.lbl {
-					display: block;
-					height: 25px;
 					width: 33%;
 					right: 0px;
-					margin: 0;
 					top: 5px;
+					display: block;
+					height: 25px;
+					margin: 0;
 					line-height: 25px;
 					position: absolute;
 				}
@@ -267,3 +288,95 @@ mct-include.l-time-controller {
 		}
 	}
 }
+
+
+@include tablet {
+	.l-time-controller {
+		height: 17px;
+
+		.l-time-range-inputs-holder {
+			bottom: -7px; // 24 to -> -7 = -31px
+			left: -5px;
+		}
+
+		.l-time-domain-selector {
+			width: 23%;
+			right: -4px;
+			bottom: -10px;
+		}
+
+		.l-time-range-inputs-holder {
+			.l-time-range-input {
+				float: left;
+				.s-btn {
+					width: 100%;
+					padding-left: 4px;
+				}
+			}
+		}
+	}
+}
+
+@include tabletLandscape {
+	.l-time-controller {
+		height: 17px;
+
+		.l-time-range-inputs-holder {
+			bottom: -7px; // 24 to -> -7 = -31px
+		}
+
+		.l-time-domain-selector {
+			width: 23%;
+			right: auto;
+			bottom: -10px;
+			left: 391px;
+		}
+
+		.l-time-range-inputs-holder {
+			.l-time-range-inputs-elem {
+				&.ui-symbol, &.lbl {
+					display: block;
+					float: left;
+					line-height: 25px;
+				}
+			}
+		}
+	}
+
+	.pane-tree-hidden .l-time-controller {
+		.l-time-domain-selector {
+			left: 667px;
+		}
+		.l-time-range-inputs-holder {
+			padding-left: 277px;
+		}
+	}
+}
+@include tabletPortrait {
+	.l-time-controller {
+		height: 17px;
+
+		.l-time-range-inputs-holder {
+			bottom: -7px;
+			left: -5px;
+		}
+
+		.l-time-domain-selector {
+			width: 23%;
+			right: -4px;
+			bottom: -10px;
+		}
+
+		.l-time-range-inputs-holder {
+			.l-time-range-input {
+				width: 38%;
+				float: left;
+			}
+			.l-time-range-inputs-elem {
+				&.ui-symbol, &.lbl {
+					display: none;
+				}
+			}
+		}
+	}
+}