[Frontend] Layout and styling of Time Conductor
open #889 open #298 Fixes for mobile; Moved popup z-index def into sass; Datetime picker compressed for better fit in mobile phone; Removed hours selector from datetime picker to enable better fit in mobile;
This commit is contained in:
@@ -145,3 +145,8 @@
|
|||||||
.flex-justify-end {
|
.flex-justify-end {
|
||||||
@include justify-content(flex-end);
|
@include justify-content(flex-end);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/********************************************* POPUPS */
|
||||||
|
.t-popup {
|
||||||
|
z-index: 75;
|
||||||
|
}
|
||||||
|
|||||||
@@ -434,7 +434,6 @@ body.desktop .object-header {
|
|||||||
@include user-select(none);
|
@include user-select(none);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
padding: $interiorMarginLg !important;
|
padding: $interiorMarginLg !important;
|
||||||
width: 230px;
|
|
||||||
.l-month-year-pager {
|
.l-month-year-pager {
|
||||||
$pagerW: 20px;
|
$pagerW: 20px;
|
||||||
height: $r1H;
|
height: $r1H;
|
||||||
@@ -526,6 +525,19 @@ body.desktop .object-header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include phone {
|
||||||
|
.l-datetime-picker {
|
||||||
|
padding: $interiorMargin !important;
|
||||||
|
}
|
||||||
|
.l-calendar {
|
||||||
|
ul.l-cal-row {
|
||||||
|
li {
|
||||||
|
padding: 2px $interiorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/******************************************************** TEXTAREA */
|
/******************************************************** TEXTAREA */
|
||||||
textarea {
|
textarea {
|
||||||
@include nice-textarea($colorInputBg, $colorInputFg);
|
@include nice-textarea($colorInputBg, $colorInputFg);
|
||||||
|
|||||||
@@ -37,8 +37,7 @@
|
|||||||
<div mct-click-elsewhere="picker.active = false">
|
<div mct-click-elsewhere="picker.active = false">
|
||||||
<mct-control key="'datetime-picker'"
|
<mct-control key="'datetime-picker'"
|
||||||
ng-model="pickerModel"
|
ng-model="pickerModel"
|
||||||
field="'value'"
|
field="'value'">
|
||||||
options="{ hours: true }">
|
|
||||||
</mct-control>
|
</mct-control>
|
||||||
</div>
|
</div>
|
||||||
</mct-popup>
|
</mct-popup>
|
||||||
|
|||||||
@@ -49,10 +49,7 @@ define(
|
|||||||
position = [ rect.left, rect.top ],
|
position = [ rect.left, rect.top ],
|
||||||
popup = popupService.display(div, position);
|
popup = popupService.display(div, position);
|
||||||
|
|
||||||
// TODO: Handle in CSS;
|
div.addClass('t-popup');
|
||||||
// https://github.com/nasa/openmctweb/issues/298
|
|
||||||
div.css('z-index', 75);
|
|
||||||
|
|
||||||
transclude(function (clone) {
|
transclude(function (clone) {
|
||||||
div.append(clone);
|
div.append(clone);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user