Fixed issue #288

This commit is contained in:
Abdullah Almsaeed 2015-03-17 11:23:28 -04:00
parent 3e3fedd4f5
commit 3810f026ce
4 changed files with 209 additions and 198 deletions

1
.gitignore vendored
View file

@ -5,3 +5,4 @@
/node_modules/
TODO
*.zip
test.html

397
dist/js/app.js vendored
View file

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

2
dist/js/app.min.js vendored

File diff suppressed because one or more lines are too long

View file

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