chore(version): add version change log

Closes #5

CHANGELOG.md

@@ -0,0 +1,4 @@
+v1.1.1 - 11 Apr 2016
+--------------------
+- Improved scrolling performance, fixes #2
+- Set 0.9.5 version for the Chartist library by default, fixes #5

LICENSE.txt

@@ -0,0 +1,10 @@
+The MIT License (MIT)
+Copyright (c) 2016 Akvemus GSC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Status API Training Shop Blog About
+© 2016 GitHub, Inc. Terms Privacy Security Contact Help

README.md

@@ -1,6 +1,6 @@
 # Blur Admin HTML template
 
-Admin template made with ♥ by Akveo team.
+Admin template made with ♥ by [Akveo team](http://akveo.com/).
 
 We put a lot of efforts to bring together latest and the most trending web design approaches, while creating this template.
 Every color, character or image was carefully selected by our team to provide the best experience possible.
@@ -8,10 +8,38 @@ We're very proud of it and like it very much. We also hope that you will enjoy i
 
 It's just a first version, but we will continue development of this template to create not just another bootstrap customization, but the whole HTML framework that can be applied in a lot of places.
 
-## Installlation
+## Theme Demo
+![alt tag](http://i.imgur.com/yOZPlps.jpg)
+**[Template Demo](http://akveo.com/blur-admin/#/dashboard)**
+
+## Installation
 
 To build the template from scratch you will be required to have following tools
 * Download and install nodejs [https://nodejs.org](https://nodejs.org)
 * Open the console inside of extracted folder and run `npm install` to fetch all dependencies
 * Run `gulp` to build sources
-* That's it! Go to `release\` folder in check out your freshly made compiled files!
+* Go to `release\` folder in check out your freshly made compiled files
+* Run `gulp serve` and enjoy the beauty!
+ 
+## Features
+* Responsive layout
+* High resolution
+* Bootstrap CSS Framework
+* Sass
+* Gulp build
+* AngularJS
+* Jquery
+* Jquery ui
+* Charts (amChart, Chartist, Chart.js, Morris)
+* Maps (Google, Leaflet, amMap)
+* etc
+
+License
+-------------
+<a href=/LICENSE.txt" target="_blank">MIT</a> license.
+
+### From akveo
+
+Enjoy!
+
+Made with ♥ by [Akveo team](http://akveo.com/).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "blur-admin",
-  "version": "0.0.0",
+  "version": "1.1.1",
   "homepage": "https://github.com/1itvinka/blur-admin",
   "authors": [
     "akveo"
@@ -46,6 +46,7 @@
     "angular-ui-router": "~0.2.15",
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
+    "chartist": "0.9.5",
     "angular-morris-chart": "~1.1.0",
     "ionrangeslider": "~2.1.2",
     "angular-bootstrap": "~0.14.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blur_admin",
-  "version": "0.0.1",
+  "version": "1.1.1",
   "devDependencies": {
     "estraverse": "~4.1.0",
     "gulp": "~3.9.0",

src/app/pages/charts/chartist/chartistCtrl.js

@@ -30,8 +30,6 @@
       ]
     };
 
-
-
     $scope.areaLineData = {
       labels: [1, 2, 3, 4, 5, 6, 7, 8],
       series: [
@@ -236,9 +234,6 @@
       new Chartist.Pie('#simple-pie', $scope.simplePieData, $scope.simplePieOptions, $scope.pieResponsive);
       new Chartist.Pie('#label-pie', $scope.labelsPieData, $scope.labelsPieOptions);
       new Chartist.Pie('#donut', $scope.simpleDonutData, $scope.simpleDonutOptions, $scope.donutResponsive);
-    }, 100);
-
-
+    });
   }
-
 })();

src/app/pages/charts/charts.module.js

@@ -23,7 +23,7 @@
           title: 'Charts',
           sidebarMeta: {
             icon: 'ion-stats-bars',
-            order: 400,
+            order: 150,
           },
         });
   }

src/app/pages/components/components.module.js

@@ -22,7 +22,7 @@
           title: 'Components',
           sidebarMeta: {
             icon: 'ion-gear-a',
-            order: 150,
+            order: 100,
           },
         });
   }

src/app/pages/components/mail/composeBox/compose.html

@@ -16,7 +16,7 @@
     <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
   </div>
 </div>
-<div class="compose-footer">
+<div class="compose-footer clearfix">
   <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
   <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
   <div class="footer-controls">

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

@@ -94,7 +94,7 @@
         author: 'Alexander',
         surname: 'Demeshko',
         header: 'Posted new message',
-        text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." © Banksy',
+        text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." ©',
         time: '15.11.2015',
         ago: '6 days ago',
         expanded: false,

src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js

@@ -70,7 +70,7 @@
         markId: 1
       },
       {
-        text: 'Write email to contact@akveo.com',
+        text: 'Write email to business cat',
         edit: false,
         markId: 3
       },

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -27,7 +27,7 @@
 
       <div class="channels-info-item">
         <div class="legend-color warning"></div>
-        <p>Ohter<span class="channel-number">+17%</span></p>
+        <p>Other<span class="channel-number">+17%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
                aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">

src/app/pages/form/form.module.js

@@ -18,7 +18,7 @@
           title: 'Form Elements',
           sidebarMeta: {
             icon: 'ion-compose',
-            order: 200,
+            order: 250,
           },
         })
         .state('form.inputs', {

src/app/pages/profile/ProfilePageCtrl.js

@@ -26,11 +26,12 @@
     $scope.socialProfiles = [
       {
         name: 'Facebook',
-        href: 'https://www.facebook.com/nasta.kartul',
+        href: 'https://www.facebook.com/akveo/',
         icon: 'socicon-facebook'
       },
       {
         name: 'Twitter',
+        href: 'https://twitter.com/akveo_inc',
         icon: 'socicon-twitter'
       },
       {
@@ -39,12 +40,12 @@
       },
       {
         name: 'LinkedIn',
-        href: 'https://www.linkedin.com/profile/view?id=177497038',
+        href: 'https://www.linkedin.com/company/akveo',
         icon: 'socicon-linkedin'
       },
       {
         name: 'GitHub',
-        href: 'https://github.com/1itvinka',
+        href: 'https://github.com/akveo',
         icon: 'socicon-github'
       },
       {

src/app/pages/profile/profile.html

@@ -42,7 +42,7 @@
           <label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
 
           <div class="col-sm-9">
-            <input type="text" class="form-control" id="inputLastName" placeholder="" value="Tyshkavets">
+            <input type="text" class="form-control" id="inputLastName" placeholder="" value="">
           </div>
         </div>
       </div>
@@ -101,7 +101,7 @@
           <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
 
           <div class="col-sm-9">
-            <input type="email" class="form-control" id="inputEmail3" placeholder="" value="tyshkavets@gmail.com">
+            <input type="email" class="form-control" id="inputEmail3" placeholder="" value="contact@akveo.com">
           </div>
         </div>
         <div class="form-group row clearfix">

src/app/pages/ui/tabs/sideTabs.html

@@ -6,7 +6,7 @@
         Take up one idea.
       </p>
 
-      <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
+      <div class="kameleon-icon-tabs kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
       <p>
         People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
         way to succeed. </p>
@@ -45,7 +45,7 @@
         Take up one idea.
       </p>
 
-      <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
+      <div class="kameleon-icon-tabs kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
       <p>
         People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
         way to succeed. </p>

src/app/pages/ui/ui.module.js

@@ -30,7 +30,7 @@
           title: 'UI Features',
           sidebarMeta: {
             icon: 'ion-android-laptop',
-            order: 100,
+            order: 200,
           },
         });
   }

src/app/theme/components/baPanel/baPanelBlur.directive.js

@@ -9,7 +9,7 @@
       .directive('baPanelBlur', baPanelBlur);
 
   /** @ngInject */
-  function baPanelBlur(baPanelBlurHelper, $window, $document) {
+  function baPanelBlur(baPanelBlurHelper, $window, $rootScope) {
     var bodyBgSize;
 
     baPanelBlurHelper.bodyBgLoad().then(function() {
@@ -23,14 +23,16 @@
     return {
       restrict: 'A',
       link: function($scope, elem) {
-        baPanelBlurHelper.bodyBgLoad().then(function() {
-          setTimeout(recalculatePanelStyle);
-        });
-        $window.addEventListener('resize', recalculatePanelStyle);
+        if(!$rootScope.$isMobile) {
+          baPanelBlurHelper.bodyBgLoad().then(function () {
+            setTimeout(recalculatePanelStyle);
+          });
+          $window.addEventListener('resize', recalculatePanelStyle);
 
-        $scope.$on('$destroy', function() {
-          $window.removeEventListener('resize', recalculatePanelStyle);
-        });
+          $scope.$on('$destroy', function () {
+            $window.removeEventListener('resize', recalculatePanelStyle);
+          });
+        }
 
         function recalculatePanelStyle() {
           if (!bodyBgSize) {

src/app/theme/components/baPanel/baPanelBlurHelper.service.js

@@ -11,7 +11,7 @@
   /** @ngInject */
   function baPanelBlurHelper($q) {
     var res = $q.defer();
-    var computedStyle = getComputedStyle(document.body);
+    var computedStyle = getComputedStyle(document.body, ':before');
     var image = new Image();
     image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
     image.onerror = function() {
@@ -28,6 +28,7 @@
     this.getBodyBgImageSizes = function() {
       var elemW = document.documentElement.clientWidth;
       var elemH = document.documentElement.clientHeight;
+      if(elemW <= 640) return;
       var imgRatio = (image.height / image.width);       // original img ratio
       var containerRatio = (elemH / elemW);     // container ratio
 

src/app/theme/components/msgCenter/msgCenter.html

@@ -16,7 +16,7 @@
       </div>
       <div class="msg-list">
         <a href class="clearfix" ng-repeat="msg in notifications">
-          <div class="img-area"><img ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>
+          <div class="img-area"><img ng-class="{'photo-msg-item' : !msg.image}" ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>
           <div class="msg-area">
             <div ng-bind-html="getMessage(msg)"></div>
             <span>{{ msg.time }}</span>
@@ -40,7 +40,7 @@
       </div>
       <div class="msg-list">
         <a href class="clearfix" ng-repeat="msg in messages">
-          <div class="img-area"><img ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>
+          <div class="img-area"><img class="photo-msg-item" ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>
           <div class="msg-area">
             <div>{{ msg.text }}</div>
             <span>{{ msg.time }}</span>

src/app/theme/directives/zoomIn.js

@@ -14,7 +14,7 @@
       link: function ($scope, elem) {
         var delay = 1000;
 
-        if ($rootScope.$pageLoaded) {
+        if ($rootScope.$pageFinishedLoading) {
           delay = 100;
         }
 

src/app/theme/services/preloader.js

@@ -11,11 +11,20 @@
   /** @ngInject */
   function preloader($q) {
     return {
-      load: function (src) {
+      loadImg: function (src) {
         var d = $q.defer();
         var img = new Image();
         img.src = src;
-        img.onload = d.resolve;
+        img.onload = function(){
+          d.resolve();
+        };
+        return d.promise;
+      },
+      loadAmCharts : function(){
+        var d = $q.defer();
+        AmCharts.ready(function(){
+          d.resolve();
+        });
         return d.promise;
       }
     }

src/app/theme/theme.run.js

@@ -6,34 +6,33 @@
   'use strict';
 
   angular.module('BlurAdmin.theme')
-      .run(themeRun);
+    .run(themeRun);
 
   /** @ngInject */
   function themeRun($timeout, $rootScope, layoutSizes, layoutPaths, preloader, $q) {
 
-    $q.all([
-      preloader.load(layoutPaths.images.root + 'blur-bg.jpg'),
-      preloader.load(layoutPaths.images.root + 'blur-bg-blurred.jpg')
-    ]).then(function(){
-      if(!$rootScope.$pageFinishedLoading){
-        $rootScope.$pageFinishedLoading = true;
-      }
-      if(!$rootScope.$pageLoaded){
-        $rootScope.$pageLoaded = true;
-      }
+    $rootScope.$isMobile =  (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
+    var whatToWait = [
+      preloader.loadAmCharts(),
+      $timeout(3000)
+    ];
+
+    if ($rootScope.$isMobile) {
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
+    } else {
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
+    }
+
+    $q.all(whatToWait).then(function () {
+      $rootScope.$pageFinishedLoading = true;
     });
 
     $timeout(function () {
-      if(!$rootScope.$pageFinishedLoading){
+      if (!$rootScope.$pageFinishedLoading) {
         $rootScope.$pageFinishedLoading = true;
       }
-    }, 2000);
-
-    $timeout(function () {
-      if(!$rootScope.$pageLoaded){
-        $rootScope.$pageLoaded = true;
-      }
-    }, 4000);
+    }, 7000);
 
     $rootScope.$isMenuCollapsed = window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
   }

src/index.html

@@ -24,7 +24,8 @@
   <!-- endinject -->
   <!-- endbuild -->
 </head>
-<body>
+<body ng-class="{'mobile' : $isMobile}">
+<div class="body-bg"></div>
 <main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $isMenuCollapsed }">
 
   <sidebar></sidebar>

src/sass/app/_email.scss

@@ -729,7 +729,7 @@
 }
 
 .modal .modal-dialog.modal-compose {
-  width: 398px;
+  max-width: 398px;
   position: fixed;
   bottom: 0;
   right: 0;
@@ -738,6 +738,7 @@
   .form-control, .bootstrap-tagsinput input {
     @include placeholderStyle($default-text, 1);
     color: $default-text;
+    border-radius: 0;
   }
   .ta-toolbar {
     .btn {
@@ -754,6 +755,12 @@
   @include overrideColors($default-text)
 }
 
+@media (max-width: 640px) {
+  .modal .modal-dialog.modal-compose {
+    max-height: 600px;
+  }
+}
+
 body.badmin-transparent {
   .mail-navigation-container {
     overflow: hidden;

src/sass/app/_iconsPage.scss

@@ -33,31 +33,54 @@ a.see-all-icons {
   float: right;
 }
 
-.awesomeIcons{
+.awesomeIcons {
   height: 308px;
 }
 
 .kameleon-row {
+  display: inline-block;
+  min-width: 102px;
   width: 20%;
-  float: left;
-  min-height: 80px;
-  position: relative;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 12px;
-  & > div {
-    width: 70%;
+  .kameleon-icon {
+    padding:0 10px;
+    img {
+      width: 81px;
+    }
+  }
+}
+
+@media (max-width: 750px) {
+  .kameleon-row {
+    width: 25%;
+  }
+}
+
+@media (max-width: 550px) {
+  .kameleon-row {
+    width: 33%;
+  }
+}
+
+@media (max-width: 430px) {
+  .kameleon-row {
+    width: 50%;
+  }
+}
+
+.kameleon-icon-tabs {
+  max-width: 84px;
+  img {
+    width: 100%;
+    min-width: 81px;
+    min-height: 81px;
   }
 }
 
 .kameleon-icon {
   text-align: center;
   margin: 0 auto;
-  max-width: 84px;
   img {
     width: 100%;
-    min-width: 81px;
-    min-height: 82px;
   }
   span {
     display: block;
@@ -97,9 +120,4 @@ a.see-all-icons {
   }
 }
 
-@media (max-width: 1500px) and (min-width: $resL), (max-width: $resS) {
-  .kameleon-row {
-    width: 25%;
-  }
-}
 

src/sass/app/_typography.scss

@@ -57,7 +57,7 @@ h5 {
     }
 
     .panel.with-scroll .panel-body{
-      height: 100%;
+      height: calc(100% - 45px);
     }
 
     .panel-content{
@@ -334,6 +334,7 @@ a.learn-more {
   height: 400px;
   img {
     height: 100%;
+    width: 100%;
     display: block
   }
 }
@@ -422,7 +423,7 @@ a.learn-more {
 
 .panel.banner-column-panel {
   padding: 0;
-  margin-bottom: 50px;
+  margin-bottom: 90px;
 
   .panel-body{
     padding: 0;

src/sass/theme/_layout.scss

@@ -18,6 +18,7 @@ body {
   @include main-background();
 }
 
+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 {
   html{
@@ -35,6 +36,9 @@ a {
   outline: 0 !important;
 }
 
+.body-bg{
+  display: none;
+}
 .al-header {
   display: block;
   height: 49px;

src/sass/theme/_preloader.scss

@@ -6,6 +6,14 @@
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
   }
 }
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg); /* Firefox 16+*/
+  }
+  100% {
+    -moz-transform: rotate(360deg); /* Firefox 16+*/
+  }
+}
 
 @keyframes spin {
   0% {

src/sass/theme/components/_msgCenter.scss

@@ -148,7 +148,9 @@
         img {
           width: 36px;
           height: 36px;
-          border-radius: 4px;
+          &.photo-msg-item{
+            border-radius: 18px;
+          }
         }
         & > div {
           width: 36px;

src/sass/theme/conf/_mixins.scss

@@ -51,8 +51,19 @@
 
 @mixin main-background() {
   $mainBgUrl: $images-root + 'blur-bg.jpg';
-  background: url($mainBgUrl) no-repeat center center fixed;
-  background-size: cover;
+
+  &::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url($mainBgUrl) no-repeat center center;
+    background-size: cover;
+    will-change: transform;
+    z-index: -1;
+  }
 }
 
 @mixin bg-translucent-dark($opacity) {

src/sass/theme/dashboard/_trafficChart.scss

@@ -226,9 +226,36 @@
   }
 }
 
+
+@media (max-width: 380px){
+
+  .traffic-chart{
+    width: 240px;
+  }
+
+  .canvas-holder{
+    width: 240px;
+    height: 240px;
+  }
+
+  .chart-bg {
+    top: 30px;
+  }
+}
+@media (max-width: 320px){
+  .chart-bg {
+    left: 50px;
+    top: 50px;
+    width: 142px;
+    height: 142px;
+  }
+}
+
+
 body.badmin-transparent{
   .traffic-chart canvas{
     border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
     border-radius: 150px;
   }
 }

src/sass/theme/skins/_02_transparent.scss

@@ -1,6 +1,22 @@
 body.badmin-transparent {
+  &.mobile{
+    background: none;
+    .body-bg{
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      @include main-background();
+      background-attachment: inherit;
+    }
+    .panel-blur {
+      background: transparent;
+    }
+  }
   @include overrideColors(#fff);
-  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
+  @include overridePanelBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
   .default-color {
     color: $default-text !important;;
   }
@@ -12,6 +28,10 @@ body.badmin-transparent {
     .panel-heading {
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+      transform: translate3d(0,0,0);
+    }
+    .panel-body {
+      transform: translate3d(0,0,0);
     }
   }
   .btn-default {