From a58fe1f81c93ebb863e5653dc95df25c2c428876 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 10 May 2016 20:41:52 -0700
Subject: [PATCH] [Frontend] Modified .tick-labels in Timelines

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;
---
 platform/features/timeline/res/sass/_timelines.scss       | 8 ++++++--
 .../timeline/res/templates/resource-graph-labels.html     | 8 ++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
index 0348839263..251008a64c 100644
--- a/platform/features/timeline/res/sass/_timelines.scss
+++ b/platform/features/timeline/res/sass/_timelines.scss
@@ -158,9 +158,13 @@
 		            top: 20px; bottom: 5px;
 		            .l-labels-holder {
 			            @include absPosDefault();
+                        @include justify-content(space-between);
 			            left: $m;
-			            .tick-label.tick-label-y {
-				            text-align: left;
+			            .t-resource-graph-tick-label {
+                            font-size: 0.9em;
+                            &.tick-label-y {
+                                text-align: left;
+                            }
 			            }
 		            }
 	            }
diff --git a/platform/features/timeline/res/templates/resource-graph-labels.html b/platform/features/timeline/res/templates/resource-graph-labels.html
index 192188f554..038c2073eb 100644
--- a/platform/features/timeline/res/templates/resource-graph-labels.html
+++ b/platform/features/timeline/res/templates/resource-graph-labels.html
@@ -23,14 +23,14 @@
     {{parameters.title}}
 </div>
 <div class="l-graph-area">
-	<div class="l-labels-holder">
-		<div class="tick-label tick-label-y tick-label-1" style="top: 0;">
+	<div class="l-labels-holder l-flex-col">
+		<div class="t-resource-graph-tick-label tick-label-y flex-elem">
             {{parameters.high}}
         </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}}
         </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}}
         </div>
 	</div>