mirror of https://github.com/ColorlibHQ/AdminLTE
Fixed issue #288
Abdullah Almsaeed
parent
3e3fedd4f5
commit
3810f026ce
|
|
@ -5,3 +5,4 @@
|
|||
/node_modules/
|
||||
TODO
|
||||
*.zip
|
||||
test.html
|
||||
|
|
@ -125,6 +125,9 @@ $(function () {
|
|||
//Easy access to options
|
||||
var o = $.AdminLTE.options;
|
||||
|
||||
//Set up the object
|
||||
_init();
|
||||
|
||||
//Activate the layout maker
|
||||
$.AdminLTE.layout.activate();
|
||||
|
||||
|
|
@ -183,218 +186,220 @@ $(function () {
|
|||
});
|
||||
});
|
||||
|
||||
/* ----------------------
|
||||
* - AdminLTE Functions -
|
||||
* ----------------------
|
||||
/* ----------------------------------
|
||||
* - Initialize the AdminLTE Object -
|
||||
* ----------------------------------
|
||||
* All AdminLTE functions are implemented below.
|
||||
*/
|
||||
function _init() {
|
||||
|
||||
/* prepareLayout
|
||||
* =============
|
||||
* Fixes the layout height in case min-height fails.
|
||||
*
|
||||
* @type Object
|
||||
* @usage $.AdminLTE.layout.activate()
|
||||
* $.AdminLTE.layout.fix()
|
||||
* $.AdminLTE.layout.fixSidebar()
|
||||
*/
|
||||
$.AdminLTE.layout = {
|
||||
activate: function () {
|
||||
var _this = this;
|
||||
_this.fix();
|
||||
_this.fixSidebar();
|
||||
$(window, ".wrapper").resize(function () {
|
||||
/* Layout
|
||||
* ======
|
||||
* Fixes the layout height in case min-height fails.
|
||||
*
|
||||
* @type Object
|
||||
* @usage $.AdminLTE.layout.activate()
|
||||
* $.AdminLTE.layout.fix()
|
||||
* $.AdminLTE.layout.fixSidebar()
|
||||
*/
|
||||
$.AdminLTE.layout = {
|
||||
activate: function () {
|
||||
var _this = this;
|
||||
_this.fix();
|
||||
_this.fixSidebar();
|
||||
});
|
||||
},
|
||||
fix: function () {
|
||||
//Get window height and the wrapper height
|
||||
var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
|
||||
var window_height = $(window).height();
|
||||
var sidebar_height = $(".sidebar").height();
|
||||
//Set the min-height of the content and sidebar based on the
|
||||
//the height of the document.
|
||||
if ($("body").hasClass("fixed")) {
|
||||
$(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
|
||||
} else {
|
||||
if (window_height >= sidebar_height) {
|
||||
$(".content-wrapper, .right-side").css('min-height', window_height - neg);
|
||||
$(window, ".wrapper").resize(function () {
|
||||
_this.fix();
|
||||
_this.fixSidebar();
|
||||
});
|
||||
},
|
||||
fix: function () {
|
||||
//Get window height and the wrapper height
|
||||
var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
|
||||
var window_height = $(window).height();
|
||||
var sidebar_height = $(".sidebar").height();
|
||||
//Set the min-height of the content and sidebar based on the
|
||||
//the height of the document.
|
||||
if ($("body").hasClass("fixed")) {
|
||||
$(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
|
||||
} else {
|
||||
$(".content-wrapper, .right-side").css('min-height', sidebar_height);
|
||||
if (window_height >= sidebar_height) {
|
||||
$(".content-wrapper, .right-side").css('min-height', window_height - neg);
|
||||
} else {
|
||||
$(".content-wrapper, .right-side").css('min-height', sidebar_height);
|
||||
}
|
||||
}
|
||||
},
|
||||
fixSidebar: function () {
|
||||
//Make sure the body tag has the .fixed class
|
||||
if (!$("body").hasClass("fixed")) {
|
||||
if (typeof $.fn.slimScroll != 'undefined') {
|
||||
$(".sidebar").slimScroll({destroy: true}).height("auto");
|
||||
}
|
||||
return;
|
||||
} else if (typeof $.fn.slimScroll == 'undefined' && console) {
|
||||
console.error("Error: the fixed layout requires the slimscroll plugin!");
|
||||
}
|
||||
//Enable slimscroll for fixed layout
|
||||
if ($.AdminLTE.options.sidebarSlimScroll) {
|
||||
if (typeof $.fn.slimScroll != 'undefined') {
|
||||
//Distroy if it exists
|
||||
$(".sidebar").slimScroll({destroy: true}).height("auto");
|
||||
//Add slimscroll
|
||||
$(".sidebar").slimscroll({
|
||||
height: ($(window).height() - $(".main-header").height()) + "px",
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
size: "3px"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fixSidebar: function () {
|
||||
//Make sure the body tag has the .fixed class
|
||||
if (!$("body").hasClass("fixed")) {
|
||||
if (typeof $.fn.slimScroll != 'undefined') {
|
||||
$(".sidebar").slimScroll({destroy: true}).height("auto");
|
||||
};
|
||||
|
||||
/* PushMenu()
|
||||
* ==========
|
||||
* Adds the push menu functionality to the sidebar.
|
||||
*
|
||||
* @type Function
|
||||
* @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
|
||||
if ($(window).width() > (screenSizes.sm - 1)) {
|
||||
$("body").toggleClass('sidebar-collapse');
|
||||
}
|
||||
return;
|
||||
} else if (typeof $.fn.slimScroll == 'undefined' && console) {
|
||||
console.error("Error: the fixed layout requires the slimscroll plugin!");
|
||||
}
|
||||
//Enable slimscroll for fixed layout
|
||||
if ($.AdminLTE.options.sidebarSlimScroll) {
|
||||
if (typeof $.fn.slimScroll != 'undefined') {
|
||||
//Distroy if it exists
|
||||
$(".sidebar").slimScroll({destroy: true}).height("auto");
|
||||
//Add slimscroll
|
||||
$(".sidebar").slimscroll({
|
||||
height: ($(window).height() - $(".main-header").height()) + "px",
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
size: "3px"
|
||||
//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');
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/* Tree()
|
||||
* ======
|
||||
* Converts the sidebar into a multilevel
|
||||
* tree view menu.
|
||||
*
|
||||
* @type Function
|
||||
* @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);
|
||||
var checkElement = $this.next();
|
||||
|
||||
//Check if the next element is a menu and is visible
|
||||
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
|
||||
//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");
|
||||
}
|
||||
//If the menu is not visible
|
||||
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
|
||||
//Get the parent menu
|
||||
var parent = $this.parents('ul').first();
|
||||
//Close all open menus within the parent
|
||||
var ul = parent.find('ul:visible').slideUp('normal');
|
||||
//Remove the menu-open class from the parent
|
||||
ul.removeClass('menu-open');
|
||||
//Get the parent li
|
||||
var parent_li = $this.parent("li");
|
||||
|
||||
//Open the target menu and add the menu-open class
|
||||
checkElement.slideDown('normal', function () {
|
||||
//Add the class active to the parent li
|
||||
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();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* PushMenu()
|
||||
* ==========
|
||||
* Adds the push menu functionality to the sidebar.
|
||||
*
|
||||
* @type Function
|
||||
* @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
|
||||
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');
|
||||
//if this isn't a link, prevent the page from being redirected
|
||||
if (checkElement.is('.treeview-menu')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(".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');
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/* Tree()
|
||||
* ======
|
||||
* Converts the sidebar into a multilevel
|
||||
* tree view menu.
|
||||
*
|
||||
* @type Function
|
||||
* @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);
|
||||
var checkElement = $this.next();
|
||||
|
||||
//Check if the next element is a menu and is visible
|
||||
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
|
||||
//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");
|
||||
}
|
||||
//If the menu is not visible
|
||||
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
|
||||
//Get the parent menu
|
||||
var parent = $this.parents('ul').first();
|
||||
//Close all open menus within the parent
|
||||
var ul = parent.find('ul:visible').slideUp('normal');
|
||||
//Remove the menu-open class from the parent
|
||||
ul.removeClass('menu-open');
|
||||
//Get the parent li
|
||||
var parent_li = $this.parent("li");
|
||||
|
||||
//Open the target menu and add the menu-open class
|
||||
checkElement.slideDown('normal', function () {
|
||||
//Add the class active to the parent li
|
||||
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
|
||||
if (checkElement.is('.treeview-menu')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* BoxWidget
|
||||
* =========
|
||||
* BoxWidget is plugin to handle collapsing and
|
||||
* removing boxes from the screen.
|
||||
*
|
||||
* @type Object
|
||||
* @usage $.AdminLTE.boxWidget.activate()
|
||||
* Set all of your option in the main $.AdminLTE.options object
|
||||
*/
|
||||
$.AdminLTE.boxWidget = {
|
||||
activate: function () {
|
||||
var o = $.AdminLTE.options;
|
||||
var _this = this;
|
||||
//Listen for collapse event triggers
|
||||
$(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
|
||||
e.preventDefault();
|
||||
_this.collapse($(this));
|
||||
});
|
||||
};
|
||||
|
||||
//Listen for remove event triggers
|
||||
$(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
|
||||
e.preventDefault();
|
||||
_this.remove($(this));
|
||||
});
|
||||
},
|
||||
collapse: function (element) {
|
||||
//Find the box parent
|
||||
var box = element.parents(".box").first();
|
||||
//Find the body and the footer
|
||||
var bf = box.find(".box-body, .box-footer");
|
||||
if (!box.hasClass("collapsed-box")) {
|
||||
//Convert minus into plus
|
||||
element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
|
||||
bf.slideUp(300, function () {
|
||||
box.addClass("collapsed-box");
|
||||
/* BoxWidget
|
||||
* =========
|
||||
* BoxWidget is plugin to handle collapsing and
|
||||
* removing boxes from the screen.
|
||||
*
|
||||
* @type Object
|
||||
* @usage $.AdminLTE.boxWidget.activate()
|
||||
* Set all of your option in the main $.AdminLTE.options object
|
||||
*/
|
||||
$.AdminLTE.boxWidget = {
|
||||
activate: function () {
|
||||
var o = $.AdminLTE.options;
|
||||
var _this = this;
|
||||
//Listen for collapse event triggers
|
||||
$(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
|
||||
e.preventDefault();
|
||||
_this.collapse($(this));
|
||||
});
|
||||
} else {
|
||||
//Convert plus into minus
|
||||
element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
|
||||
bf.slideDown(300, function () {
|
||||
box.removeClass("collapsed-box");
|
||||
|
||||
//Listen for remove event triggers
|
||||
$(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
|
||||
e.preventDefault();
|
||||
_this.remove($(this));
|
||||
});
|
||||
}
|
||||
},
|
||||
remove: function (element) {
|
||||
//Find the box parent
|
||||
var box = element.parents(".box").first();
|
||||
box.slideUp();
|
||||
},
|
||||
options: $.AdminLTE.options.boxWidgetOptions
|
||||
};
|
||||
},
|
||||
collapse: function (element) {
|
||||
//Find the box parent
|
||||
var box = element.parents(".box").first();
|
||||
//Find the body and the footer
|
||||
var bf = box.find(".box-body, .box-footer");
|
||||
if (!box.hasClass("collapsed-box")) {
|
||||
//Convert minus into plus
|
||||
element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
|
||||
bf.slideUp(300, function () {
|
||||
box.addClass("collapsed-box");
|
||||
});
|
||||
} else {
|
||||
//Convert plus into minus
|
||||
element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
|
||||
bf.slideDown(300, function () {
|
||||
box.removeClass("collapsed-box");
|
||||
});
|
||||
}
|
||||
},
|
||||
remove: function (element) {
|
||||
//Find the box parent
|
||||
var box = element.parents(".box").first();
|
||||
box.slideUp();
|
||||
},
|
||||
options: $.AdminLTE.options.boxWidgetOptions
|
||||
};
|
||||
}
|
||||
|
||||
/* ------------------
|
||||
* - Custom Plugins -
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,10 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#components > h3 {
|
||||
font-size: 25px;
|
||||
color: #000;
|
||||
|
|
@ -20,7 +24,7 @@ ul {
|
|||
}
|
||||
.page-header {
|
||||
/*border-bottom: 1px solid #ddd; */
|
||||
margin: 20px 0 20px 0;
|
||||
margin: 20px 0 10px 0!important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 30px;
|
||||
|
|
@ -46,6 +50,7 @@ ul {
|
|||
margin-top: -60px;
|
||||
height: 60px;
|
||||
visibility: hidden;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.lead {
|
||||
|
|
|
|||
Loading…
Reference in New Issue