fix pie charts layout for different resolutions

src/app/pages/dashboard/widgets/pieCharts/_pieCharts.scss

@@ -1,20 +1,46 @@
 .pie-charts {
   color: $default-text;
 
+  .pie-chart-item-container {
+    position: relative;
+    padding: 0 15px;
+    float: left;
+    box-sizing: border-box;
+  }
+  @media screen and (min-width: 1325px) {
+    .pie-chart-item-container {
+      width: 25%;
+    }
+  }
+  @media screen and (min-width: 700px) and (max-width: 1325px)  {
+    .pie-chart-item-container {
+      width: 50%;
+    }
+  }
+  @media screen and (max-width: 700px)  {
+    .pie-chart-item-container {
+      width: 100%;
+    }
+  }
+
   .pie-chart-item {
     position: relative;
     .chart-icon {
       position: absolute;
       right: 0px;
       top: 3px;
+      z-index: -1;
     }
   }
-  @media screen and (max-width: 1650px) {
+  @media screen and
-    //todo: add other cases when on the one row two or one chart
+    (min-width: 1325px) and (max-width: 1650px),
+    (min-width: 700px) and (max-width: 830px),
+    (max-width: 400px) {
     .chart-icon {
       display: none;
     }
   }
+
   .chart {
     position: relative;
     display: inline-block;

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

@@ -1,53 +1,13 @@
 <div class="row pie-charts">
-  <!-- todo: ng-repeat -->
+  <div class="pie-chart-item-container" ng-repeat="chart in charts">
-  <div class="col-sm-3">
     <blur-panel>
-      <div class="pie-chart-item" id="chart1">
+      <div class="pie-chart-item">
-        <div class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </div>
+        <div class="chart" rel="{{ ::chart.color }}" data-percent="60"> <span class="percent"></span> </div>
         <div class="description">
-          <div>New Visits</div>
+          <div>{{ ::chart.description }}</div>
-          <div class="description-stats">57,820</div>
+          <div class="description-stats">{{ ::chart.stats }}</div>
         </div>
-        <i class="chart-icon i-person"></i>
+        <i class="chart-icon i-{{ ::chart.icon }}"></i>
-      </div>
-    </blur-panel>
-  </div>
-
-  <div class="col-sm-3">
-    <blur-panel>
-      <div class="pie-chart-item" id="chart2">
-        <div class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </div>
-        <div class="description">
-          <div>New Purchases</div>
-          <div class="description-stats">$ 89,745</div>
-        </div>
-        <i class="chart-icon i-money"></i>
-      </div>
-    </blur-panel>
-  </div>
-
-  <div class="col-sm-3">
-    <blur-panel>
-      <div class="pie-chart-item" id="chart3">
-        <div class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </div>
-        <div class="description">
-          <div>Active Users</div>
-          <div class="description-stats">178,391</div>
-        </div>
-        <i class="chart-icon i-face"></i>
-      </div>
-    </blur-panel>
-  </div>
-
-  <div class="col-sm-3">
-    <blur-panel>
-      <div class="pie-chart-item" id="chart4">
-        <div class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </div>
-        <div class="description">
-          <div>Returned Visitors</div>
-          <div class="description-stats">32,592</div>
-        </div>
-        <i class="chart-icon i-refresh"></i>
       </div>
     </blur-panel>
   </div>

src/app/pages/dashboard/widgets/pieCharts/pieCharts.js

@@ -4,6 +4,30 @@ blurAdminApp.directive('pieCharts', function () {
   return {
     restrict: 'E',
     controller: ['$scope', '$element', '$window', '$timeout', function ($scope, $element, $window, $timeout) {
+
+      $scope.charts = [{
+          color: '#41bee9',
+          description: 'New Visits',
+          stats: '57,820',
+          icon: 'person',
+        }, {
+          color: '#9D498C',
+          description: 'New Purchases',
+          stats: '$ 89,745',
+          icon: 'money',
+        }, {
+          color: '#bbcb50',
+          description: 'Active Users',
+          stats: '178,391',
+          icon: 'face',
+        }, {
+          color: '#5FBCBB',
+          description: 'Returned Visitors',
+          stats: '32,592',
+          icon: 'refresh',
+        }
+      ];
+
       function getRandomArbitrary(min, max) {
         return Math.random() * (max - min) + min;
       }
@@ -32,14 +56,9 @@ blurAdminApp.directive('pieCharts', function () {
       }
 
       function updatePieCharts() {
-        var chart1 = window.chart = $('#chart1').find('.chart').data('easyPieChart');
+        $('.pie-charts .chart').each(function(index, chart) {
-        var chart2 = window.chart = $('#chart2').find('.chart').data('easyPieChart');
+          $(chart).data('easyPieChart').update(getRandomArbitrary(60, 90));
-        var chart3 = window.chart = $('#chart3').find('.chart').data('easyPieChart');
+        });
-        var chart4 = window.chart = $('#chart4').find('.chart').data('easyPieChart');
-        chart1.update(getRandomArbitrary(60, 90));
-        chart2.update(getRandomArbitrary(60, 90));
-        chart3.update(getRandomArbitrary(60, 90));
-        chart4.update(getRandomArbitrary(60, 90));
       }
 
       $timeout(function () {

src/assets/css/_layout.scss

@@ -9,6 +9,7 @@ html {
 
 html, body {
   min-height: 100%;
+  min-width: $resMin;
 }
 
 body {

src/assets/css/_variables.scss

@@ -49,5 +49,6 @@ $resM: 768px;
 $resS: 630px;
 $resXS: 500px;
 $resXXS: 430px;
+$resMin: 320px;
 
 $top-height: 66px;