From 1e973ae1372341ffe5e58066eefe400f1e713410 Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Mon, 23 Nov 2015 17:05:06 +0300
Subject: [PATCH] fix traffic chart layout while resize

---
 .../widgets/trafficChart/_trafficChart.scss   | 118 +++++++++---------
 .../widgets/trafficChart/trafficChart.html    |  71 +++++------
 2 files changed, 95 insertions(+), 94 deletions(-)

diff --git a/src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss b/src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss
index 429514f..f1f6055 100644
--- a/src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss
+++ b/src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss
@@ -4,12 +4,12 @@
 }
 
 .channels-info {
-  width: 100%;
-  float: left;
-  overflow: hidden;
-  margin-top: -11px;
-  & > div {
-    padding: 0 0 0 540px;
+  display: inline-block;
+  width: calc(100% - 500px);
+}
+.small-container {
+  .channels-info {
+    display: none;
   }
 }
 
@@ -22,38 +22,46 @@
 
 .traffic-chart {
   width: 500px;
-  margin-left: -100%;
   position: relative;
   min-height: 300px;
   float: left;
-  .canvas-holder {
-    width: 300px;
-    height: 300px;
+}
+
+.traffic-legend {
+  display: inline-block;
+  padding: 70px 0 0 10px;
+  width: 160px;
+}
+
+ul.doughnut-legend {
+  li {
+    list-style: none;
+    font-size: 12px;
+    margin-bottom: 12px;
+    line-height: 16px;
     position: relative;
-  }
-  ul.doughnut-legend {
-    padding: 0 0 0 350px;
-    margin: -250px 0 0 0;
-    li {
-      list-style: none;
-      font-size: 12px;
-      margin-bottom: 12px;
-      line-height: 16px;
-      position: relative;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      span {
-        float: left;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        margin-right: 10px;
-      }
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 120px;
+    span {
+      float: left;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
     }
   }
 }
 
+.canvas-holder {
+  display: inline-block;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  float: left;
+}
+
 .traffic-text {
   width: 100%;
   height: 40px;
@@ -83,28 +91,7 @@
   margin-bottom: 0;
 }
 
-@mixin doughnut-center() {
-  .traffic-chart {
-    ul.doughnut-legend {
-      padding: 0;
-      margin: 40px 0 0 0;
-      li {
-        width: 50%;
-        float: left;
-      }
-    }
-    .canvas-holder {
-      margin: 0 auto;
-    }
-  }
-}
-
-@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
-  @include doughnut-center();
-}
-
-@media (max-width: 380px) {
-  $size: 250px;
+@mixin doughnut-size($size) {
   .traffic-chart .canvas-holder {
     width: $size;
     height: $size;
@@ -115,13 +102,26 @@
   }
 }
 
-@media (max-width: 1800px) {
-  .channels-info {
-    display: none;
-  }
-  .traffic-chart {
-    width: auto;
-    margin: 0 0 20px 0;
+@media (max-width: $resS) {
+  @include doughnut-size(250px);
+  .canvas-holder {
     float: none;
   }
+  .traffic-legend {
+    display: block;
+    padding: 10px 0 0;
+    width: 300px;
+  }
+  ul.doughnut-legend {
+    padding-left: 20px;
+    li {
+      &:nth-child(2n-1) {
+        float: left;
+      }
+    }
+  }
+}
+
+@media (max-width: $resMin) {
+  @include doughnut-size(200px);
 }
\ No newline at end of file
diff --git a/src/app/pages/dashboard/widgets/trafficChart/trafficChart.html b/src/app/pages/dashboard/widgets/trafficChart/trafficChart.html
index e9f668d..262c7d4 100644
--- a/src/app/pages/dashboard/widgets/trafficChart/trafficChart.html
+++ b/src/app/pages/dashboard/widgets/trafficChart/trafficChart.html
@@ -1,38 +1,5 @@
-<div class="channels-block">
-
-  <div class="channels-info">
-    <div>
-        <div class="channels-info-item">
-          <p>Direct Traffic</p>
-          <span class="text-muted channel-change">70% growth in last mont</span>
-          <div class="progress progress-sm channel-progress">
-            <div class="progress-bar progress-bar-success" role="progressbar"
-                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
-            </div>
-          </div>
-        </div>
-
-        <div class="channels-info-item">
-          <p>Search engines</p>
-          <span class="text-muted channel-change">42% growth in last month</span>
-          <div class="progress progress-sm channel-progress">
-            <div class="progress-bar progress-bar-danger" role="progressbar"
-                 aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
-            </div>
-          </div>
-        </div>
-
-        <div class="channels-info-item">
-          <p>Ad Campaigns</p>
-          <span class="text-muted channel-change">87% growth in last mont</span>
-          <div class="progress progress-sm channel-progress">
-            <div class="progress-bar progress-bar-primary" role="progressbar"
-                 aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
-            </div>
-          </div>
-        </div>
-    </div>
-  </div>
+<div class="channels-block" track-width="smallContainerWidth" min-width="640"
+     ng-class="{'small-container': smallContainerWidth}">
 
   <div class="traffic-chart" id="trafficChart">
     <div class="canvas-holder">
@@ -45,5 +12,39 @@
     <div class="traffic-legend"></div>
   </div>
 
+  <div class="channels-info">
+    <div>
+      <div class="channels-info-item">
+        <p>Direct Traffic</p>
+        <span class="text-muted channel-change">70% growth in last mont</span>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar progress-bar-success" role="progressbar"
+               aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
+          </div>
+        </div>
+      </div>
+
+      <div class="channels-info-item">
+        <p>Search engines</p>
+        <span class="text-muted channel-change">42% growth in last month</span>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar progress-bar-danger" role="progressbar"
+               aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
+          </div>
+        </div>
+      </div>
+
+      <div class="channels-info-item">
+        <p>Ad Campaigns</p>
+        <span class="text-muted channel-change">87% growth in last mont</span>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar progress-bar-primary" role="progressbar"
+               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </div>