Updates to v2.1 alpha

build/less/sidebar-mini.less

@@ -23,30 +23,14 @@
         .translate(0, 0);
         width: 50px!important;
         z-index: 850;
-
-        //Keep only the image of the user in the user panel
-        .user-panel {
-          > .info {
-            display: none;
-          }
-        }
       }
 
       .sidebar-menu {
-        //Make the sidebar links, menus, labels, badeges
-        //and angle icons disappear
         > li {
           position: relative;
           > a {
             margin-right: 0;
           }
-          > a > span,
-          > .treeview-menu,
-          > a > .pull-right,
-          &.header {
-            display: none!important;
-          }
-
           > a > span {
             border-top-right-radius: 4px;
           }
@@ -69,6 +53,8 @@
             > a > span:not(.pull-right),
               > .treeview-menu {
               display: block!important;
+              visibility: visible;
+              .opacity(1);
               position: absolute;
               width: @sidebar-width - 50;
               left: 50px;
@@ -77,6 +63,7 @@
             //position the header & treeview menus
             > a > span {
               top: 0;
+              margin-left: -3px;
               padding: 12px 5px 12px 20px;
               background-color: inherit;
             }
@@ -88,9 +75,15 @@
         }
       }
 
-      //One more thing to remove because it doesn't fit :-z
+      //Make the sidebar links, menus, labels, badeges
-      .sidebar-form {
+      //and angle icons disappear
-        display: none;
+      .main-sidebar .user-panel > .info,
+      .sidebar-form,
+      .sidebar-menu > li > a > span,
+      .sidebar-menu > li > .treeview-menu,
+      .sidebar-menu >li > a > .pull-right,
+      .sidebar-menu li.header {
+        display: none!important;
       }
 
       .main-header {
@@ -108,8 +101,7 @@
           }
         }
 
-        //Of course, since the logo got smaller, we need to fix the
+        //Since the logo got smaller, we need to fix the navbar's position
-        //navbar's position
         .navbar {
           margin-left: 50px;
         }
@@ -117,3 +109,34 @@
     }
   }
 }
+
+.main-sidebar .user-panel > .info,
+.sidebar-form,
+.sidebar-menu > li > a > span,
+.sidebar-menu > li > .treeview-menu,
+.sidebar-menu >li > a > .pull-right,
+.sidebar-menu li.header {
+  .transition(display 0s linear 1s);
+}
+
+//A fix for text overflow while transitioning from sidebar mini to full sidebar
+.sidebar-menu > li > a,
+.main-sidebar .user-panel,
+.sidebar-menu > li.header
+.treeview-menu > li > a {
+  width: 100%;
+  white-space: nowrap!important;
+}
+.sidebar-menu > li.header {
+  overflow: hidden;
+  text-overflow: clip;
+}
+.sidebar-menu li > a {
+  position: relative;
+  > .pull-right {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -7px;
+  }
+}

build/less/sidebar.less

@@ -45,7 +45,10 @@
 
 //Sidebar user panel
 .user-panel {
+  position: relative;
+  width: 100%;
   padding: 10px;
+  overflow: hidden;
   .clearfix();
   > .image > img {
     width: 100%;
@@ -53,22 +56,24 @@
     height: auto;
   }
   > .info {    
-    font-weight: 600;
     padding: 5px 5px 5px 15px;
-    font-size: 14px;
     line-height: 1;
-  }
+    position: absolute;
-  > .info > p {
+    left: 55px;    
-    margin-bottom: 9px;
+    > p {
-  }
+      font-weight: 600;
-  > .info > a {
+      margin-bottom: 9px;
-    text-decoration: none;
+    }
-    padding-right: 5px;
+    > a {
-    margin-top: 3px;
+      text-decoration: none;
-    font-size: 11px;
+      padding-right: 5px;
-    font-weight: normal;
+      margin-top: 3px;
-    > .fa, > .ion, > .glyphicon {
+      font-size: 11px;
-      margin-right: 3px;
+      > .fa,
+      > .ion,
+      > .glyphicon {
+        margin-right: 3px;
+      }
     }
   }
 }
@@ -78,6 +83,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  //First Level
   > li {
     position: relative;
     margin: 0;

dist/css/AdminLTE.css

@@ -453,7 +453,10 @@ a:focus {
   border-color: transparent!important;
 }
 .user-panel {
+  position: relative;
+  width: 100%;
   padding: 10px;
+  overflow: hidden;
 }
 .user-panel:before,
 .user-panel:after {
@@ -469,12 +472,13 @@ a:focus {
   height: auto;
 }
 .user-panel > .info {
-  font-weight: 600;
   padding: 5px 5px 5px 15px;
-  font-size: 14px;
   line-height: 1;
+  position: absolute;
+  left: 55px;
 }
 .user-panel > .info > p {
+  font-weight: 600;
   margin-bottom: 9px;
 }
 .user-panel > .info > a {
@@ -482,7 +486,6 @@ a:focus {
   padding-right: 5px;
   margin-top: 3px;
   font-size: 11px;
-  font-weight: normal;
 }
 .user-panel > .info > a > .fa,
 .user-panel > .info > a > .ion,
@@ -578,21 +581,12 @@ a:focus {
     width: 50px!important;
     z-index: 850;
   }
-  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info {
-    display: none;
-  }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li {
     position: relative;
   }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
     margin-right: 0;
   }
-  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
-  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
-  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
-  .sidebar-mini.sidebar-collapse .sidebar-menu > li.header {
-    display: none!important;
-  }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
     border-top-right-radius: 4px;
   }
@@ -607,12 +601,16 @@ a:focus {
   .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
   .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
     display: block!important;
+    visibility: visible;
+    opacity: 1;
+    filter: alpha(opacity=100);
     position: absolute;
     width: 180px;
     left: 50px;
   }
   .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
     top: 0;
+    margin-left: -3px;
     padding: 12px 5px 12px 20px;
     background-color: inherit;
   }
@@ -620,8 +618,13 @@ a:focus {
     top: 44px;
     margin-left: 0;
   }
-  .sidebar-mini.sidebar-collapse .sidebar-form {
+  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
-    display: none;
+  .sidebar-mini.sidebar-collapse .sidebar-form,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
+  .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
+    display: none!important;
   }
   .sidebar-mini.sidebar-collapse .main-header .logo {
     width: 50px;
@@ -639,6 +642,35 @@ a:focus {
     margin-left: 50px;
   }
 }
+.main-sidebar .user-panel > .info,
+.sidebar-form,
+.sidebar-menu > li > a > span,
+.sidebar-menu > li > .treeview-menu,
+.sidebar-menu > li > a > .pull-right,
+.sidebar-menu li.header {
+  -webkit-transition: display 0s linear 1s;
+  -o-transition: display 0s linear 1s;
+  transition: display 0s linear 1s;
+}
+.sidebar-menu > li > a,
+.main-sidebar .user-panel,
+.sidebar-menu > li.header .treeview-menu > li > a {
+  width: 100%;
+  white-space: nowrap!important;
+}
+.sidebar-menu > li.header {
+  overflow: hidden;
+  text-overflow: clip;
+}
+.sidebar-menu li > a {
+  position: relative;
+}
+.sidebar-menu li > a > .pull-right {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -7px;
+}
 /*
  * Component: Control sidebar. By deafult, this is the right sidebar.
  */

dist/js/app.js

@@ -385,6 +385,7 @@ function _init() {
       //Listen to the click event
       btn.click(function (e) {
         e.preventDefault();
+        //If the sidebar is not open
         if (!sidebar.hasClass('control-sidebar-open')
                 && !$('body').hasClass('control-sidebar-open')) {
           //Open the sidebar
@@ -395,32 +396,37 @@ function _init() {
       });
 
       //If the body has a boxed layout, fix the sidebar bg position
-      if ($("body").hasClass('layout-boxed')) {
+      var bg = $(".control-sidebar-bg");
-        var bg = $(".control-sidebar-bg");
+      _this._fix(bg);
-        bg.css("position", "absolute");
-        _this._fix(bg);
-      }
     },
     //Open the control sidebar
     open: function (sidebar, slide) {
+      //Slide over content
       if (slide)
         sidebar.addClass('control-sidebar-open');
+      //Push the content by adding the open class to the body instead 
+      //of the sidebar itself
       else
         $('body').addClass('control-sidebar-open');
     },
     //Close the control sidebar
     close: function (sidebar, slide) {
-      if (slide)
+
-        sidebar.removeClass('control-sidebar-open');
+      sidebar.removeClass('control-sidebar-open');
-      else
+      $('body').removeClass('control-sidebar-open');
-        $('body').removeClass('control-sidebar-open');
     },
     _fix: function (sidebar) {
       var _this = this;
-      sidebar.height($(".wrapper").height());
+      if ($("body").hasClass('layout-boxed')) {
-      $(window).resize(function () {
+        sidebar.css('position', 'absolute');
-        _this._fix(sidebar);
+        sidebar.height($(".wrapper").height());
-      });
+        $(window).resize(function () {
+          _this._fix(sidebar);
+        });
+      } else {
+        sidebar.css('position', 'fixed');
+        sidebar.height($(window).height());
+      }
     }
   };
 

dist/js/demo.js

@@ -4,7 +4,7 @@
  * You should not use this file in production.
  * This file is for demo purposes only.
  */
-(function ($) {
+(function ($, AdminLTE) {
 
   /**
    * List of all the available skins
@@ -26,93 +26,62 @@
     "skin-green-light"
   ];
 
-  /**
+  //Create the new tab
-   * CSS rules for the menu
+  var tab_pane = $("<div />", {
-   * 
+    "id": "control-sidebar-theme-demo-options-tab",
-   * @type Object
+    "class": "tab-pane"
-   */
+  });
-  var menu_css = {
-    "padding": "10px",
-    "position": "fixed",
-    "top": "70px",
-    "right": "-250px",
-    "background": "#fff",
-    "border": "0px solid #ddd",
-    "width": "250px",
-    "z-index": "99999",
-    "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
-  };
 
-  /**
+  //Create the tab button
-   * CSS rules for the demo handle button
+  var tab_button = $("<li />")
-   * 
+          .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
-   * @type Object
+                  + "<i class='fa fa-wrench'></i>"
-   */
+                  + "</a>");
-  var handle_css = {
-    "position": "fixed",
-    "top": "70px",
-    "right": "0",
-    "background": "#fff",
-    "border-radius": "5px 0px 0px 5px",
-    "padding": "10px 15px",
-    "font-size": "16px",
-    "z-index": "99999",
-    "cursor": "pointer",
-    "color": "#3c8dbc",
-    "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
-  };
 
-  //Create the handle
+  //Add the tab button to the right sidebar tabs
-  var demo = $("<div />")
+  $("[href='#control-sidebar-home-tab']")
-          .css(handle_css)
+          .parent()
-          .html("<i class='fa fa-gear'></i>")
+          .before(tab_button);
-          .addClass("no-print");
 
   //Create the menu
-  var demo_settings = $("<div />")
+  var demo_settings = $("<div />");
-          .css(menu_css)
-          .addClass("no-print");
 
+  //Layout options
   demo_settings.append(
-          "<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>"
+          "<h4 class='control-sidebar-heading'>"
           + "Layout Options"
           + "</h4>"
           //Fixed layout
           + "<div class='form-group'>"
-          + "<div class='checkbox'>"
+          + "<label class='control-sidebar-subheading'>"
-          + "<label>"
+          + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
-          + "<input type='checkbox' data-layout='layout-fixed'/> "
           + "Fixed layout"
           + "</label>"
-          + "</div>"
+          + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
           + "</div>"
           //Boxed layout
           + "<div class='form-group'>"
-          + "<div class='checkbox'>"
+          + "<label class='control-sidebar-subheading'>"
-          + "<label>"
+          + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
-          + "<input type='checkbox' data-layout='layout-boxed'/> "
           + "Boxed Layout"
           + "</label>"
-          + "</div>"
+          + "<p>Activate the boxed layout</p>"
           + "</div>"
           //Sidebar Toggle
           + "<div class='form-group'>"
-          + "<div class='checkbox'>"
+          + "<label class='control-sidebar-subheading'>"
-          + "<label>"
+          + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
-          + "<input type='checkbox' data-layout='sidebar-collapse'/> "
           + "Toggle Sidebar"
           + "</label>"
-          + "</div>"
+          + "<p>Toggle the left sidebar's state (open or collapse)</p>"
           + "</div>"
           //Control Sidebar Toggle
           + "<div class='form-group'>"
-          + "<div class='checkbox'>"
+          + "<label class='control-sidebar-subheading'>"
-          + "<label>"
+          + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
-          + "<input type='checkbox' data-controlsidebar='control-sidebar-open'/> "
+          + "Toggle Right Sidebar Slide"
-          + "Toggle Control Sidebar Slide Effect"
           + "</label>"
-          + "<small>Toggles between slide over content and push content effects.</small>"
+          + "<p>Toggles between slide over content and push content effects.</p>"
-          + "</div>"
           + "</div>"
           );
   var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
@@ -217,23 +186,11 @@
                   + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
   skins_list.append(skin_yellow_light);
 
-  demo_settings.append("<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Skins</h4>");
+  demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
   demo_settings.append(skins_list);
 
-  demo.click(function () {
+  tab_pane.append(demo_settings);
-    if (!$(this).hasClass("open")) {
+  $("#control-sidebar-settings-tab").before(tab_pane);
-      $(this).animate({"right": "250px"});
-      demo_settings.animate({"right": "0"});
-      $(this).addClass("open");
-    } else {
-      $(this).animate({"right": "0"});
-      demo_settings.animate({"right": "-250px"});
-      $(this).removeClass("open");
-    }
-  });
-
-  $("body").append(demo);
-  $("body").append(demo_settings);
 
   setup();
 
@@ -245,8 +202,10 @@
    */
   function change_layout(cls) {
     $("body").toggleClass(cls);
-    $.AdminLTE.layout.fixSidebar();
+    AdminLTE.layout.fixSidebar();
-    //Fix the problem
+    //Fix the problem with right sidebar and layout boxed
+    if(cls == "layout-boxed")
+      AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
   }
 
   /**
@@ -316,10 +275,10 @@
 
     $("[data-controlsidebar]").on('click', function () {
       change_layout($(this).data('controlsidebar'));
-      var slide = !$.AdminLTE.options.controlSidebarOptions.slide;
+      var slide = !AdminLTE.options.controlSidebarOptions.slide;
-      $.AdminLTE.options.controlSidebarOptions.slide = slide;
+      AdminLTE.options.controlSidebarOptions.slide = slide;
-      if(!slide)
+      if (!slide)
         $('.control-sidebar').removeClass('control-sidebar-open');
     });
   }
-})(jQuery);
+})(jQuery, $.AdminLTE);

dist/js/pages/dashboard.js

@@ -8,11 +8,6 @@
 
 $(function () {
 
-  //Activate the iCheck Plugin
-  $('input[type="checkbox"]').iCheck({
-    checkboxClass: 'icheckbox_flat-blue',
-    radioClass: 'iradio_flat-blue'
-  });
   //Make the dashboard widgets sortable Using jquery UI
   $(".connectedSortable").sortable({
     placeholder: "sort-highlight",
@@ -22,6 +17,7 @@ $(function () {
     zIndex: 999999
   });
   $(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move");
+  
   //jQuery UI sortable for the todo list
   $(".todo-list").sortable({
     placeholder: "sort-highlight",

index.html

@@ -1092,8 +1092,6 @@
     <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
     <!-- Bootstrap WYSIHTML5 -->
     <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
-    <!-- iCheck -->
-    <script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
     <!-- Slimscroll -->
     <script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
     <!-- FastClick -->

index2.html

@@ -1213,8 +1213,7 @@
             </ul><!-- /.control-sidebar-menu -->
 
           </div><!-- /.tab-pane -->
-          <!-- Stats tab content -->
+
-          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
           <!-- Settings tab content -->
           <div class="tab-pane" id="control-sidebar-settings-tab">
             <form method="post">
@@ -1298,8 +1297,6 @@
     <script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
     <!-- datepicker -->
     <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
-    <!-- iCheck -->
-    <script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
     <!-- SlimScroll 1.3.0 -->
     <script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
     <!-- ChartJS 1.0.1 -->