From 22a78f71a3968178508dcfeb18cf0f19a1b1a974 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Sat, 22 Jun 2019 17:07:30 +0300
Subject: [PATCH] refactor(orders): prevent legend content overflow

---
 .../chart-panel-header.component.html         | 14 +++---
 .../chart-panel-header.component.scss         | 45 +++++++------------
 .../chart-panel-summary.component.scss        |  2 +-
 .../charts-panel/charts-panel.component.scss  |  1 -
 .../legend-chart/legend-chart.component.html  | 10 ++---
 .../legend-chart/legend-chart.component.scss  | 21 +++------
 6 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
index 1e0c2b04..30bf039a 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
@@ -1,9 +1,7 @@
-<div class="chart-header">
-  <ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
+<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
 
-  <nb-select [selected]="type" (selectedChange)="changePeriod($event)">
-    <nb-option  *ngFor="let period of types" [value]="period">
-      {{ period }}
-    </nb-option>
-  </nb-select>
-</div>
+<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option *ngFor="let period of types" [value]="period">
+    {{ period }}
+  </nb-option>
+</nb-select>
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
index 384f67f9..52cb2cab 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
@@ -3,38 +3,23 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  .chart-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 2.125rem;
-    align-items: center;
+  padding: 1.5rem 4.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: -1rem;
+
+  ngx-legend-chart,
+  .period-select {
+    padding-top: 1rem;
+    @include nb-ltr(padding-left, 0.5rem);
+    @include nb-rtl(padding-right, 0.5rem);
   }
 
-  .dropdown {
-    min-width: 8.125rem;
-  }
-
-  @include media-breakpoint-down(is) {
-    .chart-header {
-      flex-direction: column-reverse;
-    }
-
-    ngx-legend-chart {
-      align-self: flex-start;
-
-      ::ng-deep .legends {
-        padding-left: 0;
-      }
-
-      ::ng-deep .legend {
-        margin-left: 1rem;
-      }
-    }
-
-    .dropdown {
-      margin-top: 1.5rem;
-      margin-bottom: 1.5rem;
-      align-self: flex-end;
+  @include media-breakpoint-up(md) {
+    .period-select {
+      @include nb-ltr(margin-left, auto);
+      @include nb-rtl(margin-right, auto);
     }
   }
 }
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
index 745bc91d..dd8509a1 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
@@ -3,11 +3,11 @@
 @include nb-install-component() {
   .summary-container {
     display: flex;
+    flex-wrap: wrap;
     flex: 1;
     background-color: nb-theme(background-basic-color-2);
     justify-content: space-between;
     padding: 1.5rem 4rem 1rem;
-    margin-bottom: 1rem;
     border: 1px solid nb-theme(border-basic-color-3);
     border-left: none;
     border-right: none;
diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
index 2b3244c1..acf1a902 100644
--- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
@@ -34,7 +34,6 @@ $legend-canceled-color: #3f4fda;
     overflow: hidden;
   }
 
-  ngx-chart-panel-header,
   ngx-profit-chart,
   ngx-orders-chart {
     padding: 0 1.25rem;
diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.html b/src/app/pages/e-commerce/legend-chart/legend-chart.component.html
index 7edacd53..a581ce56 100644
--- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.html
+++ b/src/app/pages/e-commerce/legend-chart/legend-chart.component.html
@@ -1,7 +1,5 @@
-<div class="legends">
-  <div *ngFor="let legend of legendItems" class="legend">
-    <div class="legend-item-color"
-         [style.background]="legend.iconColor"></div>
-    <div class="legend-title">{{ legend.title }}</div>
-  </div>
+<div *ngFor="let legend of legendItems" class="legend">
+  <div class="legend-item-color"
+       [style.background]="legend.iconColor"></div>
+  <div class="legend-title">{{ legend.title }}</div>
 </div>
diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss b/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
index 122fe2d0..c8a6dfe6 100644
--- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
+++ b/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
@@ -3,19 +3,17 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  .legends {
-    display: flex;
-    padding: 0 0 0 2.85rem;
-  }
+  display: flex;
+  flex-wrap: wrap;
 
   .legend {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-left: 4rem;
 
-    &:first-child {
-      margin-left: 0;
+    &:not(:last-child) {
+      @include nb-ltr(margin-right, 1rem);
+      @include nb-rtl(margin-left, 1rem);
     }
   }
 
@@ -26,13 +24,8 @@
   }
 
   .legend-title {
-    padding: 0 0.75rem;
+    @include nb-ltr(padding-left, 0.75rem);
+    @include nb-rtl(padding-right, 0.75rem);
     white-space: nowrap;
   }
-
-  @include media-breakpoint-down(md) {
-    .legend {
-      margin-left: 1.5rem;
-    }
-  }
 }