Update README.md

Update demo.js

Gruntfile.js

@@ -4,6 +4,8 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-includes');
+  
   grunt.initConfig({
     watch: {
       // if any .less file changes in directory "build/less/" run the "less"-task.
@@ -61,6 +63,20 @@ module.exports = function (grunt) {
           'dist/js/app.min.js': ['dist/js/app.js']
         }
       }
+    },
+    //Build the documentaion files
+    includes: {
+      build: {
+        src: ['*.html'], // Source files 
+        dest: 'documentation/', // Destination directory 
+        flatten: true,
+        cwd: 'documentation/build',
+        options: {
+          silent: true,
+          includePath: 'documentation/build/include'
+          //banner: '<!-- I am a banner <% includes.files.dest %> -->'
+        }
+      }
     }
   });
   // the default task (running "grunt" in console) is "watch"

README.md

@@ -29,13 +29,13 @@ Download from Github or [visit Almsaeed Studio](http://almsaeedstudio.com) and d
 - Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
 - Clone to your machine 
 ```
-git clone https://github.com/YOUR_USERNAME/AdminLTE.git"
+git clone https://github.com/YOUR_USERNAME/AdminLTE.git
 ```
 
 **Bower**
 
 ```
-bower install git://github.com/almasaeed2010/AdminLTE.git
+bower install admin-lte
 ```
 
 **Composer**
@@ -62,7 +62,7 @@ Contribution
 Contribution are always **welcome and recommended**! Here is how:
 
 - Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
-- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git"
+- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
 - Make your changes
 - Create a pull request
 
@@ -78,13 +78,41 @@ License
 AdminLTE is an open source project by [Almsaeed Studio](http://almsaeedstudio.com) that is licensed under [MIT](http://opensource.org/licenses/MIT). Almsaeed Studio
 reserves the right to change the license of future releases.
 
+Todo List
+---------
+- Light sidebar colors
+- Right sidebar
+- Minified main-sidebar 
+- Right to left support
+- Custom pace style
+
 Legacy Realeases
 ----------------
 AdminLTE 1.x can be easily upgraded to 2.x using [this guide](http://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#browsers), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/almasaeed2010/AdminLTE/releases) section above.
 
 Change log
 ----------
-**v2.0:**
+**v2.0.4:**
+- Fixed bower.json to pick up newest release.
+- 
+**v2.0.3**
+- Bug fixes
+- Fixed extra page when printing issue #264
+- Updated documentation and fixed links scrolling issue
+- Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
+- Fixed sidebar stretching issue #275
+- Fixed checkbox out of bounds issue in WYSIHTML5 editor.
+
+**v2.0.2:**
+- Solved issue with hidden arrow in select inputs.
+
+**v2.0.1:**
+- Updated README.md
+- Fixed versioning issue in CSS, LESS, and JS
+- Updated box-shadow for boxes
+- Updated docs
+
+**v2.0.0:**
 
 - Major layout bug fixes
 - Change in layout mark up
@@ -117,13 +145,13 @@ Change log
 - Bootstrap & jQuery are now hosted locally
 - Created documentation.
 
-**ver 1.2:**
+**ver 1.2.0:**
 
 - Fixed the sidebar scroll issue when using the fixed layout.
 - Added [Bootstrap Social Buttons](http://lipis.github.io/bootstrap-social/ "Bootstrap Social") plugin.
 - Fixed RequireJS bug. Thanks to [StaticSphere](https://github.com/StaticSphere "github user"). 
 
-**ver 1.1:**
+**ver 1.1.0:**
 
 - Added new skin. class: .skin-black
 - Added [pace](http://github.hubspot.com/pace/docs/welcome/ "pace") plugin.
@@ -138,6 +166,8 @@ Image Credits
 
 [Unsplash](https://unsplash.com/)
 
+[Uifaces](http://uifaces.com/)
+
 Donations
 ---------
 Donations are **greatly appreciated!**

bower.json

@@ -0,0 +1,34 @@
+{
+  "name": "AdminLTE",
+  "version": "2.0.3",
+  "homepage": "http://almsaeedstudio.com",
+  "authors": [
+    "Abdullah Almsaeed <almasaeed2010@gmail.com>"
+  ],
+  "description": "Admin dashboard and control panel template",
+  "main": [
+    "index2.html",
+    "dist/css/AdminLTE.css",
+    "dist/js/app.js",
+    "build/less/AdminLTE.less"
+  ],
+  "keywords": [
+    "css",
+    "js",
+    "html",
+    "template",
+    "admin",
+    "bootstrap",
+    "theme",
+    "backend",
+    "responsive"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "/.*",
+    "node_modules",
+    "bower_components",
+    "composer.json",
+    "documentaion"
+  ]
+}

build/less/AdminLTE.less

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v2.0.1
+ *   AdminLTE v2.0.4
  *   Author: Almsaeed Studio
  *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
  *   License: Open source - MIT
@@ -52,15 +52,6 @@
 @import "404_500_errors.less";
 @import "invoice.less";
 
-//Skins
-//-------
-//@import "skins/skin-blue.less";
-//@import "skins/skin-black.less";
-//@import "skins/skin-red.less";
-//@import "skins/skin-green.less";
-//@import "skins/skin-yellow.less";
-//@import "skins/skin-purple.less";
-
 //Plugins
 //--------
 @import "bootstrap-social.less";
@@ -69,3 +60,4 @@
 //Miscellaneous
 //-------------
 @import "miscellaneous.less";
+@import "print.less";

build/less/boxes.less

@@ -137,7 +137,7 @@
   > .overlay,
   > .loading-img {
     position: absolute;
-    top: -3px;
+    top: 0;
     left: 0;
     width: 100%;
     height: 100%;

build/less/core.less

@@ -40,7 +40,7 @@ body {
 
 /*
  * Content Wrapper - contins main content
- * ```.right-side has been deprecated as of v2.0 in favor of .content-wrapper  ```
+ * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
  */
 .content-wrapper, 
 .right-side,
@@ -135,7 +135,9 @@ h6,
 a {
   color: @link-color;
 }
-a:hover, a:active, a:focus {
+a:hover,
+a:active,
+a:focus {
   outline: none;
   text-decoration: none;
   color: @link-hover-color;
@@ -151,25 +153,4 @@ a:hover, a:active, a:focus {
     display: block;
     margin-top: 5px;
   }
-}
-
-/* Don't display when printing */
-@media print {
-  //Add to elements that you do not want to show when printing
-  .no-print {
-    display: none;
-  }
-
-  //Elements that we want to hide when printing
-  .main-sidebar,
-  .left-side,
-  .main-header,
-  .content-header {
-    display: none;
-  }
-  //This is the only element that should appear, so let's remove the margins
-  .content-wrapper,
-  .right-side {
-    margin: 0!important;
-  }
 }

build/less/direct-chat.less

@@ -7,7 +7,7 @@
     .border-bottom-radius(0);
     position: relative;
     overflow-x: hidden;
-    padding: 0;    
+    padding: 0;
   }
   &.chat-pane-open {
     .direct-chat-contacts {
@@ -98,28 +98,25 @@
 }
 //Direct chat contacts pane
 .direct-chat-contacts-open {
-  /*.direct-chat-messages {
-    .translate(-101%, 0);
-  }*/
   .direct-chat-contacts {
     .translate(0, 0);
   }
 }
 .direct-chat-contacts {
-  .translate(101%, 0);
+  .translate(100%, 0);
   position: absolute;
   top: 0;
   bottom: 0;
   height: 250px;
   width: 100%;
   background: #222d32;
-  color: #fff;  
+  color: #fff;
   overflow: auto;
 }
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
-  &:extend(.list-unstyled); 
+  &:extend(.list-unstyled);
   > li {
     .clearfix();
     border-bottom: 1px solid rgba(0,0,0,0.2);

build/less/dropdown.less

@@ -183,10 +183,15 @@
 //User menu
 .navbar-nav > .user-menu {
   > .dropdown-menu {
-    .border-radius(0);
+    .border-top-radius(0);    
     padding: 1px 0 0 0;
     border-top-width: 0;
     width: 280px;
+    
+    &,
+    > .user-body {
+      .border-bottom-radius(4px);
+    }
     // Header menu
     > li.user-header {
       height: 175px;

build/less/forms.less

@@ -3,10 +3,7 @@
  * ---------------
  */
 .form-control {
-  .border-radius(@input-radius)!important;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+  .border-radius(@input-radius)!important;  
   box-shadow: none;
   border-color: @gray;
   &:focus {
@@ -23,6 +20,12 @@
   &::-webkit-input-placeholder {
     color: #bbb;
   }
+
+  &:not(select) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
 }
 
 .form-group {

build/less/header.less

@@ -149,6 +149,7 @@
     > li > a {
       color: #444;
       text-decoration: none;
+      display: inline-block;
       > .fa, > .glyphicon, > .ion {
         margin-right: 5px;
       }

build/less/info-box.less

@@ -54,6 +54,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.info-box-text {
+  text-transform: uppercase;
+}
 .info-box-more {
   display: block;
 }

build/less/invoice.less

@@ -13,27 +13,4 @@
 
 .invoice-title {
   margin-top: 0;
-}
-
-/* Enhancement for printing */
-@media print {
-  .invoice {
-    width: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-  .invoice-col {
-    float: left;
-    width: 33.3333333%;
-  }
-
-  .table-responsive {
-    overflow: auto;
-    > .table tr th,
-    > .table tr td {
-      white-space: normal!important;
-    }
-  }
-
 }

build/less/print.less

@@ -0,0 +1,48 @@
+/*
+ * Misc: print
+ * -----------
+ */
+@media print {
+  //Add to elements that you do not want to show when printing
+  .no-print {
+    display: none!important;
+  }
+  //Elements that we want to hide when printing
+  .main-sidebar,
+  .left-side,
+  .main-header,
+  .content-header {
+    &:extend(.no-print);
+  }
+  //This is the only element that should appear, so let's remove the margins
+  .content-wrapper,
+  .right-side,
+  .main-footer {
+    margin-left: 0!important;    
+    min-height: 0!important;
+    .translate(0,0)!important;     
+  }
+  .fixed .content-wrapper,
+  .fixed .right-side {
+    padding-top: 0!important;
+  }
+  //Invoice printing
+  .invoice {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  .invoice-col {
+    float: left;
+    width: 33.3333333%;
+  }
+  //Make sure table content displays properly
+  .table-responsive {
+    overflow: auto;
+    > .table tr th,
+    > .table tr td {
+      white-space: normal!important;
+    }
+  }
+}

build/less/sidebar.less

@@ -3,15 +3,15 @@
  * ------------------
  */
 //Main Sidebar
-// ``` .left-side has been deprecated in favor of .main-sidebar ```
+// ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ```
 
 .main-sidebar,
 .left-side {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 0;  
   padding-top: 50px;
-  height: 100%;
+  min-height: 100%;
   width: @sidebar-width;
   z-index: 810;
   .transition-transform(@transition-speed @transition-fn);
@@ -23,7 +23,6 @@
       .translate(-@sidebar-width, 0);
     }
   }
-
   .sidebar-open & {
     @media (max-width: @screen-xs-max) {
       .translate(0, 0);
@@ -79,7 +78,6 @@
   list-style: none;
   margin: 0;
   padding: 0;
-
   > li {
     position: relative;
     margin: 0;

changelog

@@ -1,6 +1,25 @@
 CHANGE LOG:
+v2.0.4:
+- Fixed bower.json to pick up newest release.
 
-v2.0
+v2.0.3:
+- Bug fixes
+- Fixed extra page when printing issue #264
+- Updated documentation and fixed links scrolling issue
+- Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
+- Fixed sidebar stretching issue #275
+- Fixed checkbox out of bounds issue in WYSIHTML5 editor.
+
+v2.0.2:
+- Solved issue with hidden arrow in select inputs.
+
+v2.0.1:
+- Updated README.md
+- Fixed versioning issue in CSS, LESS, and JS
+- Updated box-shadow for boxes
+- Updated docs
+
+v2.0.0
 - Major layout bug fixes
 - Change in layout mark up
 - Added transitions to the sidebar

dist/css/AdminLTE.css

@@ -1,6 +1,6 @@
 @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
 /*!
- *   AdminLTE v2.0.1
+ *   AdminLTE v2.0.4
  *   Author: Almsaeed Studio
  *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
  *   License: Open source - MIT
@@ -52,7 +52,7 @@ body {
 }
 /*
  * Content Wrapper - contins main content
- * ```.right-side has been deprecated as of v2.0 in favor of .content-wrapper  ```
+ * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
  */
 .content-wrapper,
 .right-side,
@@ -177,22 +177,6 @@ a:focus {
   display: block;
   margin-top: 5px;
 }
-/* Don't display when printing */
-@media print {
-  .no-print {
-    display: none;
-  }
-  .main-sidebar,
-  .left-side,
-  .main-header,
-  .content-header {
-    display: none;
-  }
-  .content-wrapper,
-  .right-side {
-    margin: 0!important;
-  }
-}
 /*
  * Component: Main Header
  * ----------------------
@@ -329,6 +313,7 @@ a:focus {
 .content-header > .breadcrumb > li > a {
   color: #444;
   text-decoration: none;
+  display: inline-block;
 }
 .content-header > .breadcrumb > li > a > .fa,
 .content-header > .breadcrumb > li > a > .glyphicon,
@@ -403,7 +388,7 @@ a:focus {
   top: 0;
   left: 0;
   padding-top: 50px;
-  height: 100%;
+  min-height: 100%;
   width: 230px;
   z-index: 810;
   -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
@@ -727,11 +712,17 @@ a:focus {
   margin: 0;
 }
 .navbar-nav > .user-menu > .dropdown-menu {
-  border-radius: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
   padding: 1px 0 0 0;
   border-top-width: 0;
   width: 280px;
 }
+.navbar-nav > .user-menu > .dropdown-menu,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
 .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
   height: 175px;
   padding: 10px;
@@ -889,9 +880,6 @@ a:focus {
  */
 .form-control {
   border-radius: 0px !important;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   box-shadow: none;
   border-color: #d2d6de;
 }
@@ -909,6 +897,11 @@ a:focus {
 .form-control::-webkit-input-placeholder {
   color: #bbb;
 }
+.form-control:not(select) {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
 .form-group.has-success label {
   color: #00a65a;
 }
@@ -1307,7 +1300,7 @@ a:focus {
 .box > .overlay,
 .box > .loading-img {
   position: absolute;
-  top: -3px;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
@@ -1649,6 +1642,9 @@ a:focus {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.info-box-text {
+  text-transform: uppercase;
+}
 .info-box-more {
   display: block;
 }
@@ -2343,11 +2339,6 @@ table.text-center th {
 .direct-chat-timestamp {
   color: #999;
 }
-.direct-chat-contacts-open {
-  /*.direct-chat-messages {
-    .translate(-101%, 0);
-  }*/
-}
 .direct-chat-contacts-open .direct-chat-contacts {
   -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
@@ -2355,10 +2346,10 @@ table.text-center th {
   transform: translate(0, 0);
 }
 .direct-chat-contacts {
-  -webkit-transform: translate(101%, 0);
-  -ms-transform: translate(101%, 0);
-  -o-transform: translate(101%, 0);
-  transform: translate(101%, 0);
+  -webkit-transform: translate(100%, 0);
+  -ms-transform: translate(100%, 0);
+  -o-transform: translate(100%, 0);
+  transform: translate(100%, 0);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2837,26 +2828,6 @@ table.text-center th {
 .invoice-title {
   margin-top: 0;
 }
-/* Enhancement for printing */
-@media print {
-  .invoice {
-    width: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-  .invoice-col {
-    float: left;
-    width: 33.3333333%;
-  }
-  .table-responsive {
-    overflow: auto;
-  }
-  .table-responsive > .table tr th,
-  .table-responsive > .table tr td {
-    white-space: normal!important;
-  }
-}
 /*
  * Plugin: Social Buttons
  * ----------------------
@@ -4049,3 +4020,47 @@ Gradient Background colors
   opacity: 1;
   filter: alpha(opacity=100);
 }
+/*
+ * Misc: print
+ * -----------
+ */
+@media print {
+  .no-print,
+  .main-sidebar,
+  .left-side,
+  .main-header,
+  .content-header {
+    display: none!important;
+  }
+  .content-wrapper,
+  .right-side,
+  .main-footer {
+    margin-left: 0!important;
+    min-height: 0!important;
+    -webkit-transform: translate(0, 0) !important;
+    -ms-transform: translate(0, 0) !important;
+    -o-transform: translate(0, 0) !important;
+    transform: translate(0, 0) !important;
+  }
+  .fixed .content-wrapper,
+  .fixed .right-side {
+    padding-top: 0!important;
+  }
+  .invoice {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  .invoice-col {
+    float: left;
+    width: 33.3333333%;
+  }
+  .table-responsive {
+    overflow: auto;
+  }
+  .table-responsive > .table tr th,
+  .table-responsive > .table tr td {
+    white-space: normal!important;
+  }
+}

dist/js/app.js

@@ -1,5 +1,5 @@
-/*! AdminLTE 2.0.1 app.js
- * ======================
+/*! AdminLTE app.js
+ * ================
  * Main JS application file for AdminLTE v2. This file
  * should be included in all pages. It controls some layout
  * options and implements exclusive AdminLTE plugins.
@@ -7,25 +7,25 @@
  * @Author  Almsaeed Studio
  * @Support <http://www.almsaeedstudio.com>
  * @Email   <support@almsaeedstudio.com>
- * @version 2.0
+ * @version 2.0.4
  * @license MIT <http://opensource.org/licenses/MIT>
  */
 
+'use strict';
+
 //Make sure jQuery has been loaded before app.js
 if (typeof jQuery === "undefined") {
   throw new Error("AdminLTE requires jQuery");
 }
 
-'use strict';
-
 /* AdminLTE
  *
  * @type Object
  * @description $.AdminLTE is the main object for the template's app.
- *				It's used for implementing functions and options related
- *				to the template. Keeping everything wrapped in an object
- *				prevents conflict with other plugins and is a better
- *				way to organize our code.
+ *              It's used for implementing functions and options related
+ *              to the template. Keeping everything wrapped in an object
+ *              prevents conflict with other plugins and is a better
+ *              way to organize our code.
  */
 $.AdminLTE = {};
 
@@ -53,8 +53,8 @@ $.AdminLTE.options = {
   enableBSToppltip: true,
   BSTooltipSelector: "[data-toggle='tooltip']",
   //Enable Fast Click. Fastclick.js creates a more
-  //native touch ecperience with touch devices. If you
-  //choose to enable the plugin, make sure you load the script 
+  //native touch experience with touch devices. If you
+  //choose to enable the plugin, make sure you load the script
   //before AdminLTE's app.js
   enableFastclick: true,
   //Box Widget Plugin. Enable this plugin
@@ -77,6 +77,13 @@ $.AdminLTE.options = {
       collapse: '[data-widget="collapse"]'
     }
   },
+  //Direct Chat plugin options
+  directChat: {
+    //Enable direct chat by default
+    enable: true,
+    //The button to open and close the chat contacts pane
+    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
+  },
   //Define the set of colors to use globally around the website
   colors: {
     lightBlue: "#3c8dbc",
@@ -95,6 +102,15 @@ $.AdminLTE.options = {
     maroon: "#D81B60",
     black: "#222222",
     gray: "#d2d6de"
+  },
+  //The standard screen sizes that bootstrap uses.
+  //If you change these in the variables.less file, change
+  //them here too.
+  screenSizes: {
+    xs: 480,
+    sm: 768,
+    md: 992,
+    lg: 1200
   }
 };
 
@@ -138,11 +154,20 @@ $(function () {
   if (o.enableBoxWidget) {
     $.AdminLTE.boxWidget.activate();
   }
-  
-  if(o.enableFastclick && typeof FastClick != 'undefined') {
+
+  //Activate fast click
+  if (o.enableFastclick && typeof FastClick != 'undefined') {
     FastClick.attach(document.body);
   }
 
+  //Activate direct chat widget
+  if (o.directChat.enable) {
+    $(o.directChat.contactToggleSelector).click(function () {
+      var box = $(this).parents('.direct-chat').first();
+      box.toggleClass('direct-chat-contacts-open');
+    });
+  }
+
   /*
    * INITIALIZE BUTTON TOGGLE
    * ------------------------
@@ -234,16 +259,31 @@ $.AdminLTE.layout = {
  * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
  */
 $.AdminLTE.pushMenu = function (toggleBtn) {
+  //Get the screen sizes
+  var screenSizes = this.options.screenSizes;
+
   //Enable sidebar toggle
   $(toggleBtn).click(function (e) {
     e.preventDefault();
+
     //Enable sidebar push menu
-    $("body").toggleClass('sidebar-collapse');
-    $("body").toggleClass('sidebar-open');
+    if ($(window).width() > (screenSizes.sm - 1)) {
+      $("body").toggleClass('sidebar-collapse');
+    }
+    //Handle sidebar push menu for small screens
+    else {
+      if ($("body").hasClass('sidebar-open')) {
+        $("body").removeClass('sidebar-open');
+        $("body").removeClass('sidebar-collapse')
+      } else {
+        $("body").addClass('sidebar-open');
+      }
+    }
   });
+
   $(".content-wrapper").click(function () {
-    //Enable hide menu when clicking on the content-wrapper on small screens    
-    if ($(window).width() <= 767 && $("body").hasClass("sidebar-open")) {
+    //Enable hide menu when clicking on the content-wrapper on small screens
+    if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
       $("body").removeClass('sidebar-open');
     }
   });
@@ -259,6 +299,8 @@ $.AdminLTE.pushMenu = function (toggleBtn) {
  * @Usage: $.AdminLTE.tree('.sidebar')
  */
 $.AdminLTE.tree = function (menu) {
+  var _this = this;
+
   $("li a", $(menu)).click(function (e) {
     //Get the clicked link and the next element
     var $this = $(this);
@@ -269,6 +311,8 @@ $.AdminLTE.tree = function (menu) {
       //Close the menu
       checkElement.slideUp('normal', function () {
         checkElement.removeClass('menu-open');
+        //Fix the layout in case the sidebar stretches over the height of the window
+        //_this.layout.fix();
       });
       checkElement.parent("li").removeClass("active");
     }
@@ -289,6 +333,8 @@ $.AdminLTE.tree = function (menu) {
         checkElement.addClass('menu-open');
         parent.find('li.active').removeClass('active');
         parent_li.addClass('active');
+        //Fix the layout in case the sidebar stretches over the height of the window
+        _this.layout.fix();
       });
     }
     //if this isn't a link, prevent the page from being redirected
@@ -305,7 +351,7 @@ $.AdminLTE.tree = function (menu) {
  *
  * @type Object
  * @usage $.AdminLTE.boxWidget.activate()
- *								Set all of your option in the main $.AdminLTE.options object
+ *        Set all of your option in the main $.AdminLTE.options object
  */
 $.AdminLTE.boxWidget = {
   activate: function () {
@@ -362,7 +408,7 @@ $.AdminLTE.boxWidget = {
  * This is a custom plugin to use with the compenet BOX. It allows you to add
  * a refresh button to the box. It converts the box's state to a loading state.
  *
- *	@type plugin
+ * @type plugin
  * @usage $("#box-widget").boxRefresh( options );
  */
 (function ($) {
@@ -384,7 +430,7 @@ $.AdminLTE.boxWidget = {
     }, options);
 
     //The overlay
-    var overlay = $('<div class="overlay"></div><div class="loading-img"></div>');
+    var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
 
     return this.each(function () {
       //if a source is specified

dist/js/demo.js

@@ -59,7 +59,7 @@ $(function () {
   var skins_list = $("<ul />", {"class": 'list-unstyled'});
   var skin_blue =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-blue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-blue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 10px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Blue</p>"
@@ -67,7 +67,7 @@ $(function () {
   skins_list.append(skin_blue);
   var skin_black =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 10px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 10px; background: #fefefe;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Black</p>"
@@ -75,7 +75,7 @@ $(function () {
   skins_list.append(skin_black);
   var skin_purple =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-purple\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-purple\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Purple</p>"
@@ -83,7 +83,7 @@ $(function () {
   skins_list.append(skin_purple);
   var skin_green =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-green\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-green\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Green</p>"
@@ -91,7 +91,7 @@ $(function () {
   skins_list.append(skin_green);
     var skin_red =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-red\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-red\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Red</p>"
@@ -99,7 +99,7 @@ $(function () {
   skins_list.append(skin_red);
     var skin_yellow =
           $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='#' onclick='change_skin(\"skin-yellow\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-yellow\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
                   + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
                   + "<p class='text-center'>Skin Yellow</p>"
@@ -159,4 +159,4 @@ function setup() {
   var tmp = get('skin');
   if (tmp && $.inArray(tmp, my_skins))
     change_skin(tmp);
-}
+}

dist/js/pages/dashboard2.js

@@ -1,10 +1,5 @@
 'use strict';
 $(function () {
-  
-  //Simple implementation of direct chat contact pane toggle (TEMPORARY)
-  $('[data-widget="chat-pane-toggle"]').click(function(){
-    $("#myDirectChat").toggleClass('direct-chat-contacts-open');
-  });
 
   /* ChartJS
    * -------