ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 00:23:54 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Conductor] Style for Phone and Tablet

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

https://github.com/nasa/openmct/issues/318
This commit is contained in:
Pete Richards 2016-04-13 17:17:52 -07:00
parent 7a7877d7c4
commit 22a5122ab7
1 changed files with 130 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -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 // adds more specificity to the selector and makes the later override for
// mobile styling also require more specificity. Without knowing whether or // 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. // 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; $minW: 500px;
$knobHOffset: 0px; $knobHOffset: 0px;
$knobM: ($sliderKnobW + $knobHOffset) * -1; $knobM: ($sliderKnobW + $knobHOffset) * -1;
@ -210,20 +210,13 @@ mct-include.l-time-controller {
} }
@include phoneandtablet { @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; min-width: 0px;
} }
mct-include.l-time-controller { .l-time-controller {
height: 48px;
.l-time-range-inputs-holder {
bottom: 24px;
}
.l-time-domain-selector { .l-time-domain-selector {
width: 33%;
bottom: -9px;
select { select {
height: 25px; height: 25px;
margin-bottom: 0px; margin-bottom: 0px;
@ -241,9 +234,7 @@ mct-include.l-time-controller {
.l-time-range-inputs-holder { .l-time-range-inputs-holder {
.l-time-range-input { .l-time-range-input {
display: block; display: block;
margin-bottom: 5px;
.s-btn { .s-btn {
width: 66%;
padding-right: 18px; padding-right: 18px;
white-space: nowrap; white-space: nowrap;
input { input {
@ -252,14 +243,44 @@ mct-include.l-time-controller {
} }
} }
.l-time-range-inputs-elem { .l-time-range-inputs-elem {
}
}
}
}
@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; display: none;
}
&.lbl { &.lbl {
display: block;
height: 25px;
width: 33%; width: 33%;
right: 0px; right: 0px;
margin: 0;
top: 5px; top: 5px;
display: block;
height: 25px;
margin: 0;
line-height: 25px; line-height: 25px;
position: absolute; 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;
}
}
}
}
}