Skip to content

Commit

Permalink
[Frontend] Time Conductor v2 styling
Browse files Browse the repository at this point in the history 
Fixes #933
Changed desktop and mobile RT UI to display
end datetime and hide start;
WIP: mobile styling for main UI of TC;
  • Loading branch information
@charlesh88
charlesh88 committed Jul 20, 2016
1 parent 2124fe0 commit ff16784
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 64 deletions.
101 changes: 53 additions & 48 deletions platform/features/conductor-v2/res/sass/time-conductor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
}

.l-time-conductor-inputs-holder,
.l-time-conductor-ticks,
.l-time-conductor-inputs-and-ticks,
.l-time-conductor-zoom-w {
font-size: 0.8rem;
}
Expand All @@ -165,6 +165,8 @@ $ueTimeConductorH: (25px, 6px, 20px);
$wBgColor: $colorBodyBg;

height: $r1H;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
.l-time-range-w {
// Wraps a datetime text input field
Expand Down Expand Up @@ -195,7 +197,7 @@ $ueTimeConductorH: (25px, 6px, 20px);
}
}

.l-time-conductor-ticks {
.l-time-conductor-inputs-and-ticks {
$c: $colorTick;
height: $r1H;
mct-conductor-axis {
Expand Down Expand Up @@ -286,15 +288,20 @@ $ueTimeConductorH: (25px, 6px, 20px);
padding: $inputTextP;
}
}
&.start-date {
pointer-events: none;
}
.icon-calendar {
display: none;
}
&.end-date {
&.start-date {
display: none;
}
&.end-date {
pointer-events: none;
input[type="text"] {
color: $colorTimeCondKeyBg;
margin-right: $interiorMargin;
text-align: right;
}
}
}
}

Expand Down Expand Up @@ -346,64 +353,62 @@ $ueTimeConductorH: (25px, 6px, 20px);

/******************************************************************** MOBILE */

@include phoneandtablet {
//@include phoneandtablet {}

@include phone {
.l-time-conductor {
min-width: 0;
.l-time-range-slider-holder,
.l-time-conductor-ticks {
display: none;
}
.l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
//TODO: mode menu smaller, hide right side
}
}

@include phone {
@include phonePortrait {
.l-time-conductor {
.l-time-conductor-inputs-holder {
&.l-flex-row,
.l-flex-row {
@include align-items(flex-start);
}
.l-time-range-inputs-elem {
&.type-icon {
margin-top: 3px;
}
}
.l-data-visualization,
.l-time-conductor-zoom-w,
.time-delta {
display: none;
}

.l-time-conductor-inputs-and-ticks {
height: auto !important;
.l-time-conductor-inputs-holder {
@include flex-direction(column);
.l-time-range-input-w:not(:first-child) {
position: relative;
height: auto !important;

.l-time-range-w {
background-image: none !important;
display: block;
height: auto !important;
padding: 0 !important;
position: relative;
text-align: left;
&:not(:first-child) {
margin-top: $interiorMargin;
}
margin-right: 0;
}
.l-time-range-inputs-elem {
&.lbl {
display: none;
}
}
}
}
}
}

@include phonePortrait {
.l-time-conductor {
.l-time-conductor-inputs-holder {
.l-time-conductor-inputs-holder {
@include flex(1 1 auto);
padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
.flex-elem {
@include flex(1 1 auto);
width: 100%;
}
input[type="text"] {
width: 100%;
// Realtime, latest modes
&.realtime-mode,
&.latest-mode {
// TODO: hide all of start-w
.l-time-conductor-inputs-and-ticks {
.l-time-range-w {
&.start-w {
display: none;
}
&.end-w {
margin-top: 0;
.end-date input[type="text"] {
margin: 0;
text-align: left;
}
}
}
}
}
}
.l-time-domain-selector {
right: auto;
left: 20px;
}
}
33 changes: 17 additions & 16 deletions platform/features/conductor-v2/res/templates/time-conductor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@

<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
<!-- Holds inputs and ticks -->
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
<form class="abs l-time-conductor-inputs-holder"
<div class="l-time-conductor-inputs-and-ticks l-row-elem l-flex-row flex-elem no-margin">
<form class="l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(formModel)">
<span class="l-time-range-w start-w">
<span class="l-time-range-input-w start-date">
Expand All @@ -28,6 +28,7 @@
</span>
<span class="l-time-range-input-w time-delta start-delta"
ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
-
<mct-control key="'datetime-field'"
structure="{
format: 'duration',
Expand All @@ -41,20 +42,6 @@
</span>
</span>
<span class="l-time-range-w end-w">
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">

<mct-control key="'datetime-field'"
structure="{
format: 'duration',
validate: tcController.validation.validateEndDelta
}"
ng-model="formModel"
ng-blur="tcController.updateDeltasFromForm(formModel)"
field="'endDelta'"
class="hrs-min-input">
</mct-control>
</span>
<span class="l-time-range-input-w end-date"
ng-controller="ToggleController as t2">
<mct-control key="'datetime-field'"
Expand All @@ -69,6 +56,20 @@
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+
<mct-control key="'datetime-field'"
structure="{
format: 'duration',
validate: tcController.validation.validateEndDelta
}"
ng-model="formModel"
ng-blur="tcController.updateDeltasFromForm(formModel)"
field="'endDelta'"
class="hrs-min-input">
</mct-control>
</span>
</span>

<input type="submit" class="hidden">
Expand Down

0 comments on commit ff16784

Please sign in to comment.