dashboard chart - add element to right space for large screens, sidebar fixes, logo fixes, etc.

bower.json

@@ -15,6 +15,7 @@
     "tests"
   ],
   "dependencies": {
+    "AngularHammer": "ryanmullins-angular-hammer#~2.1.10",
     "Chart.js": "~1.0.2",
     "Ionicons": "ionicons#~2.0.1",
     "amcharts": "~3.15.2",
@@ -33,6 +34,7 @@
     "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

@@ -106,6 +106,8 @@ gulp.task('js', function () {
     'bower_components/angular-smart-table/dist/smart-table.min.js',
     'bower_components/slimScroll/jquery.slimscroll.min.js',
     'bower_components/angular-slimscroll/angular-slimscroll.js',
+    'bower_components/hammerjs/hammer.min.js',
+    'bower_components/AngularHammer/angular.hammer.min.js',
     'src/app/components/backTop/lib/jquery.backTop.min.js'
   ];
 

src/app/app.js

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

src/app/components/sidebar/_sidebar.scss

@@ -52,7 +52,7 @@ a.collapse-menu-link {
   top: 88px;
   left: 0;
   width: 100%;
-  padding-bottom: 10px;
+  padding-bottom: 52px;
 }
 
 .al-sidebar-list {
@@ -145,6 +145,7 @@ a.al-sidebar-list-link {
     margin-right: 18px;
     width: 16px;
     display: inline-block;
+    cursor: pointer;
   }
   input {
     background: none;
@@ -278,8 +279,8 @@ a.al-sidebar-list-link {
 @mixin sidebar-hidden() {
   .al-sidebar {
     width: 0;
-    .al-logo {
-      width: 180px;
+    a.al-logo {
+      display: none;
     }
     a.collapse-menu-link {
       i {
@@ -290,6 +291,12 @@ a.al-sidebar-list-link {
       display: none;
     }
   }
+  .search {
+    width: 0;
+  }
+  a.al-logo-small-rez {
+    display: block;
+  }
 }
 
 .collapsed-sidebar {
@@ -313,12 +320,15 @@ a.al-sidebar-list-link {
 
 .sidebar-full-width {
   width: $sidebar-width;
-  .al-logo {
-    padding-left: 17px;
+  a.al-logo {
+    display: block;
     span {
       padding-left: 0;
     }
   }
+  a.al-logo-small-rez {
+    display: none;
+  }
   .fa-angle-down, .fa-angle-up {
     opacity: 1;
   }

src/app/components/sidebar/sidebar.js

@@ -192,19 +192,21 @@ blurAdminApp.directive('sidebar', function () {
       }
 
       $scope.startSearch = function() {
-        if (window.innerWidth <= resWidthCollapseSidebar) {
+        if (window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar) {
           $scope.showSidebar = true;
-        }
+          $timeout(function(){
+            focusSearchInput();
+          }, 900);
+        } else {
           if (body.hasClass(collapsedClass)) {
-          console.log('collapsed');
             body.removeClass(collapsedClass);
             $timeout(function(){
               focusSearchInput();
-          }, 1000);
+            }, 900);
           } else {
-          console.log('else');
             focusSearchInput();
           }
+        }
       };
 
       $scope.search = function(event) {

src/app/components/widgets/widgets.js

@@ -8,7 +8,7 @@ blurAdminApp.directive('widgets', function () {
     },
     templateUrl: 'app/components/widgets/widgets.html',
     replace: true,
-    link: function (scope, element, attrs, ctrls) {
+    link: function () {
     }
   };
 });

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

@@ -1,5 +1,25 @@
+.channels-block {
+  width: 100%;
+  position: relative;
+}
+
+.channels-info {
+  width: 100%;
+  float: left;
+  overflow: hidden;
+  margin-top: -23px;
+  & > div {
+    padding: 0 0 0 540px;
+  }
+}
+
+
 .traffic-chart {
+  width: 500px;
+  margin-left: -100%;
+  position: relative;
   min-height: 300px;
+  float: left;
   .canvas-holder {
     width: 300px;
     height: 300px;
@@ -45,6 +65,17 @@
   }
 }
 
+.channel-change {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.channel-progress {
+  height: 16px;
+  border-radius: 0;
+  width: 100%;
+}
+
 @mixin doughnut-center() {
   .traffic-chart {
     ul.doughnut-legend {
@@ -76,3 +107,14 @@
     }
   }
 }
+
+@media (max-width: 1800px) {
+  .channels-info {
+    display: none;
+  }
+  .traffic-chart {
+    width: auto;
+    margin: 0;
+    float: none;
+  }
+}

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

@@ -1,4 +1,40 @@
-<div class="traffic-chart" id="trafficChart" ng-controller="trafficChartCtrl">
+<div class="channels-block" ng-controller="trafficChartCtrl">
+
+  <div class="channels-info">
+    <div>
+        <div class="channels-info-item">
+          <h5>Direct Traffic</h5>
+          <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"
+                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
+            </div>
+          </div>
+        </div>
+
+        <div class="channels-info-item">
+          <h5>Search engines</h5>
+          <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"
+                 aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
+            </div>
+          </div>
+        </div>
+
+        <div class="channels-info-item">
+          <h5>Ad Campaigns</h5>
+          <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"
+                 aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+
+  <div class="traffic-chart" id="trafficChart">
     <div class="canvas-holder">
       <canvas id="chart-area" width="300" height="300"></canvas>
       <div class="traffic-text">
@@ -8,3 +44,6 @@
     </div>
     <div class="traffic-legend"></div>
   </div>
+
+</div>
+

src/app/pages/form/_form.scss

@@ -472,3 +472,16 @@ label.custom-input-danger {
     }
   }
 }
+
+.progress-bar-primary {
+  background-color: $primary;
+}
+.progress-bar-success {
+  background-color: $success-light;
+}
+.progress-bar-warning {
+  background-color: $warning;
+}
+.progress-bar-danger {
+  background-color: $danger;
+}

src/assets/css/_layout.scss

@@ -43,8 +43,6 @@ a.al-logo {
   white-space: nowrap;
   text-shadow: 0 0 2px;
   overflow: hidden;
-  top: 0;
-  left: 0;
   &:hover {
     color: $primary;
     text-decoration: none;
@@ -66,6 +64,14 @@ a.al-logo {
   }
 }
 
+a.al-logo-small-rez {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 180px !important;
+}
+
 .al-main {
   margin-left: $left-space;
   padding: 0 0 34px 0;

src/assets/css/_table.scss

@@ -110,3 +110,16 @@ input.search-input {
 .vertical-scroll {
   max-height: 210px;
 }
+
+.pagination>li>a, .pagination>li>span {
+  background: transparent;
+}
+.pagination>li:first-child>a, .pagination>li:first-child>span {
+   border-top-left-radius: 0px;
+   border-bottom-left-radius: 0px;
+}
+
+.pagination>li:last-child>a, .pagination>li:last-child>span {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}

src/index.html

@@ -17,6 +17,7 @@
 <body ng-controller="mainCtrl">
 
 <main ng-if="finishLoading">
+  <a href="#/dashboard" class="al-logo al-logo-small-rez">Blur Admin</a>
   <sidebar></sidebar>
 
   <div class="al-main">