sidebar refactoring, fix amcharts pie chart on small screens, fix top right dashboard widget, etc.

bower.json

@@ -15,7 +15,6 @@
     "tests"
   ],
   "dependencies": {
-    "AngularHammer": "ryanmullins-angular-hammer#~2.1.10",
     "Chart.js": "~1.0.2",
     "Ionicons": "ionicons#~2.0.1",
     "amcharts": "~3.15.2",
@@ -26,6 +25,7 @@
     "angular-slimscroll": "~1.1.5",
     "angular-smart-table": "~2.1.3",
     "angular-toastr": "~1.5.0",
+    "angular-touch": "~1.4.6",
     "angular-ui-sortable": "~0.13.4",
     "animate.css": "~3.4.0",
     "bootstrap": "~3.3.5",
@@ -34,7 +34,6 @@
     "bootstrap-tagsinput": "~0.5.0",
     "font-awesome": "fontawesome#~4.4.0",
     "fullcalendar": "~2.4.0",
-    "hammerjs": "hammer.js#~2.0.4",
     "highlight": "~8.8.0",
     "jquery": "~2.1.4",
     "jquery-ui": "~1.11.4",

gulpfile.js

@@ -81,6 +81,7 @@ gulp.task('js', function () {
     'bower_components/angular/angular.min.js',
     'src/assets/js/global-variables.js',
     'bower_components/angular-route/angular-route.min.js',
+    'bower_components/angular-touch/angular-touch.min.js',
     'bower_components/jquery-ui/jquery-ui.min.js',
     'bower_components/bootstrap/dist/js/bootstrap.min.js',
     'bower_components/highlight/src/highlight.js',
@@ -89,7 +90,7 @@ gulp.task('js', function () {
     'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js',
     'bower_components/moment/min/moment.min.js',
     'bower_components/amcharts/dist/amcharts/amcharts.js',
-    'bower_components/amcharts/dist/amcharts/plugins/responsive/responsive.js',
+    'bower_components/amcharts/dist/amcharts/plugins/responsive/responsive.min.js',
     'bower_components/amcharts/dist/amcharts/serial.js',
     'bower_components/amcharts/dist/amcharts/funnel.js',
     'bower_components/amcharts/dist/amcharts/pie.js',

src/app/app.js

@@ -3,6 +3,7 @@
 var blurAdminApp = angular.module('BlurAdmin', [
   'ui.sortable',
   'ngRoute',
+  'ngTouch',
   'BlurAdmin.dashboard',
   'BlurAdmin.buttonsPage',
   'BlurAdmin.chartsPage',
@@ -16,8 +17,7 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'BlurAdmin.typographyPage',
   'toastr',
   'smart-table',
-  'ui.slimscroll',
-  'hmTouchEvents'
+  'ui.slimscroll'
 ]).config(['$routeProvider', 'toastrConfig', function ($routeProvider, toastrConfig) {
   $routeProvider.otherwise({redirectTo: '/dashboard'});
 

src/app/common/controllers/mainCtrl.js

@@ -8,4 +8,6 @@ blurAdminApp.controller('mainCtrl', ['$scope', '$timeout', function ($scope, $ti
   $timeout(function () {
     pageLoaded = true;
   }, 4000);
+
+  $scope.isMenuCollapsed = window.innerWidth <= resWidthCollapseSidebar;
 }]);

src/app/components/sidebar/_sidebar.scss

@@ -116,11 +116,6 @@ a.al-sidebar-list-link {
   }
 }
 
-.sidebar-overlap {
-  background: rgba(0, 0, 0, .75);
-  @extend .sidebar-full-width;
-}
-
 .slimScrollBar, .slimScrollRail {
   border-radius: 0px !important;
   width: 4px !important;
@@ -157,6 +152,20 @@ a.al-sidebar-list-link {
   }
 }
 
+@mixin layout-collapsed() {
+  .al-main {
+    margin-left: 70px;
+  }
+
+  .al-footer {
+    padding-left: 83px
+  }
+
+  .back-top {
+    left: 0;
+  }
+}
+
 @mixin default-sublist() {
   margin: 0;
   padding: 0;
@@ -299,66 +308,84 @@ a.al-sidebar-list-link {
   }
 }
 
-.collapsed-sidebar {
-  @include layout-collapsed();
-  @include sidebar-collapsed();
+@mixin sidebar-overlap() {
+  .al-sidebar {
+    width: $sidebar-width;
+    background: rgba(0, 0, 0, .75);
+    a.al-logo {
+      display: block;
+      span {
+        padding-left: 0;
+      }
+    }
+    a.al-logo-small-rez {
+      display: none;
+    }
+    .fa-angle-down, .fa-angle-up {
+      opacity: 1;
+    }
+
+    .al-sidebar-list-block {
+      display: block;
+    }
+
+    .al-sidebar-sublist {
+      @include default-sublist();
+      top: auto;
+      left: auto;
+      background: none;
+      width: auto;
+      overflow: visible;
+      transition: none;
+    }
+
+    a.collapse-menu-link {
+      @include bg-translucent-dark(0.75);
+      i {
+        transform: rotate(0deg);
+      }
+    }
+
+    .sidebar-hover-elem, .sidebar-select-elem {
+      left: $sidebar-width - 4;
+    }
+
+    .search {
+      width: 162px;
+    }
+  }
+}
+
+@media (min-width: 1120px) {
+  .menu-collapsed {
+    @include layout-collapsed();
+  }
+}
+
+@media (min-width: $resXS) {
+  .menu-collapsed {
+    @include sidebar-collapsed();
+  }
 }
 
 @media (max-width: 1120px) and (min-width: $resXS) {
-  body {
-    @include layout-collapsed();
+  @include layout-collapsed();
+}
+
+@media (max-width: 1120px) {
+  .menu-expand {
+    @include sidebar-overlap();
   }
-  @include sidebar-collapsed();
 }
 
 @media (max-width: $resXS) {
-  @include sidebar-hidden();
-  .collapsed-sidebar {
+  .menu-collapsed {
     @include sidebar-hidden();
   }
-}
-
-.sidebar-full-width {
-  width: $sidebar-width;
-  a.al-logo {
-    display: block;
-    span {
-      padding-left: 0;
-    }
+  .al-main {
+    margin-left: 0;
   }
-  a.al-logo-small-rez {
-    display: none;
-  }
-  .fa-angle-down, .fa-angle-up {
-    opacity: 1;
-  }
-
-  .al-sidebar-list-block {
-    display: block;
-  }
-
-  .al-sidebar-sublist {
-    @include default-sublist();
-    top: auto;
-    left: auto;
-    background: none;
-    width: auto;
-    overflow: visible;
-    transition: none;
-  }
-
-  a.collapse-menu-link {
-    @include bg-translucent-dark(0.75);
-    i {
-      transform: rotate(0deg);
-    }
-  }
-
-  .sidebar-hover-elem, .sidebar-select-elem {
-    left: $sidebar-width - 4;
-  }
-
-  .search {
-    width: 162px;
+  .al-footer {
+    padding-left: 0;
   }
 }

src/app/components/sidebar/sidebar.html

@@ -1,16 +1,15 @@
-<aside class="al-sidebar" ng-class="{'sidebar-overlap': showSidebar}">
+<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()">
   <a href="#/dashboard" class="al-logo clearfix">
     B<span>lur Admin</span>
   </a>
 
-  <a href class="collapse-menu-link clearfix" ng-click="menuExpand()">
+  <a href class="collapse-menu-link clearfix" ng-click="menuToggle()">
     <i class="fa fa-angle-double-left"></i>
   </a>
 
   <div class="search">
-    <!--<label for="searchInput" ng-click="openSidebar()"><i class="ion-ios-search-strong"></i></label>-->
     <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
-    <input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebar()">
+    <input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebarIfSmallRes()">
   </div>
 
   <div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
@@ -18,7 +17,7 @@
       <li ng-repeat="item in menuItems" class="al-sidebar-list-item"
           ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
 
-        <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebar()">
+        <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebarIfSmallRes()">
           <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
         </a>
 
@@ -31,7 +30,7 @@
 
         <ul ng-if="item.subMenu" class="al-sidebar-sublist" ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
           <li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
-            <a href="{{ subitem.root }}" ng-click="collapseSidebar()">{{ subitem.title }}</a>
+            <a href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title }}</a>
           </li>
         </ul>
       </li>

src/app/components/sidebar/sidebar.js

@@ -4,13 +4,10 @@ blurAdminApp.directive('sidebar', function () {
   return {
     restrict: 'E',
     templateUrl: 'app/components/sidebar/sidebar.html',
+    scope: {
+      isMenuCollapsed: '='
+    },
     controller: ['$scope', '$element', '$window', '$timeout', '$location', function ($scope, $element, $window, $timeout, $location) {
-
-      var resWidthCollapseSidebar = 1120;
-      var resWidthHideSidebar = 500;
-      var body = $('body');
-      var collapsedClass = 'collapsed-sidebar';
-
       $scope.menuItems = [
         {
           title: 'Dashboard',
@@ -118,34 +115,33 @@ blurAdminApp.directive('sidebar', function () {
         selectMenuItem();
       });
 
-      $scope.menuExpand = function () {
-        if (window.innerWidth > resWidthCollapseSidebar) {
-          body.toggleClass(collapsedClass);
-          $scope.showSidebar = false;
-        } else {
-          body.removeClass(collapsedClass);
-          if (!$scope.selectElemTop) {
-            changeSelectElemTopValue();
-          }
+      $scope.menuExpand = function() {
+        $scope.isMenuCollapsed = false;
+      };
 
-          if ($scope.showSidebar) {
-            $scope.showSidebar = false;
-          } else {
-            $timeout(function () {
-              $scope.showSidebar = true;
-            }, 20);
-          }
+      $scope.menuCollapse = function() {
+        $scope.isMenuCollapsed = true;
+      };
+
+      $scope.menuToggle = function () {
+        $scope.isMenuCollapsed = !$scope.isMenuCollapsed;
+
+        if (!$scope.isMenuCollapsed && !$scope.selectElemTop) {
+          changeSelectElemTopValue();
         }
       };
 
-      function isSidebarCollapsed() {
-        return body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
-      }
+      // watch window resize to change menu collapsed state if needed
+      $(window).resize(function(){
+        $scope.$apply(function(){
+          $scope.isMenuCollapsed = $(window).width() <= resWidthCollapseSidebar;
+        });
+      });
 
       $scope.toggleSubMenu = function ($event, item) {
         var submenu = $($event.currentTarget).next();
 
-        if (isSidebarCollapsed()) {
+        if ($scope.isMenuCollapsed) {
           if (!item.slideRight) {
             $timeout(function () {
               item.slideRight = true;
@@ -181,9 +177,9 @@ blurAdminApp.directive('sidebar', function () {
         $scope.showHoverElem = false;
       };
 
-      $scope.collapseSidebar = function() {
+      $scope.collapseSidebarIfSmallRes = function() {
         if (window.innerWidth <= resWidthCollapseSidebar) {
-          $scope.showSidebar = false;
+          $scope.isMenuCollapsed = true;
         }
       };
 
@@ -192,26 +188,19 @@ blurAdminApp.directive('sidebar', function () {
       }
 
       $scope.startSearch = function() {
-        if (window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar) {
-          $scope.showSidebar = true;
+        if ($scope.isMenuCollapsed) {
+          $scope.isMenuCollapsed = false;
           $timeout(function(){
             focusSearchInput();
           }, 900);
         } else {
-          if (body.hasClass(collapsedClass)) {
-            body.removeClass(collapsedClass);
-            $timeout(function(){
-              focusSearchInput();
-            }, 900);
-          } else {
-            focusSearchInput();
-          }
+          focusSearchInput();
         }
       };
 
       $scope.search = function(event) {
         if (event.which === 13) {
-          $scope.collapseSidebar();
+          $scope.collapseSidebarIfSmallRes();
         }
       }
     }]

src/app/pages/charts/_chartsPage.scss

@@ -13,12 +13,9 @@
   height: 360px;
 }
 
-#pieChart {
-  height: 400px;
-}
-
 #pieChart {
   max-width: 1120px;
+  height: 400px;
 }
 
 .amcharts-pie-slice {

src/app/pages/charts/widgets/pieChart/pieChart.html

@@ -1 +1 @@
-<div id="pieChart" class="admin-chart" ng-controller="pieChartCtrl"></div>
+<div id="pieChart" class="admin-chart" ng-controller="pieChartCtrl"></div>

src/app/pages/charts/widgets/pieChart/pieChart.js

@@ -85,7 +85,35 @@ blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', funct
     marginLeft: 0,
     marginRight: 0,
     pullOutRadius: 0,
-    pathToImages: 'img/'
+    pathToImages: 'img/',
+    responsive: {
+      enabled: true,
+      rules: [
+        // at 900px wide, we hide legend
+        {
+          maxWidth: 900,
+          overrides: {
+            legend: {
+              enabled: false
+            }
+          }
+        },
+
+        // at 200 px we hide value axis labels altogether
+        {
+          maxWidth: 200,
+          overrides: {
+            valueAxes: {
+              labelsEnabled: false
+            },
+            marginTop: 30,
+            marginBottom: 30,
+            marginLeft: 30,
+            marginRight: 30
+          }
+        }
+      ]
+    }
   });
 
   pieChart.addListener('init', handleInit);

src/app/pages/dashboard/widgets/chart/_chart.scss

@@ -7,12 +7,18 @@
   width: 100%;
   float: left;
   overflow: hidden;
-  margin-top: -23px;
+  margin-top: -11px;
   & > div {
     padding: 0 0 0 540px;
   }
 }
 
+.channels-info-item {
+  margin-bottom: 19px;
+  p {
+    margin-bottom: 9px;
+  }
+}
 
 .traffic-chart {
   width: 500px;
@@ -67,13 +73,14 @@
 
 .channel-change {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .channel-progress {
   height: 16px;
   border-radius: 0;
   width: 100%;
+  margin-bottom: 0;
 }
 
 @mixin doughnut-center() {

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

@@ -3,7 +3,7 @@
   <div class="channels-info">
     <div>
         <div class="channels-info-item">
-          <h5>Direct Traffic</h5>
+          <p>Direct Traffic</p>
           <span class="text-muted channel-change">70% growth in last mont</span>
           <div class="progress progress-sm channel-progress">
             <div class="progress-bar progress-bar-success" role="progressbar"
@@ -13,7 +13,7 @@
         </div>
 
         <div class="channels-info-item">
-          <h5>Search engines</h5>
+          <p>Search engines</p>
           <span class="text-muted channel-change">42% growth in last month</span>
           <div class="progress progress-sm channel-progress">
             <div class="progress-bar progress-bar-danger" role="progressbar"
@@ -23,7 +23,7 @@
         </div>
 
         <div class="channels-info-item">
-          <h5>Ad Campaigns</h5>
+          <p>Ad Campaigns</p>
           <span class="text-muted channel-change">87% growth in last mont</span>
           <div class="progress progress-sm channel-progress">
             <div class="progress-bar progress-bar-primary" role="progressbar"

src/assets/css/_layout.scss

@@ -209,15 +209,4 @@ a.al-logo-small-rez {
     float: none;
     display: inline-block;
   }
-}
-
-@media (max-width: $resXS) {
-  body, .collapsed-sidebar {
-    .al-main {
-      margin-left: 0;
-    }
-    .al-footer {
-      padding-left: 0;
-    }
-  }
 }

src/assets/css/_mixins.scss

@@ -43,18 +43,4 @@
   &:-ms-input-placeholder {
     color: $color;
   }
-}
-
-@mixin layout-collapsed() {
-  .al-main {
-    margin-left: 70px;
-  }
-
-  .al-footer {
-    padding-left: 83px
-  }
-
-  .back-top {
-    left: 0;
-  }
 }

src/assets/js/global-variables.js

@@ -20,4 +20,7 @@ var colorDangerBg = '#E1C8DD';
 
 var colorDefaultText = '#585858';
 
-var pageLoaded = false;
+var pageLoaded = false;
+
+var resWidthCollapseSidebar = 1120;
+var resWidthHideSidebar = 500;

src/index.html

@@ -16,9 +16,9 @@
 </head>
 <body ng-controller="mainCtrl">
 
-<main ng-if="finishLoading">
+<main ng-if="finishLoading" ng-class="{'menu-collapsed': isMenuCollapsed, 'menu-expand': !isMenuCollapsed}">
   <a href="#/dashboard" class="al-logo al-logo-small-rez">Blur Admin</a>
-  <sidebar></sidebar>
+  <sidebar is-menu-collapsed="isMenuCollapsed"></sidebar>
 
   <div class="al-main">
     <page-top></page-top>