fix basic layout, slice popular app panel, fix to-do

src/app/components/blurPanel/_blurPanel.scss

@@ -4,14 +4,24 @@
   position: relative;
   transition: all 0.2s ease;
   margin-bottom: 24px;
-
   &:hover {
     background: $panel-bg-hover;
   }
-
   &.animated {
     animation-duration: 0.5s;
   }
+  &.small-panel {
+    height: $small-panel-height;
+  }
+  &.medium-panel {
+    height: $medium-panel-height;
+  }
+  &.large-panel {
+    height: $large-panel-height;
+  }
+  &.with-scroll {
+    overflow-y: auto;
+  }
 }
 
 .panel-heading, .panel-default > .panel-heading {

src/app/components/blurPanel/blurPanel.html

@@ -1,4 +1,4 @@
-<div class="panel panel-default invisible" zoom-in>
+<div class="panel panel-default invisible" ng-class="classContainer" zoom-in>
   <div class="panel-heading clearfix" ng-if="title">
     <h3 class="panel-title">{{ title }}</h3>
   </div>

src/app/components/blurPanel/blurPanel.js

@@ -5,7 +5,8 @@ blurAdminApp.directive('blurPanel', function () {
     restrict: 'E',
     transclude: true,
     scope: {
-      title: '@'
+      title: '@',
+      classContainer: '@'
     },
     controller: ['$scope', function ($scope) {
     }],

src/app/components/pageTop/_pageTop.scss

@@ -1,5 +1,5 @@
 .page-top {
-  @include bg-translucent-dark(0.5);
+  @include bg-translucent-dark(0.85);
   padding: 0;
   position: fixed;
   z-index: 904;

src/app/components/widgets/widgets.html

@@ -1,7 +1,7 @@
 <div class="widgets">
   <div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
     <div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
-      <blur-panel title="widget.title" ng-repeat="widget in widgetCol" >
+      <blur-panel title="{{::widget.title}}" ng-repeat="widget in widgetCol" >
         <div ng-include="widget.url"></div>
       </blur-panel>
     </div>

src/app/pages/dashboard/_dashboard.scss

@@ -0,0 +1,8 @@
+
+@media screen and (min-width: 1200px) {
+  .row.shift-up {
+    > div {
+      margin-top: -423px;
+    }
+  }
+}

src/app/pages/dashboard/dashboard.html

@@ -3,11 +3,11 @@
 <div>
   <blur-panel>
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <h3>Acquisition Channels</h3>
         <traffic-chart></traffic-chart>
       </div>
-      <div class="col-sm-6">
+      <div class="col-md-6">
         <h3>Users by country</h3>
         <am-chart-map></am-chart-map>
       </div>
@@ -16,35 +16,36 @@ <h3>Users by country</h3>
 </div>
 
 <div class="row">
-  <div class="col-sm-9">
+  <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
     <div class="row">
-      <div class="col-sm-8">
-        <blur-panel title="Revenue">
+      <div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
+        <blur-panel title="Revenue" class-container="medium-panel">
           <am-chart></am-chart>
         </blur-panel>
       </div>
-      <div class="col-sm-4">
-        <blur-panel>
+      <div class="col-lg-5 col-md-12 col-sm-5 col-xs-12">
+        <blur-panel class-container="popular-app medium-panel">
           <popular-app></popular-app>
         </blur-panel>
       </div>
     </div>
-    <div class="row">
-      <div class="col-sm-4">
-        <blur-panel title="ToDo List">
-          <blur-todo></blur-todo>
-        </blur-panel>
-      </div>
-      <div class="col-sm-8">
-        <blur-panel title="Calenar">
-          <blur-calendar></blur-calendar>
-        </blur-panel>
-      </div>
-    </div>
   </div>
-  <div class="col-sm-3">
-    <blur-panel title="Feed">
+  <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
+    <blur-panel title="Feed" class-container="large-panel with-scroll">
       <blur-feed></blur-feed>
     </blur-panel>
   </div>
 </div>
+
+<div class="row shift-up">
+  <div class="col-lg-3 col-sm-6 col-xs-12">
+    <blur-panel title="ToDo List" class-container="medium-panel with-scroll">
+      <blur-todo></blur-todo>
+    </blur-panel>
+  </div>
+  <div class="col-lg-5 col-sm-6 col-xs-12">
+    <blur-panel title="Calendar" class-container="medium-panel with-scroll">
+      <blur-calendar></blur-calendar>
+    </blur-panel>
+  </div>
+</div>

src/app/pages/dashboard/widgets/amChart/_amChart.scss

@@ -1,4 +1,5 @@
 #amchart {
   width: 100%;
-  height: 400px;
+  height: 350px;
+  margin-top: -20px;
 }

src/app/pages/dashboard/widgets/amChartMap/_amChartMap.scss

@@ -1,4 +1,4 @@
 #amChartMap {
   width: 100%;
-  height: 400px;
+  height: 315px;
 }

src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss

@@ -1,7 +1,3 @@
-.blur-feed {
-  height: 983px;
-}
-
 .feed-message {
   $text-message-color: $default;
   $video-message-color: $danger;

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

@@ -1,21 +1,19 @@
-<div class="blur-feed">
-  <div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
-    <img ng-src="img/{{ ::message.author }}.png">
-    <div class="text-block" ng-class="message.type">
-      <div class="message-header">
-        <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
-      </div>
-      <div class="message-content">
-        {{::message.text}}
-      </div>
+<div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
+  <img ng-src="img/{{ ::message.author }}.png">
+  <div class="text-block" ng-class="message.type">
+    <div class="message-header">
+      <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
     </div>
-    <div class="message-time">
-      <div class="post-time">
-        {{::message.time}}
-      </div>
-      <div class="ago-time">
-        {{::message.ago}}
-      </div>
+    <div class="message-content">
+      {{::message.text}}
     </div>
   </div>
-</div>
+  <div class="message-time">
+    <div class="post-time">
+      {{::message.time}}
+    </div>
+    <div class="ago-time">
+      {{::message.ago}}
+    </div>
+  </div>
+</div>

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

@@ -35,7 +35,7 @@ blurAdminApp.directive('blurFeed', function () {
           ago: 'a day ago',
         }, {
           type: 'geo-message',
-          author: 'Kolya',
+          author: 'Nick',
           header: 'posted location',
           text: 'New York, NY, USA',
           time: 'Yesterday 11:37 am',

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

@@ -6,6 +6,10 @@
     padding: 0 15px;
     float: left;
     box-sizing: border-box;
+
+    .panel {
+      height: $small-panel-height;
+    }
   }
   @media screen and (min-width: 1325px) {
     .pie-chart-item-container {

src/app/pages/dashboard/widgets/popularApp/_popularApp.scss

@@ -1,3 +1,39 @@
 .popular-app {
-  height: 444px;
+  .panel-body {
+    padding: 0;
+  }
+
+  .popular-app-img {
+    position: relative;
+    background: #e9e9e9;
+    padding: 30px 0;
+    height: 260px;
+
+    img {
+      width: 70%;
+      position: absolute;
+      transform: translateY(-50%) translate(-50%);
+      top: 50%;
+      left: 50%;
+    }
+  }
+  .popular-app-cost {
+    font-size: 20px;
+    padding: 20px 22px;
+    border-bottom: 1px solid $border;
+  }
+  .popular-app-info {
+    padding: 20px 22px;
+    font-size: 20px;
+    text-align: center;
+    .info-label {
+      font-size: 12px;
+    }
+  }
+  .row {
+    margin: 0;
+    > div {
+      padding: 0;
+    }
+  }
 }

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

@@ -1,25 +1,25 @@
-<div class="popular-app">
-  <div class="popular-app-img">
-    <!--<img src="img/tinder-logo.jpg"/>-->
+<div class="popular-app-img">
+  <img src="img/chernika.png"/>
+</div>
+<div class="popular-app-cost row">
+  <div class="col-xs-9">
+    Most Popular App
   </div>
-  <div class="popular-app-main">
-    <div class="popular-app-top">
-      <h4>Most Popular App</h4>
-      <p>17$</p>
-    </div>
-    <div class="row">
-      <div class="col-sm-4">
-        <h6>Total Visits</h6>
-        <p>47,512</p>
-      </div>
-      <div class="col-sm-4">
-        <h6>New Visits</h6>
-        <p>9,217</p>
-      </div>
-      <div class="col-sm-4">
-        <h6>Sales</h6>
-        <p>2,928</p>
-      </div>
-    </div>
+  <div class="col-xs-3 text-right">
+    175$
   </div>
-</div>
+</div>
+<div class="popular-app-info row">
+  <div class="col-xs-4 text-left">
+    <div class="info-label">Total Visits</div>
+    <div>47,512</div>
+  </div>
+  <div class="col-xs-4 text-center">
+    <div class="info-label">New Visits</div>
+    <div>9,217</div>
+  </div>
+  <div class="col-xs-4 text-right">
+    <div class="info-label">Sales</div>
+    <div>2,928</div>
+  </div>
+</div>

src/app/pages/dashboard/widgets/todo/_todo.scss

@@ -6,8 +6,6 @@ input.task-todo {
 ul.todo-list {
   margin: 0;
   padding: 0;
-  height: 435px;
-  overflow: auto;
   .placeholder, .ui-sortable-placeholder {
     background: #fff;
   }

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

@@ -59,11 +59,6 @@ blurAdminApp.directive('blurTodo', function () {
           edit: false,
           markId: 4
         },
-        {
-          text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro. Eirmod prompta usu ex, meliore oporteat est ad.',
-          edit: false,
-          markId: 3
-        }
       ];
 
       $scope.getMarkColor = function (id) {

src/assets/css/_variables.scss

@@ -51,4 +51,8 @@ $resXS: 500px;
 $resXXS: 430px;
 $resMin: 320px;
 
-$top-height: 66px;
+$top-height: 66px;
+
+$small-panel-height: 120px;
+$medium-panel-height: 400px;
+$large-panel-height: 824px;

src/assets/css/main.scss

@@ -19,6 +19,7 @@
 "../../app/components/backTop/backTop.scss",
 "../../app/components/msgCenter/msgCenter.scss",
 "../../app/components/blurPanel/blurPanel.scss",
+"../../app/pages/dashboard/dashboard.scss",
 "../../app/pages/dashboard/widgets/calendar/calendar.scss",
 "../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
 "../../app/pages/dashboard/widgets/amChart/amChart.scss",