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

Added skins to css and updated js

pull/325/merge
Abdullah Almsaeed 2015-04-03 11:58:10 -04:00
parent a00ab59882
commit e9276e43ac
5 changed files with 252 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dist/css/AdminLTE.css vendored
View File

@ -103,7 +103,7 @@ body {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid #eee;
border-top: 1px solid #d2d6de;
}
/* Fixed layout */
.fixed .main-header,
@ -455,6 +455,7 @@ a:focus {
.user-panel > .image > img {
width: 45px;
height: 45px;
max-width: 100%!important;
}
.user-panel > .info {
font-weight: 600;
@ -637,6 +638,16 @@ a:focus {
/*
* Component: Control sidebar. By deafult, this is the right sidebar.
*/
.control-sidebar-bg {
position: fixed;
z-index: 900;
top: 0;
right: 0;
bottom: 0;
width: 230px;
background: #222d32;
}
.control-sidebar-bg,
.control-sidebar {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
@ -646,12 +657,13 @@ a:focus {
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.control-sidebar {
position: absolute;
top: 50px;
right: 0;
width: 230px;
z-index: 1010;
background: #222d32;
color: #b8c7ce;
}
@media (max-width: 768px) {
@ -662,12 +674,14 @@ a:focus {
.control-sidebar > .tab-content {
padding: 10px 15px;
}
.control-sidebar.control-sidebar-open {
.control-sidebar.control-sidebar-open,
.control-sidebar.control-sidebar-open + .control-sidebar-bg {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.control-sidebar-open .control-sidebar-bg,
.control-sidebar-open .control-sidebar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);

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

File diff suppressed because one or more lines are too long

14
dist/js/app.js vendored
View File

@ -382,13 +382,6 @@ function _init() {
//The toggle button
var btn = $(o.toggleBtnSelector);
//Initial height fix
_this.fixHeight(sidebar);
//Fix the height when the screen size changes
$(window).resize(function () {
_this.fixHeight(sidebar);
});
//Listen to the click event
btn.click(function (e) {
e.preventDefault();
@ -414,13 +407,6 @@ function _init() {
sidebar.removeClass('control-sidebar-open');
else
$('body').removeClass('control-sidebar-open');
},
//Fix the height of the sidebar
fixHeight: function (sidebar) {
//We'll have to make it small then stretch it again so it
//doesn't occupy more than the space it needs
sidebar.css('min-height', $(window).height() - $(".main-header").height());
sidebar.css('min-height', $(document).height() - $(".main-header").height());
}
};

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

File diff suppressed because one or more lines are too long

270
dist/js/demo.js vendored
View File

@ -1,4 +1,17 @@
var my_skins = [
/**
* AdminLTE Demo Menu
* ------------------
* You should not use this file in production.
* This file is for demo purposes only.
*/
(function ($) {
/**
* List of all the available skins
*
* @type Array
*/
var my_skins = [
"skin-blue",
"skin-black",
"skin-red",
@ -11,36 +24,59 @@ var my_skins = [
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"
];
$(function () {
/* For demo purposes */
var demo = $("<div />").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)"
}).html("<i class='fa fa-gear'></i>").addClass("no-print");
];
var demo_settings = $("<div />").css({
/**
* CSS rules for the menu
*
* @type Object
*/
var menu_css = {
"padding": "10px",
position: "fixed",
top: "70px",
right: "-250px",
background: "#fff",
border: "0px solid #ddd",
"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)"
}).addClass("no-print");
};
/**
* 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 handle
var demo = $("<div />")
.css(handle_css)
.html("<i class='fa fa-gear'></i>")
.addClass("no-print");
//Create the menu
var demo_settings = $("<div />")
.css(menu_css)
.addClass("no-print");
demo_settings.append(
"<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Layout Options</h4>"
"<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>"
+ "Layout Options"
+ "</h4>"
//Fixed layout
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
@ -70,55 +106,107 @@ $(function () {
+ "</div>"
);
var skins_list = $("<ul />", {"class": 'list-unstyled'});
//Dark sidebar skins
var skin_blue =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-blue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 10px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Blue</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Blue</p>");
skins_list.append(skin_blue);
var skin_black =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 10px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 10px; background: #fefefe;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Black</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Black</p>");
skins_list.append(skin_black);
var skin_purple =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-purple\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Purple</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Purple</p>");
skins_list.append(skin_purple);
var skin_green =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-green\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Green</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Green</p>");
skins_list.append(skin_green);
var skin_red =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-red\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Red</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Red</p>");
skins_list.append(skin_red);
var skin_yellow =
$("<li />", {style: "float:left; width: 50%; padding: 5px;"})
.append("<a href='javascript:void(0);' onclick='change_skin(\"skin-yellow\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
+ "<p class='text-center'>Skin Yellow</p>"
+ "</a>");
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center'>Yellow</p>");
skins_list.append(skin_yellow);
//Light sidebar skins
var skin_blue_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' style='font-size: 12px'>Blue Light</p>");
skins_list.append(skin_blue_light);
var skin_black_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' style='font-size: 12px'>Black Light</p>");
skins_list.append(skin_black_light);
var skin_purple_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' style='font-size: 12px'>Purple Light</p>");
skins_list.append(skin_purple_light);
var skin_green_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' style='font-size: 12px'>Green Light</p>");
skins_list.append(skin_green_light);
var skin_red_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' style='font-size: 12px'>Red Light</p>");
skins_list.append(skin_red_light);
var skin_yellow_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+ "</a>"
+ "<p class='text-center' 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(skins_list);
@ -138,13 +226,24 @@ $(function () {
$("body").append(demo_settings);
setup();
});
function change_layout(cls) {
/**
* Toggles layout classes
*
* @param String cls the layout class to toggle
* @returns void
*/
function change_layout(cls) {
$("body").toggleClass(cls);
$.AdminLTE.layout.fixSidebar();
}
function change_skin(cls) {
}
/**
* Replaces the old skin with the new skin
* @param String cls the new skin class
* @returns Boolean false to prevent link's default action
*/
function change_skin(cls) {
$.each(my_skins, function (i) {
$("body").removeClass(my_skins[i]);
});
@ -152,24 +251,51 @@ function change_skin(cls) {
$("body").addClass(cls);
store('skin', cls);
return false;
}
function store(name, val) {
}
/**
* Store a new settings in the browser
*
* @param String name Name of the setting
* @param String val Value of the setting
* @returns void
*/
function store(name, val) {
if (typeof (Storage) !== "undefined") {
localStorage.setItem(name, val);
} else {
alert('Please use a modern browser to properly view this template!');
}
}
function get(name) {
}
/**
* Get a prestored setting
*
* @param String name Name of of the setting
* @returns String The value of the setting | null
*/
function get(name) {
if (typeof (Storage) !== "undefined") {
return localStorage.getItem(name);
} else {
alert('Please use a modern browser to properly view this template!');
}
}
}
function setup() {
/**
* Retrieve default settings and apply them to the template
*
* @returns void
*/
function setup() {
var tmp = get('skin');
if (tmp && $.inArray(tmp, my_skins))
change_skin(tmp);
}
//Add the change skin listener
$("[data-skin]").on('click', function (e) {
e.preventDefault();
change_skin($(this).data('skin'));
});
}
})(jQuery);