[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
This commit is contained in:
Pete Richards 2016-04-13 16:17:17 -07:00
parent 69c059c943
commit 7a7877d7c4
2 changed files with 72 additions and 2 deletions

View File

@ -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;
}
}
@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;
}
}
}
}
}

View File

@ -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>