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

Updated control sidebar

pull/325/merge
Abdullah Almsaeed 2015-03-28 14:44:48 -04:00
parent 7cc7d81ad9
commit bfb25a6ee8
10 changed files with 215 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
build/less/control-sidebar.less
View File

@ -2,6 +2,8 @@
* Component: Control sidebar. By deafult, this is the right sidebar.
*/
.control-sidebar {
.translate(@control-sidebar-width, 0);
.transition-transform(@transition-speed ease-in-out);
position: absolute;
top: @navbar-height;
right: 0;
@ -11,11 +13,17 @@
color: @sidebar-dark-color;
//Make it hide in small screens
@media (max-width: @screen-sm) {
.translate(@control-sidebar-width, 0);
top: @navbar-height + 50;
//.translate(@control-sidebar-width, 0);
}
//Tab panes
> .tab-content {
padding: 10px 15px;
padding: 10px 15px;
}
//Open state
&.control-sidebar-open {
.translate(0, 0);
.box-shadow(-1px 0 3px rgba(0,0,0,.2));
}
}
//Control sidebar tabs
@ -23,9 +31,9 @@
border-bottom: darken(@sidebar-dark-bg, 3%);
> li {
> a {
.border-radius(0)!important;
.border-radius(0)!important;
background: darken(@sidebar-dark-bg, 5%);
color: @sidebar-dark-color;
color: @sidebar-dark-color;
//Hover and active states
&,
&:hover {
@ -54,22 +62,31 @@
border-right: none!important;
border-bottom: none!important;
background: @sidebar-dark-bg;
color: #fff;
color: #fff;
}
}
}
}
}
//Remove resposiveness on small screens
@media(max-width: @screen-sm) {
display: table;
>li {
display: table-cell!important;
}
}
}
//Headings in the sidebar content
.control-sidebar-heading {
color: #fff;
font-weight: 400;
font-size: 16px;
padding: 10px 0;
margin-bottom: 10px;
}
.content-wrapper,
.right-side,
.main-footer {
//margin-right: @control-sidebar-width;
@media (max-width: @screen-sm) {
margin-right: 0;
}
.control-sidebar-subheading {
display: block;
color: #fff;
font-weight: 400;
font-size: 14px;
}

14
build/less/mixins.less
View File

@ -232,13 +232,12 @@
&.active {
border-left-color: @icon-active-color;
> a {
font-weight: 600;
font-weight: 600;
}
}
//First Level Submenu
> .treeview-menu {
margin: 0;
background: @sidebar-light-submenu-bg;
> .treeview-menu {
background: @sidebar-light-submenu-bg;
}
}
//All links within the sidebar menu
@ -293,6 +292,13 @@
.border-radius(0, 2px, 0, 2px) !important;
}
}
@media(min-width: @screen-sm-min) {
&.sidebar-mini.sidebar-collapse {
.sidebar-menu > li > .treeview-menu {
border-left: 1px solid @gray;
}
}
}
}
//Navbar Skin Mixin

44
dist/css/AdminLTE.css vendored
View File

@ -638,6 +638,14 @@ a:focus {
* Component: Control sidebar. By deafult, this is the right sidebar.
*/
.control-sidebar {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-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;
position: absolute;
top: 50px;
right: 0;
@ -648,15 +656,20 @@ a:focus {
}
@media (max-width: 768px) {
.control-sidebar {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
top: 100px;
}
}
.control-sidebar > .tab-content {
padding: 10px 15px;
}
.control-sidebar.control-sidebar-open {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
}
.control-sidebar-tabs {
border-bottom: #1c2529;
}
@ -690,15 +703,26 @@ a:focus {
background: #222d32;
color: #fff;
}
@media (max-width: 768px) {
.control-sidebar-tabs {
display: table;
}
.control-sidebar-tabs > li {
display: table-cell !important;
}
}
.control-sidebar-heading {
color: #fff;
font-weight: 400;
font-size: 16px;
padding: 10px 0;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.content-wrapper,
.right-side,
.main-footer {
margin-right: 0;
}
.control-sidebar-subheading {
display: block;
color: #fff;
font-weight: 400;
font-size: 14px;
}
/*
* Component: Dropdown menus

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

File diff suppressed because one or more lines are too long

18
dist/css/skins/_all-skins.css vendored
View File

@ -235,7 +235,6 @@
font-weight: 600;
}
.skin-blue-light .sidebar-menu > li > .treeview-menu {
margin: 0;
background: #f4f4f5;
}
.skin-blue-light .sidebar a {
@ -291,6 +290,11 @@
border-bottom-right-radius: 2px !important;
border-bottom-left-radius: 0 !important;
}
@media (min-width: 768px) {
.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
border-left: 1px solid #d2d6de;
}
}
.skin-blue-light .main-footer {
border-top-color: #d2d6de;
}
@ -571,7 +575,6 @@
font-weight: 600;
}
.skin-black-light .sidebar-menu > li > .treeview-menu {
margin: 0;
background: #f4f4f5;
}
.skin-black-light .sidebar a {
@ -627,6 +630,11 @@
border-bottom-right-radius: 2px !important;
border-bottom-left-radius: 0 !important;
}
@media (min-width: 768px) {
.skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
border-left: 1px solid #d2d6de;
}
}
/*
* Skin: Green
* -----------
@ -856,7 +864,6 @@
font-weight: 600;
}
.skin-green-light .sidebar-menu > li > .treeview-menu {
margin: 0;
background: #f4f4f5;
}
.skin-green-light .sidebar a {
@ -912,6 +919,11 @@
border-bottom-right-radius: 2px !important;
border-bottom-left-radius: 0 !important;
}
@media (min-width: 768px) {
.skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
border-left: 1px solid #d2d6de;
}
}
/*
* Skin: Red
* ---------

2
dist/css/skins/_all-skins.min.css vendored
View File

File diff suppressed because one or more lines are too long

79
dist/js/app.js vendored
View File

@ -57,6 +57,17 @@ $.AdminLTE.options = {
//choose to enable the plugin, make sure you load the script
//before AdminLTE's app.js
enableFastclick: true,
//Control Sidebar Options
enableControlSidebar: true,
controlSidebarOptions: {
//Which button should trigger the open/close event
toggleBtnSelector: "[data-toggle='control-sidebar']",
//The sidebar selector
selector: ".control-sidebar",
//Enable slide over content animation
slide: false,
animationSpeed: 300
},
//Box Widget Plugin. Enable this plugin
//to allow boxes to be collapsed and/or removed
enableBoxWidget: true,
@ -134,6 +145,11 @@ $(function () {
//Enable sidebar tree view controls
$.AdminLTE.tree('.sidebar');
//Enable control sidebar
if (o.enableControlSidebar) {
$.AdminLTE.controlSidebar.activate(o.controlSidebarOptions);
}
//Add slimscroll to navbar dropdown
if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
$(".navbar .menu").slimscroll({
@ -347,41 +363,66 @@ function _init() {
}
});
};
/* ControlSidebar
* ==============
* Control the all of the control sidebar transitions
* Adds functionality to the right sidebar
*
* @type Object
* @usage $.Admin.controlSidebar.activate(options)
* @usage $.AdminLTE.controlSidebar.activate(options)
*/
$.AdminLTE.controlSidebar = {
//Default settings
defaults: {
toggleBtnSelector: "[data-toggle='control-sidebar']",
selector: ".control-sidebar",
slide: false,
animationSpeed: 300
slide: true
},
//Initiate the object
//instantiate the object
activate: function (options) {
var settings = $.extend({}, options, this.defaults);
},
//Close the control sidebar
close: function () {
//Get the object
var _this = this;
//Update options
var o = $.extend({}, options, this.defaults);
//Get the sidebar
var sidebar = $(o.selector);
//The toggle button
var btn = $(o.toggleBtnSelector);
//Initial height fix
_this.fixHeight(sidebar);
//Fix the height when the screen size changes
$(window, ".content").resize(function(){
_this.fixHeight(sidebar);
console.log('debug');
});
//Listen to the click event
btn.click(function(e){
e.preventDefault();
if(!sidebar.hasClass('control-sidebar-open')) {
//Open the sidebar
_this.open(sidebar);
} else {
_this.close(sidebar);
}
});
},
//Open the control sidebar
open: function () {
open: function (sidebar) {
sidebar.addClass('control-sidebar-open');
},
//If the slide option is set, this
//function is used to open the sidebar
slideIn: function() {
},
//The complement funtion to slideIn
slideOut: function () {}
//Close the control sidebar
close: function (sidebar) {
sidebar.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());
}
};
/* BoxWidget

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

File diff suppressed because one or more lines are too long

2
dist/js/demo.js vendored
View File

@ -172,6 +172,4 @@ function setup() {
var tmp = get('skin');
if (tmp && $.inArray(tmp, my_skins))
change_skin(tmp);
change_skin('skin-blue-light');
}

70
index2.html
View File

@ -1121,7 +1121,7 @@
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar">
<aside class="control-sidebar control-sidebar-open">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
@ -1132,17 +1132,73 @@
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h5 class="control-sidebar-heading"><b>News Feed</b></h5>
<h5 class="control-sidebar-heading">News Feed</h5>
<h5 class="control-sidebar-heading"><b>Mail</b></h5>
<h5 class="control-sidebar-heading">Mail</h5>
<h5 class="control-sidebar-heading"><b>Todo List</b></h5>
<h5 class="control-sidebar-heading">Todo List</h5>
</div><!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">Settings Tab Content</div><!-- /.tab-pane -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h5 class="control-sidebar-heading">General Settings</h5>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked />
</label>
<p>
Some information about this general settings option
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked />
</label>
<p>
Other sets of options are available
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked />
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div><!-- /.form-group -->
<h5 class="control-sidebar-heading">Chat Settings</h5>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label>
</div><!-- /.form-group -->
</form>
</div><!-- /.tab-pane -->
</div>
</aside>
</div><!-- ./wrapper -->
@ -1174,7 +1230,7 @@
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes --
<script src="dist/js/demo.js" type="text/javascript"></script-->
</body>
</html>