fix(dashboard): some adjustoments to layout

src/app/components/blurPanel/_blurPanel.scss

@@ -19,13 +19,18 @@ $panel-title-height: 35px;
   &.medium-panel {
     height: $medium-panel-height;
   }
+  &.xmedium-panel {
+    height: $extra-medium-panel-height;
+  }
   &.large-panel {
     height: $large-panel-height;
   }
   &.with-scroll {
     .panel-body {
-      overflow-y: auto;
       height: calc(100% - #{$panel-title-height});
+      .panel-content {
+        overflow-y: auto;
+      }
     }
   }
 }
@@ -45,4 +50,7 @@ $panel-title-height: 35px;
 
 .panel-body {
   padding: 15px 22px;
+  .panel-content {
+    height: 100%;
+  }
 }

src/app/components/blurPanel/blurPanel.html

@@ -3,6 +3,6 @@
     <h3 class="panel-title">{{ title }}</h3>
   </div>
   <div class="panel-body">
-    <ng-transclude></ng-transclude>
+    <div class="panel-content" ng-transclude></div>
   </div>
 </div>

src/app/pages/dashboard/_dashboard.scss

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

src/app/pages/dashboard/dashboard.html

@@ -36,13 +36,13 @@
 </div>
 
 <div class="row shift-up">
-  <div class="col-lg-3 col-sm-6 col-xs-12">
-    <blur-panel title="To Do List" class-container="medium-panel with-scroll">
+  <div class="col-lg-3 col-md-6 col-xs-12">
+    <blur-panel title="To Do List" class-container="xmedium-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">
+  <div class="col-lg-5 col-md-6 col-xs-12">
+    <blur-panel title="Calendar" class-container="xmedium-panel with-scroll">
       <blur-calendar></blur-calendar>
     </blur-panel>
   </div>

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

@@ -4,7 +4,8 @@ blurAdminApp.directive('blurCalendar', function () {
   return {
     restrict: 'E',
     controller: ['$scope', function ($scope) {
-      $('#calendar').fullCalendar({
+      var $element = $('#calendar').fullCalendar({
+        //height: 335,
         header: {
           left: 'prev,next today',
           center: 'title',

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

@@ -1,6 +1,5 @@
 input.task-todo {
   margin-bottom: 14px;
-  margin-top: -2px;
 }
 
 ul.todo-list {

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

@@ -59,6 +59,21 @@ blurAdminApp.directive('blurTodo', function () {
           edit: false,
           markId: 4
         },
+        {
+          text: 'Get in touch with akveo team',
+          edit: false,
+          markId: 1
+        },
+        {
+          text: 'Write email to contact@akveo.com',
+          edit: false,
+          markId: 3
+        },
+        {
+          text: 'Have fun with blur admin',
+          edit: false,
+          markId: 2
+        },
       ];
 
       $scope.getMarkColor = function (id) {

src/assets/css/_variables.scss

@@ -55,4 +55,5 @@ $top-height: 66px;
 
 $small-panel-height: 114px;
 $medium-panel-height: 400px;
-$large-panel-height: 824px;
+$extra-medium-panel-height: 550px;
+$large-panel-height: 974px;