From c2f6c03ae6400a42c11dfe6f3ffb5aacfbb493f7 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Sat, 22 Jun 2019 19:56:53 +0300
Subject: [PATCH] refactor(traffic): align content

---
 .../traffic-bar/traffic-bar.component.html    | 23 ++----
 .../traffic-bar/traffic-bar.component.scss    | 77 ++++++++++---------
 .../traffic-front-card.component.html         |  4 +-
 .../traffic-front-card.component.scss         | 26 ++-----
 4 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html
index 8f76cb29..774a04a7 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html
@@ -1,16 +1,9 @@
-<div class="traffic-bar">
-  <div class="period-from">{{ barData.prevDate }}</div>
-  <div class="vertical-progress-bar">
-    <div class="progress-line"
-         [style.height.%]="barData.prevValue">
-    </div>
-  </div>
-  <div class="vertical-progress-bar">
-    <div class="progress-line"
-         [style.height.%]="barData.nextValue"
-         [class.success]="successDelta"
-         [class.failure]="!successDelta">
-    </div>
-  </div>
-  <div class="period-to">{{ barData.nextDate }}</div>
+<span class="value-prev caption">{{ barData.prevDate }}</span>
+<div class="progress-line-container" [style.height.%]="barData.prevValue">
+  <div class="progress-line-prev"></div>
 </div>
+<div class="progress-line-container" [style.height.%]="barData.nextValue">
+  <div class="progress-line-now" [class.success]="successDelta" [class.failure]="!successDelta">
+  </div>
+</div>
+<span class="value-now caption">{{ barData.nextDate }}</span>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
index 3e33bc5b..424bbb40 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
@@ -1,49 +1,54 @@
 @import '../../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  height: nb-theme(list-item-line-height);
+  max-width: 7rem;
 
-  .traffic-bar {
-    display: flex;
-    align-self: stretch;
-    position: relative;
+  .value-prev,
+  .value-now {
+    flex: 1;
+  }
+
+  .progress-line-container {
+    flex: 1;
+    margin-bottom: 0.1875rem;
+  }
+
+  .progress-line-prev,
+  .progress-line-now {
     height: 100%;
+    width: 0.7rem;
+  }
 
-    > * {
-      margin-left: 0.5rem;
+  .progress-line-prev {
+    background-color: nb-theme(border-basic-color-3);
+    @include nb-ltr {
+      margin-left: auto;
+      margin-right: 0.25rem;
+    }
+    @include nb-rtl {
+      margin-left: 0.25rem;
+      margin-right: auto;
     }
   }
 
-  .period-from, .period-to {
-    align-self: flex-end;
-    font-size: 1rem;
-    line-height: 0.8;
-  }
+  .progress-line-now {
+    @include nb-ltr {
+      margin-left: 0.25rem;
+      margin-right: auto;
+    }
+    @include nb-rtl {
+      margin-left: auto;
+      margin-right: 0.25rem;
+    }
 
-  .period-from {
-    position: absolute;
-    @include nb-ltr(right, 100%);
-    @include nb-rtl(left, 100%);
-    bottom: 0;
-    white-space: nowrap;
-  }
-
-  .vertical-progress-bar {
-    height: 100%;
-    width: 0.7rem;
-    transform: rotate(180deg);
-
-    .progress-line {
-      background-color: nb-theme(border-basic-color-3);
-      width: 100%;
-
-      &.success {
-        background-color: nb-theme(color-success-default);
-      }
-
-      &.failure {
-        background-color: nb-theme(color-danger-default);
-      }
+    &.success {
+      background-color: nb-theme(color-success-default);
+    }
+    &.failure {
+      background-color: nb-theme(color-danger-default);
     }
   }
 }
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html
index 831d1ad1..84cc38da 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html
@@ -1,7 +1,7 @@
 <nb-list>
   <nb-list-item class="item" *ngFor="let item of frontCardData; trackBy: trackByDate">
-    <span class="caption">{{ item.date }}</span>
-    <span>{{ item.value }}</span>
+    <span>{{ item.date }}</span>
+    <span clsas="value">{{ item.value }}</span>
     <span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
       <nb-icon [icon]="item.delta.up ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
       {{ item.delta.value }}%
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
index f13199bf..9fa09c82 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
@@ -5,29 +5,23 @@
 @include nb-install-component() {
   overflow: auto;
 
-  nb-card-body {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
   .item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 4.5rem;
+
+    > * {
+      flex: 1;
+    }
 
     &:first-child {
       border-top: none;
     }
+  }
 
-    > * {
-      flex: 2;
-    }
-
-    ngx-traffic-bar {
-      flex: 1;
-    }
+  .value,
+  .delta {
+    text-align: center;
   }
 
   .delta {
@@ -41,10 +35,6 @@
     &.up {
       color: nb-theme(color-success-default);
     }
-
-    nb-icon ::ng-deep svg {
-      vertical-align: top;
-    }
   }
 
   @include media-breakpoint-down(is) {