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

[Frontend] Modified .tick-labels in Timelines

Browse Source 
open #909
- Changed markup to not use plot .tick-label class;
- Changed CSS accordingly;
- Fixed alignment (clipped bottom value) by
refactoring to use flex-box layout for tick labels;
This commit is contained in:
Charles Hacskaylo 2016-05-10 20:41:52 -07:00
parent 3727b287a1
commit a58fe1f81c
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
platform/features/timeline/res/sass/_timelines.scss
View File

@ -158,14 +158,18 @@
top: 20px; bottom: 5px; top: 20px; bottom: 5px;
.l-labels-holder { .l-labels-holder {
@include absPosDefault(); @include absPosDefault();
@include justify-content(space-between);
left: $m; left: $m;
.tick-label.tick-label-y { .t-resource-graph-tick-label {
font-size: 0.9em;
&.tick-label-y {
text-align: left; text-align: left;
} }
} }
} }
} }
} }
}
&.l-pane-l { &.l-pane-l {
right: auto; right: auto;

8
platform/features/timeline/res/templates/resource-graph-labels.html
View File

@ -23,14 +23,14 @@
{{parameters.title}} {{parameters.title}}
</div> </div>
<div class="l-graph-area"> <div class="l-graph-area">
<div class="l-labels-holder"> <div class="l-labels-holder l-flex-col">
<div class="tick-label tick-label-y tick-label-1" style="top: 0;"> <div class="t-resource-graph-tick-label tick-label-y flex-elem">
{{parameters.high}} {{parameters.high}}
</div> </div>
<div class="tick-label tick-label-y" style="top: 50%; margin-top: -0.5em; height: 1em;"> <div class="t-resource-graph-tick-label tick-label-y flex-elem">
{{parameters.middle}} {{parameters.middle}}
</div> </div>
<div class="tick-label tick-label-y" style="top: auto; bottom: 4px; height: 1em;"> <div class="t-resource-graph-tick-label tick-label-y flex-elem">
{{parameters.low}} {{parameters.low}}
</div> </div>
</div> </div>