github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Updates to v2.1 alpha

pull/337/head
Abdullah Almsaeed 2015-04-09 18:52:51 -04:00
parent 0fc9439050
commit 340be0df61
10 changed files with 211 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
build/less/sidebar-mini.less
View File

@ -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
.sidebar-form {
display: none;
//Make the sidebar links, menus, labels, badeges
//and angle icons disappear
.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
//navbar's position
//Since the logo got smaller, we need to fix the 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;
}
}

20
build/less/sidebar.less
View File

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

60
dist/css/AdminLTE.css vendored
View File

@ -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 {
display: none;
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
.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.
*/

2
dist/css/AdminLTE.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
dist/js/app.js vendored
View File

@ -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");
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');
else
$('body').removeClass('control-sidebar-open');
},
_fix: function (sidebar) {
var _this = this;
if ($("body").hasClass('layout-boxed')) {
sidebar.css('position', 'absolute');
sidebar.height($(".wrapper").height());
$(window).resize(function () {
_this._fix(sidebar);
});
} else {
sidebar.css('position', 'fixed');
sidebar.height($(window).height());
}
}
};

2
dist/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

125
dist/js/demo.js vendored
View File

@ -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"
];
/**
* CSS rules for the menu
*
* @type Object
*/
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 new tab
var tab_pane = $("<div />", {
"id": "control-sidebar-theme-demo-options-tab",
"class": "tab-pane"
});
/**
* CSS rules for the demo handle button
*
* @type Object
*/
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 tab button
var tab_button = $("<li />")
.html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
+ "<i class='fa fa-wrench'></i>"
+ "</a>");
//Create the handle
var demo = $("<div />")
.css(handle_css)
.html("<i class='fa fa-gear'></i>")
.addClass("no-print");
//Add the tab button to the right sidebar tabs
$("[href='#control-sidebar-home-tab']")
.parent()
.before(tab_button);
//Create the menu
var demo_settings = $("<div />")
.css(menu_css)
.addClass("no-print");
var demo_settings = $("<div />");
//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>"
+ "<input type='checkbox' data-layout='layout-fixed'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
+ "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>"
+ "<input type='checkbox' data-layout='layout-boxed'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
+ "Boxed Layout"
+ "</label>"
+ "</div>"
+ "<p>Activate the boxed layout</p>"
+ "</div>"
//Sidebar Toggle
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
+ "<label>"
+ "<input type='checkbox' data-layout='sidebar-collapse'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+ "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>"
+ "<input type='checkbox' data-controlsidebar='control-sidebar-open'/> "
+ "Toggle Control Sidebar Slide Effect"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+ "Toggle Right Sidebar Slide"
+ "</label>"
+ "<small>Toggles between slide over content and push content effects.</small>"
+ "</div>"
+ "<p>Toggles between slide over content and push content effects.</p>"
+ "</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 () {
if (!$(this).hasClass("open")) {
$(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);
tab_pane.append(demo_settings);
$("#control-sidebar-settings-tab").before(tab_pane);
setup();
@ -245,8 +202,10 @@
*/
function change_layout(cls) {
$("body").toggleClass(cls);
$.AdminLTE.layout.fixSidebar();
//Fix the problem
AdminLTE.layout.fixSidebar();
//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;
$.AdminLTE.options.controlSidebarOptions.slide = slide;
if(!slide)
var slide = !AdminLTE.options.controlSidebarOptions.slide;
AdminLTE.options.controlSidebarOptions.slide = slide;
if (!slide)
$('.control-sidebar').removeClass('control-sidebar-open');
});
}
})(jQuery);
})(jQuery, $.AdminLTE);

6
dist/js/pages/dashboard.js vendored
View File

@ -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",

2
index.html
View File

@ -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 -->

5
index2.html
View File

@ -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 -->