fix traffic chart layout while resize

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,18 +22,18 @@
 
 .traffic-chart {
   width: 500px;
-  margin-left: -100%;
   position: relative;
   min-height: 300px;
   float: left;
-  .canvas-holder {
-    width: 300px;
-    height: 300px;
-    position: relative;
-  }
-  ul.doughnut-legend {
-    padding: 0 0 0 350px;
-    margin: -250px 0 0 0;
+}
+
+.traffic-legend {
+  display: inline-block;
+  padding: 70px 0 0 10px;
+  width: 160px;
+}
+
+ul.doughnut-legend {
   li {
     list-style: none;
     font-size: 12px;
@@ -43,6 +43,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    width: 120px;
     span {
       float: left;
       display: inline-block;
@@ -51,7 +52,14 @@
       margin-right: 10px;
     }
   }
-  }
+}
+
+.canvas-holder {
+  display: inline-block;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  float: left;
 }
 
 .traffic-text {
@@ -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);
 }

src/app/pages/dashboard/widgets/trafficChart/trafficChart.html

@@ -1,4 +1,16 @@
-<div class="channels-block">
+<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">
+      <canvas id="chart-area" width="300" height="300"></canvas>
+      <div class="traffic-text">
+        1,900,128
+        <span>Views Total</span>
+      </div>
+    </div>
+    <div class="traffic-legend"></div>
+  </div>
 
   <div class="channels-info">
     <div>
@@ -34,16 +46,5 @@
     </div>
   </div>
 
-  <div class="traffic-chart" id="trafficChart">
-    <div class="canvas-holder">
-      <canvas id="chart-area" width="300" height="300"></canvas>
-      <div class="traffic-text">
-        1,900,128
-        <span>Views Total</span>
-      </div>
-    </div>
-    <div class="traffic-legend"></div>
-  </div>
-
 </div>