refactor(traffic): align content

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html

@@ -1,16 +1,9 @@
-<div class="traffic-bar">
+<span class="value-prev caption">{{ barData.prevDate }}</span>
-  <div class="period-from">{{ barData.prevDate }}</div>
+<div class="progress-line-container" [style.height.%]="barData.prevValue">
-  <div class="vertical-progress-bar">
+  <div class="progress-line-prev"></div>
-    <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>
 </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>

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 {
+  .value-prev,
-    display: flex;
+  .value-now {
-    align-self: stretch;
+    flex: 1;
-    position: relative;
+  }
+
+  .progress-line-container {
+    flex: 1;
+    margin-bottom: 0.1875rem;
+  }
+
+  .progress-line-prev,
+  .progress-line-now {
     height: 100%;
+    width: 0.7rem;
+  }
 
-    > * {
+  .progress-line-prev {
-      margin-left: 0.5rem;
+    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 {
+  .progress-line-now {
-    align-self: flex-end;
+    @include nb-ltr {
-    font-size: 1rem;
+      margin-left: 0.25rem;
-    line-height: 0.8;
+      margin-right: auto;
-  }
+    }
+    @include nb-rtl {
+      margin-left: auto;
+      margin-right: 0.25rem;
+    }
 
-  .period-from {
+    &.success {
-    position: absolute;
+      background-color: nb-theme(color-success-default);
-    @include nb-ltr(right, 100%);
+    }
-    @include nb-rtl(left, 100%);
+    &.failure {
-    bottom: 0;
+      background-color: nb-theme(color-danger-default);
-    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);
-      }
     }
   }
 }

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.date }}</span>
-    <span>{{ item.value }}</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 }}%

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;
     }
+  }
 
-    > * {
+  .value,
-      flex: 2;
+  .delta {
-    }
+    text-align: center;
-
-    ngx-traffic-bar {
-      flex: 1;
-    }
   }
 
   .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) {