mirror of https://github.com/ColorlibHQ/AdminLTE
Updated control sidebar
Abdullah Almsaeed
parent
7cc7d81ad9
commit
bfb25a6ee8
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
* ---------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
70
index2.html
|
|
@ -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>
|
||||
Loading…
Reference in New Issue