From 8ddbd32a34ee0fcf2171b77d742e9cee4b476d5d Mon Sep 17 00:00:00 2001
From: eugene-sinitsyn <e.sinitsyn.s@akveo.com>
Date: Wed, 11 Mar 2020 13:20:11 +0300
Subject: [PATCH] Fix scrollbar for "traffic" card

---
 .../back-side/traffic-back-card.component.html | 11 +++++------
 .../back-side/traffic-back-card.component.scss | 14 ++++----------
 .../traffic-cards-header.component.html        | 10 ++++------
 .../traffic-cards-header.component.scss        | 17 ++++-------------
 .../traffic-reveal-card.component.html         | 18 ++++++++++++++----
 .../traffic-reveal-card.component.scss         |  7 +++++++
 6 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
index 8c483a7e..42e18aa3 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
@@ -1,6 +1,5 @@
-<nb-card-body>
-  <ngx-traffic-bar-chart [data]="trafficBarData.data"
-                         [labels]="trafficBarData.labels"
-                         [formatter]="trafficBarData.formatter">
-  </ngx-traffic-bar-chart>
-</nb-card-body>
+<ngx-traffic-bar-chart
+  [data]="trafficBarData.data"
+  [labels]="trafficBarData.labels"
+  [formatter]="trafficBarData.formatter"
+></ngx-traffic-bar-chart>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
index 00e2406e..390503e0 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
@@ -1,16 +1,10 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
 
   ngx-traffic-bar-chart {
     flex: 1;
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
index 9ee7a987..630e0564 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
@@ -1,6 +1,4 @@
-<nb-card-header>
-  <span>Traffic</span>
-  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
-    <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-  </nb-select>
-</nb-card-header>
+<span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+</nb-select>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
index b92c1db3..958c42bc 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
@@ -1,14 +1,5 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-
-    @include nb-ltr(padding-right, 4rem);
-    @include nb-rtl(padding-left, 4rem);
-  }
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
index 1b11ab71..ac231abe 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
@@ -1,15 +1,25 @@
 <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
   <nb-card-front>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
-      <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
+      </nb-card-body>
       <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
-      <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
       <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
index 42f55746..ccf47060 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
@@ -9,4 +9,11 @@
     @include nb-rtl(left, 1.25rem);
     cursor: pointer;
   }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
 }