From 9037bcf7bd860fa54e6ce874f43d38492729a69f Mon Sep 17 00:00:00 2001
From: eugene-sinitsyn <e.sinitsyn.s@akveo.com>
Date: Wed, 11 Mar 2020 13:27:00 +0300
Subject: [PATCH] Fix scroll for "user activity" card

---
 .../traffic-reveal-card.component.scss        |  5 ++
 .../user-activity.component.html              | 40 +++++++------
 .../user-activity.component.scss              | 58 +++++++++++++++++++
 3 files changed, 84 insertions(+), 19 deletions(-)
 create mode 100644 src/app/pages/e-commerce/user-activity/user-activity.component.scss

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 ccf47060..9fe44acf 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
@@ -16,4 +16,9 @@
     @include nb-ltr(padding-right, 4rem);
     @include nb-rtl(padding-left, 4rem);
   }
+
+  nb-card-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.html b/src/app/pages/e-commerce/user-activity/user-activity.component.html
index 46ba0524..38911e4b 100644
--- a/src/app/pages/e-commerce/user-activity/user-activity.component.html
+++ b/src/app/pages/e-commerce/user-activity/user-activity.component.html
@@ -7,27 +7,29 @@
     </nb-select>
   </nb-card-header>
 
-  <nb-list class="user-activity-list">
-    <nb-list-item *ngFor="let item of userActivity">
+  <nb-card-body>
+    <nb-list class="user-activity-list">
+      <nb-list-item *ngFor="let item of userActivity">
 
-      <div class="visited-date">
-        {{ item.date }}
-      </div>
-
-      <div class="visited-pages-count">
-        <div class="caption">Pages Visit</div>
-        <div class="value">{{ item.pagesVisitCount }}</div>
-      </div>
-
-      <div class="visited-percentages">
-        <div class="caption">New visits, %</div>
-        <div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
-          <nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
-          {{ item.newVisits }}%
+        <div class="visited-date">
+          {{ item.date }}
         </div>
-      </div>
 
-    </nb-list-item>
-  </nb-list>
+        <div class="visited-pages-count">
+          <div class="caption">Pages Visit</div>
+          <div class="value">{{ item.pagesVisitCount }}</div>
+        </div>
+
+        <div class="visited-percentages">
+          <div class="caption">New visits, %</div>
+          <div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
+            <nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
+            {{ item.newVisits }}%
+          </div>
+        </div>
+
+      </nb-list-item>
+    </nb-list>
+  </nb-card-body>
 
 </nb-card>
diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.scss b/src/app/pages/e-commerce/user-activity/user-activity.component.scss
new file mode 100644
index 00000000..102ee6fd
--- /dev/null
+++ b/src/app/pages/e-commerce/user-activity/user-activity.component.scss
@@ -0,0 +1,58 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: none;
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+  }
+
+  nb-card-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  nb-list {
+    overflow-x: hidden;
+  }
+
+  nb-list-item {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 0 -0.25rem;
+  }
+
+  .visited-date,
+  .visited-pages-count,
+  .visited-percentages {
+    flex: 1 0 auto;
+    margin: 0 0.25rem;
+  }
+
+  .value {
+    margin-top: 0.25rem;
+    color: nb-theme(color-success-default);
+  }
+
+  .delta {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &.down {
+      color: nb-theme(color-danger-default);
+    }
+
+    &.up {
+      color: nb-theme(color-success-default);
+    }
+
+    nb-icon ::ng-deep svg {
+      vertical-align: top;
+    }
+  }
+}