maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix issue #1842

Browse source
This commit is contained in:
Abdullah Almsaeed 2018-04-08 09:32:26 -04:00
parent 17dee622be
commit 79057e15c1
1 changed files with 328 additions and 323 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
dist/js/demo.js vendored
View file

@ -13,10 +13,15 @@ $(function () {
$('[data-toggle="control-sidebar"]').controlSidebar() $('[data-toggle="control-sidebar"]').controlSidebar()
$('[data-toggle="push-menu"]').pushMenu() $('[data-toggle="push-menu"]').pushMenu()
var $pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu') var $pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu')
var $controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar') var $controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar')
var $layout = $('body').data('lte.layout') var $layout = $('body').data('lte.layout')
$(window).on('load', function() {
// Reinitialize variables on load
$pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu')
$controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar')
$layout = $('body').data('lte.layout')
})
/** /**
* List of all the available skins * List of all the available skins
@ -163,12 +168,12 @@ $(function () {
// Create the new tab // Create the new tab
var $tabPane = $('<div />', { var $tabPane = $('<div />', {
'id' : 'control-sidebar-theme-demo-options-tab', 'id': 'control-sidebar-theme-demo-options-tab',
'class': 'tab-pane active' 'class': 'tab-pane active'
}) })
// Create the tab button // Create the tab button
var $tabButton = $('<li />', { 'class': 'active' }) var $tabButton = $('<li />', {'class': 'active'})
.html('<a href=\'#control-sidebar-theme-demo-options-tab\' data-toggle=\'tab\'>' .html('<a href=\'#control-sidebar-theme-demo-options-tab\' data-toggle=\'tab\'>'
+ '<i class="fa fa-wrench"></i>' + '<i class="fa fa-wrench"></i>'
+ '</a>') + '</a>')
@ -235,11 +240,11 @@ $(function () {
+ '<p>Toggle between dark and light skins for the right sidebar</p>' + '<p>Toggle between dark and light skins for the right sidebar</p>'
+ '</div>' + '</div>'
) )
var $skinsList = $('<ul />', { 'class': 'list-unstyled clearfix' }) var $skinsList = $('<ul />', {'class': 'list-unstyled clearfix'})
// Dark sidebar skins // Dark sidebar skins
var $skinBlue = var $skinBlue =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -247,7 +252,7 @@ $(function () {
+ '<p class="text-center no-margin">Blue</p>') + '<p class="text-center no-margin">Blue</p>')
$skinsList.append($skinBlue) $skinsList.append($skinBlue)
var $skinBlack = var $skinBlack =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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 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>' + '<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>'
@ -255,7 +260,7 @@ $(function () {
+ '<p class="text-center no-margin">Black</p>') + '<p class="text-center no-margin">Black</p>')
$skinsList.append($skinBlack) $skinsList.append($skinBlack)
var $skinPurple = var $skinPurple =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -263,7 +268,7 @@ $(function () {
+ '<p class="text-center no-margin">Purple</p>') + '<p class="text-center no-margin">Purple</p>')
$skinsList.append($skinPurple) $skinsList.append($skinPurple)
var $skinGreen = var $skinGreen =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -271,7 +276,7 @@ $(function () {
+ '<p class="text-center no-margin">Green</p>') + '<p class="text-center no-margin">Green</p>')
$skinsList.append($skinGreen) $skinsList.append($skinGreen)
var $skinRed = var $skinRed =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -279,7 +284,7 @@ $(function () {
+ '<p class="text-center no-margin">Red</p>') + '<p class="text-center no-margin">Red</p>')
$skinsList.append($skinRed) $skinsList.append($skinRed)
var $skinYellow = var $skinYellow =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -289,7 +294,7 @@ $(function () {
// Light sidebar skins // Light sidebar skins
var $skinBlueLight = var $skinBlueLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -297,7 +302,7 @@ $(function () {
+ '<p class="text-center no-margin" style="font-size: 12px">Blue Light</p>') + '<p class="text-center no-margin" style="font-size: 12px">Blue Light</p>')
$skinsList.append($skinBlueLight) $skinsList.append($skinBlueLight)
var $skinBlackLight = var $skinBlackLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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 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>' + '<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>'
@ -305,7 +310,7 @@ $(function () {
+ '<p class="text-center no-margin" style="font-size: 12px">Black Light</p>') + '<p class="text-center no-margin" style="font-size: 12px">Black Light</p>')
$skinsList.append($skinBlackLight) $skinsList.append($skinBlackLight)
var $skinPurpleLight = var $skinPurpleLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -313,7 +318,7 @@ $(function () {
+ '<p class="text-center no-margin" style="font-size: 12px">Purple Light</p>') + '<p class="text-center no-margin" style="font-size: 12px">Purple Light</p>')
$skinsList.append($skinPurpleLight) $skinsList.append($skinPurpleLight)
var $skinGreenLight = var $skinGreenLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -321,7 +326,7 @@ $(function () {
+ '<p class="text-center no-margin" style="font-size: 12px">Green Light</p>') + '<p class="text-center no-margin" style="font-size: 12px">Green Light</p>')
$skinsList.append($skinGreenLight) $skinsList.append($skinGreenLight)
var $skinRedLight = var $skinRedLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'
@ -329,7 +334,7 @@ $(function () {
+ '<p class="text-center no-margin" style="font-size: 12px">Red Light</p>') + '<p class="text-center no-margin" style="font-size: 12px">Red Light</p>')
$skinsList.append($skinRedLight) $skinsList.append($skinRedLight)
var $skinYellowLight = var $skinYellowLight =
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' }) $('<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">' .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: 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>' + '<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>'