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

Fix for sidebar mini and fixed layout

pull/360/head
Abdullah Almsaeed 2015-04-19 08:21:03 -04:00
parent 4476517642
commit 811d1f3dbe
4 changed files with 101 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
dist/js/app.js vendored
View File

@ -47,6 +47,10 @@ $.AdminLTE.options = {
sidebarPushMenu: true,
//Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
sidebarSlimScroll: true,
//Enable sidebar expand on hover effect for sidebar mini
//This option is forced to true if both the fixed layout and sidebar mini
//are used together
sidebarExpandOnHover: false,
//BoxRefresh Plugin
enableBoxRefresh: true,
//Bootstrap.js tooltip
@ -160,7 +164,7 @@ $(function () {
//Activate sidebar push menu
if (o.sidebarPushMenu) {
$.AdminLTE.pushMenu(o.sidebarToggleSelector);
$.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
}
//Activate Bootstrap tooltip
@ -277,36 +281,71 @@ function _init() {
* @type Function
* @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
*/
$.AdminLTE.pushMenu = function (toggleBtn) {
//Get the screen sizes
var screenSizes = this.options.screenSizes;
$.AdminLTE.pushMenu = {
activate: function (toggleBtn) {
//Get the screen sizes
var screenSizes = $.AdminLTE.options.screenSizes;
//Enable sidebar toggle
$(toggleBtn).on('click', function (e) {
e.preventDefault();
//Enable sidebar toggle
$(toggleBtn).on('click', function (e) {
e.preventDefault();
//Enable sidebar push menu
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');
//Enable sidebar push menu
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() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
$("body").removeClass('sidebar-open');
}
});
$(".content-wrapper").click(function () {
//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');
}
});
//Enable expand on hover for sidebar mini
if ($.AdminLTE.options.sidebarExpandOnHover
|| ($('body').hasClass('fixed')
&& $('body').hasClass('sidebar-mini'))) {
this.expandOnHover();
}
},
expandOnHover: function () {
var _this = this;
var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
//Expand sidebar on hover
$('.main-sidebar').hover(function () {
if ($('body').hasClass('sidebar-mini')
&& $("body").hasClass('sidebar-collapse')
&& $(window).width() > screenWidth) {
_this.expand();
}
}, function () {
if ($('body').hasClass('sidebar-mini')
&& $('body').hasClass('sidebar-expanded-on-hover')
&& $(window).width() > screenWidth) {
_this.collapse();
}
});
},
expand: function () {
$("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
},
collapse: function () {
if ($('body').hasClass('sidebar-expanded-on-hover')) {
$('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
}
}
};
/* Tree()
@ -398,6 +437,16 @@ function _init() {
//If the body has a boxed layout, fix the sidebar bg position
var bg = $(".control-sidebar-bg");
_this._fix(bg);
//If the body has a fixed layout, make the control sidebar fixed
if ($('body').hasClass('fixed')) {
_this._fixForFixed(sidebar);
} else {
//If the content height is less the sidebar's height, force max height
if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
_this._fixForContent(sidebar);
}
}
},
//Open the control sidebar
open: function (sidebar, slide) {
@ -430,6 +479,18 @@ function _init() {
'height': 'auto'
});
}
},
_fixForFixed: function (sidebar) {
sidebar.css({
'position': 'fixed',
'max-height': '100%',
'overflow': 'auto',
'padding-bottom': '50px'
});
},
_fixForContent: function (sidebar) {
$(".content-wrapper, .right-side").css('min-height', sidebar.height());
console.log('triggered')
}
};

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

File diff suppressed because one or more lines are too long

5
dist/js/demo.js vendored
View File

@ -214,6 +214,11 @@
//Fix the problem with right sidebar and layout boxed
if (cls == "layout-boxed")
AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
if ($('body').hasClass('fixed') && cls == 'fixed') {
AdminLTE.pushMenu.expandOnHover();
AdminLTE.controlSidebar._fixForFixed($('.control-sidebar'));
AdminLTE.layout.activate();
}
}
/**

10
pages/layout/fixed.html
View File

@ -25,12 +25,18 @@
</head>
<!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUT -->
<!-- the fixed layout is not compatible with sidebar-mini -->
<body class="skin-blue fixed">
<body class="skin-blue fixed sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<header class="main-header">
<a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
<!-- Logo -->
<a href="../../index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->