refactor(dashboard): use line grid

src/app/pages/dashboard/dashboard.html

@@ -1,13 +1,13 @@
 <dashboard-pie-chart></dashboard-pie-chart>
 
 <div class="row">
-  <div class="col-md-7 col-sm-12"
+  <div class="col-lg-6 col-md-12 col-sm-12"
        ba-panel
        ba-panel-title="Acquisition Channels"
-       ba-panel-class="medium-panel">
+       ba-panel-class="medium-panel traffic-panel">
     <traffic-chart></traffic-chart>
   </div>
-  <div class="col-md-5 col-sm-12"
+  <div class="col-lg-6 col-md-12 col-sm-12"
        ba-panel
        ba-panel-title="Users by Country"
        ba-panel-class="medium-panel">
@@ -16,22 +16,22 @@
 </div>
 
 <div class="row">
-  <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
+  <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
     <div class="row">
-      <div class="col-lg-7 col-md-12 col-sm-7 col-xs-12"
+      <div class="col-xlg-8 col-lg-12 col-md-12 col-sm-7 col-xs-12"
            ba-panel
            ba-panel-title="Revenue"
            ba-panel-class="medium-panel">
         <dashboard-line-chart></dashboard-line-chart>
       </div>
-      <div class="col-lg-5 col-md-12 col-sm-5 col-xs-12"
+      <div class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
            ba-panel
            ba-panel-class="popular-app medium-panel">
         <popular-app></popular-app>
       </div>
     </div>
   </div>
-  <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12"
+  <div class="col-xlg-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
        ba-panel
        ba-panel-title="Feed"
        ba-panel-class="large-panel with-scroll feed-panel">
@@ -40,13 +40,13 @@
 </div>
 
 <div class="row shift-up">
-  <div class="col-lg-3 col-md-6 col-xs-12"
+  <div class="col-xlg-3 col-lg-6 col-md-6 col-xs-12"
        ba-panel
        ba-panel-title="To Do List"
        ba-panel-class="xmedium-panel feed-comply-panel with-scroll">
     <dashboard-todo></dashboard-todo>
   </div>
-  <div class="col-lg-5 col-md-6 col-xs-12"
+  <div class="col-xlg-6 col-lg-6 col-md-6 col-xs-12"
        ba-panel
        ba-panel-title="Calendar"
        ba-panel-class="xmedium-panel feed-comply-panel with-scroll">

src/sass/app/_dashboard.scss

@@ -1,4 +1,4 @@
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1620px) {
   .row.shift-up {
     > div {
       margin-top: -573px;
@@ -6,8 +6,8 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
- .panel.feed-panel {
+@media screen and (max-width: 1620px) {
+ .panel.feed-panel.large-panel {
    height: 824px;
  }
 }
@@ -16,4 +16,8 @@
   .panel-title {
     padding: 0 0 15px;
   }
+}
+
+.blurCalendar{
+  height: 475px;
 }

src/sass/app/_typography.scss

@@ -434,7 +434,40 @@ a.learn-more {
 
 
   @media screen and (min-width: 1620px) {
+    .col-xlg-1{
+      width: 8.33333333%;
+    }
+    .col-xlg-2{
+      width: 16.66666667%;
+    }
     .col-xlg-3{
       width: 25%;
     }
+    .col-xlg-4{
+      width: 33.33333333%;
+    }
+    .col-xlg-5{
+      width: 41.66666667%;
+    }
+    .col-xlg-6{
+      width: 50%;
+    }
+    .col-xlg-7{
+      width: 58.33333333%;
+    }
+    .col-xlg-8{
+      width: 66.66666667%;
+    }
+    .col-xlg-9{
+      width: 75%;
+    }
+    .col-xlg-10{
+      width: 83.33333333%;
+    }
+    .col-xlg-11{
+      width: 91.66666667%;
+    }
+    .col-xlg-12{
+      width: 100%;
+    }
   }

src/sass/theme/dashboard/_trafficChart.scss

@@ -29,7 +29,7 @@
 
 .traffic-legend {
   display: inline-block;
-  padding: 70px 0 0 10px;
+  padding: 70px 0 0 0px;
   width: 160px;
 }
 
@@ -121,6 +121,16 @@
       }
     }
   }
+  .traffic-chart{
+    width: 100%;
+  }
+  .canvas-holder{
+    display: block;
+    margin: 0 auto;
+  }
+  .panel.medium-panel.traffic-panel{
+    height: inherit;
+  }
 }
 
 @media (max-width: $resMin) {