mirror of
https://github.com/nasa/openmct.git
synced 2025-06-13 04:38:15 +00:00
[Frontend] Time Conductor mobile
open #889 - Major refactoring of mobile approach, leveraging flex-box layout change;
This commit is contained in:
Charles Hacskaylo
@ -25,7 +25,6 @@
|
|||||||
{
|
{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
//top: auto;
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-top: $interiorMargin;
|
margin-top: $interiorMargin;
|
||||||
}
|
}
|
||||||
@ -39,7 +38,8 @@
|
|||||||
.l-time-range-inputs-holder {
|
.l-time-range-inputs-holder {
|
||||||
border-top: 1px solid $colorInteriorBorder;
|
border-top: 1px solid $colorInteriorBorder;
|
||||||
padding-top: $interiorMargin;
|
padding-top: $interiorMargin;
|
||||||
&.l-flex-row {
|
&.l-flex-row,
|
||||||
|
.l-flex-row {
|
||||||
@include align-items(center);
|
@include align-items(center);
|
||||||
.flex-elem {
|
.flex-elem {
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -192,7 +192,7 @@
|
|||||||
.l-time-domain-selector {
|
.l-time-domain-selector {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
bottom: $r2H + $r3H + $interiorMargin;
|
top: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -206,172 +206,61 @@
|
|||||||
/******************************************************************** MOBILE */
|
/******************************************************************** MOBILE */
|
||||||
|
|
||||||
@include phoneandtablet {
|
@include phoneandtablet {
|
||||||
.l-time-controller, .l-time-range-inputs-holder {
|
.l-time-controller {
|
||||||
min-width: 0px;
|
min-width: 0;
|
||||||
}
|
.l-time-range-slider-holder,
|
||||||
|
.l-time-range-ticks-holder {
|
||||||
.l-time-controller {
|
display: none;
|
||||||
|
}
|
||||||
.l-time-domain-selector {
|
}
|
||||||
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;
|
|
||||||
.s-btn {
|
|
||||||
padding-right: 18px;
|
|
||||||
white-space: nowrap;
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.l-time-range-inputs-elem {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include phone {
|
@include phone {
|
||||||
.l-time-controller {
|
.l-time-controller {
|
||||||
height: 48px;
|
.l-time-range-inputs-holder {
|
||||||
|
&.l-flex-row,
|
||||||
.l-time-range-inputs-holder {
|
.l-flex-row {
|
||||||
bottom: 24px;
|
@include align-items(flex-start);
|
||||||
}
|
}
|
||||||
|
.l-time-range-inputs-elem {
|
||||||
.l-time-domain-selector {
|
&.type-icon {
|
||||||
width: 33%;
|
margin-top: 3px;
|
||||||
bottom: -9px;
|
}
|
||||||
}
|
}
|
||||||
|
.t-inputs-w {
|
||||||
.l-time-range-inputs-holder {
|
@include flex-direction(column);
|
||||||
.l-time-range-input {
|
.l-time-range-input-w:not(:first-child) {
|
||||||
margin-bottom: 5px;
|
&:not(:first-child) {
|
||||||
.s-btn {
|
margin-top: $interiorMargin;
|
||||||
width: 66%;
|
}
|
||||||
}
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.l-time-range-inputs-elem {
|
.l-time-range-inputs-elem {
|
||||||
&.ui-symbol {
|
&.lbl { display: none; }
|
||||||
display: none;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&.lbl {
|
}
|
||||||
width: 33%;
|
|
||||||
right: 0px;
|
|
||||||
top: 5px;
|
|
||||||
display: block;
|
|
||||||
height: 25px;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 25px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include tablet {
|
@include phonePortrait {
|
||||||
.l-time-controller {
|
.l-time-controller {
|
||||||
height: 17px;
|
.l-time-range-inputs-holder {
|
||||||
|
.t-inputs-w {
|
||||||
.l-time-range-inputs-holder {
|
@include flex(1 1 auto);
|
||||||
bottom: -7px;
|
padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
|
||||||
left: -5px;
|
.flex-elem {
|
||||||
}
|
@include flex(1 1 auto);
|
||||||
|
width: 100%;
|
||||||
.l-time-domain-selector {
|
}
|
||||||
width: 23%;
|
input[type="text"] {
|
||||||
right: -4px;
|
width: 100%;
|
||||||
bottom: -10px;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.l-time-range-inputs-holder {
|
}
|
||||||
.l-time-range-input {
|
.l-time-domain-selector {
|
||||||
float: left;
|
right: auto;
|
||||||
.s-btn {
|
left: 20px;
|
||||||
width: 100%;
|
}
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include tabletLandscape {
|
|
||||||
.l-time-controller {
|
|
||||||
height: 17px;
|
|
||||||
|
|
||||||
.l-time-range-inputs-holder {
|
|
||||||
bottom: -7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,34 +23,35 @@
|
|||||||
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
||||||
ng-submit="trCtrl.updateBoundsFromForm()">
|
ng-submit="trCtrl.updateBoundsFromForm()">
|
||||||
<span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">C</span>
|
<span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">C</span>
|
||||||
<span class="l-time-range-input-w flex-elem">
|
<span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
|
||||||
<mct-control key="'datetime-field'"
|
<span class="l-time-range-input-w flex-elem">
|
||||||
structure="{
|
<mct-control key="'datetime-field'"
|
||||||
format: parameters.format,
|
structure="{
|
||||||
validate: trCtrl.validateStart
|
format: parameters.format,
|
||||||
}"
|
validate: trCtrl.validateStart
|
||||||
ng-model="formModel"
|
}"
|
||||||
ng-blur="trCtrl.updateBoundsFromForm()"
|
ng-model="formModel"
|
||||||
field="'start'"
|
ng-blur="trCtrl.updateBoundsFromForm()"
|
||||||
class="time-range-start">
|
field="'start'"
|
||||||
</mct-control>
|
class="time-range-start">
|
||||||
|
</mct-control>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="l-time-range-inputs-elem lbl flex-elem">to</span>
|
||||||
|
|
||||||
|
<span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
|
||||||
|
<mct-control key="'datetime-field'"
|
||||||
|
structure="{
|
||||||
|
format: parameters.format,
|
||||||
|
validate: trCtrl.validateEnd
|
||||||
|
}"
|
||||||
|
ng-model="formModel"
|
||||||
|
ng-blur="trCtrl.updateBoundsFromForm()"
|
||||||
|
field="'end'"
|
||||||
|
class="time-range-end">
|
||||||
|
</mct-control>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="l-time-range-inputs-elem lbl flex-elem">to</span>
|
|
||||||
|
|
||||||
<span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
|
|
||||||
<mct-control key="'datetime-field'"
|
|
||||||
structure="{
|
|
||||||
format: parameters.format,
|
|
||||||
validate: trCtrl.validateEnd
|
|
||||||
}"
|
|
||||||
ng-model="formModel"
|
|
||||||
ng-blur="trCtrl.updateBoundsFromForm()"
|
|
||||||
field="'end'"
|
|
||||||
class="time-range-end">
|
|
||||||
</mct-control>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<input type="submit" class="hidden">
|
<input type="submit" class="hidden">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user