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

Updates to v2.1 alpha

pull/337/head
Abdullah Almsaeed 2015-04-09 18:52:51 -04:00
parent 0fc9439050
commit 340be0df61
10 changed files with 211 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
build/less/sidebar-mini.less
View File

@ -23,30 +23,14 @@
.translate(0, 0);
width: 50px!important;
z-index: 850;
//Keep only the image of the user in the user panel
.user-panel {
> .info {
display: none;
}
}
}
.sidebar-menu {
//Make the sidebar links, menus, labels, badeges
//and angle icons disappear
> li {
position: relative;
> a {
margin-right: 0;
}
> a > span,
> .treeview-menu,
> a > .pull-right,
&.header {
display: none!important;
}
> a > span {
border-top-right-radius: 4px;
}
@ -69,6 +53,8 @@
> a > span:not(.pull-right),
> .treeview-menu {
display: block!important;
visibility: visible;
.opacity(1);
position: absolute;
width: @sidebar-width - 50;
left: 50px;
@ -77,6 +63,7 @@
//position the header & treeview menus
> a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
@ -88,9 +75,15 @@
}
}
//One more thing to remove because it doesn't fit :-z
.sidebar-form {
display: none;
//Make the sidebar links, menus, labels, badeges
//and angle icons disappear
.main-sidebar .user-panel > .info,
.sidebar-form,
.sidebar-menu > li > a > span,
.sidebar-menu > li > .treeview-menu,
.sidebar-menu >li > a > .pull-right,
.sidebar-menu li.header {
display: none!important;
}
.main-header {
@ -108,12 +101,42 @@
}
}
//Of course, since the logo got smaller, we need to fix the
//navbar's position
//Since the logo got smaller, we need to fix the navbar's position
.navbar {
margin-left: 50px;
}
}
}
}
}
.main-sidebar .user-panel > .info,
.sidebar-form,
.sidebar-menu > li > a > span,
.sidebar-menu > li > .treeview-menu,
.sidebar-menu >li > a > .pull-right,
.sidebar-menu li.header {
.transition(display 0s linear 1s);
}
//A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu > li > a,
.main-sidebar .user-panel,
.sidebar-menu > li.header
.treeview-menu > li > a {
width: 100%;
white-space: nowrap!important;
}
.sidebar-menu > li.header {
overflow: hidden;
text-overflow: clip;
}
.sidebar-menu li > a {
position: relative;
> .pull-right {
position: absolute;
top: 50%;
right: 10px;
margin-top: -7px;
}
}

44
build/less/sidebar.less
View File

@ -9,17 +9,17 @@
.left-side {
position: absolute;
top: 0;
left: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: @sidebar-width;
z-index: 810;
//Using disposable variable to join statements with a comma
@transition-rule: @transition-speed @transition-fn,
@transition-rule: @transition-speed @transition-fn,
width @transition-speed @transition-fn;
.transition-transform(@transition-rule);
@media (max-width: @screen-xs-max) {
.translate(-@sidebar-width, 0);
.translate(-@sidebar-width, 0);
}
.sidebar-collapse & {
@media (min-width: @screen-sm) {
@ -45,30 +45,35 @@
//Sidebar user panel
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
.clearfix();
> .image > img {
width: 100%;
max-width: 45px;
height: auto;
height: auto;
}
> .info {
font-weight: 600;
> .info {
padding: 5px 5px 5px 15px;
font-size: 14px;
line-height: 1;
}
> .info > p {
margin-bottom: 9px;
}
> .info > a {
text-decoration: none;
padding-right: 5px;
margin-top: 3px;
font-size: 11px;
font-weight: normal;
> .fa, > .ion, > .glyphicon {
margin-right: 3px;
position: absolute;
left: 55px;
> p {
font-weight: 600;
margin-bottom: 9px;
}
> a {
text-decoration: none;
padding-right: 5px;
margin-top: 3px;
font-size: 11px;
> .fa,
> .ion,
> .glyphicon {
margin-right: 3px;
}
}
}
}
@ -78,6 +83,7 @@
list-style: none;
margin: 0;
padding: 0;
//First Level
> li {
position: relative;
margin: 0;

60
dist/css/AdminLTE.css vendored
View File

@ -453,7 +453,10 @@ a:focus {
border-color: transparent!important;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-panel:before,
.user-panel:after {
@ -469,12 +472,13 @@ a:focus {
height: auto;
}
.user-panel > .info {
font-weight: 600;
padding: 5px 5px 5px 15px;
font-size: 14px;
line-height: 1;
position: absolute;
left: 55px;
}
.user-panel > .info > p {
font-weight: 600;
margin-bottom: 9px;
}
.user-panel > .info > a {
@ -482,7 +486,6 @@ a:focus {
padding-right: 5px;
margin-top: 3px;
font-size: 11px;
font-weight: normal;
}
.user-panel > .info > a > .fa,
.user-panel > .info > a > .ion,
@ -578,21 +581,12 @@ a:focus {
width: 50px!important;
z-index: 850;
}
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info {
display: none;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
position: relative;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
margin-right: 0;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
.sidebar-mini.sidebar-collapse .sidebar-menu > li.header {
display: none!important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
border-top-right-radius: 4px;
}
@ -607,12 +601,16 @@ a:focus {
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
display: block!important;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
position: absolute;
width: 180px;
left: 50px;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
@ -620,8 +618,13 @@ a:focus {
top: 44px;
margin-left: 0;
}
.sidebar-mini.sidebar-collapse .sidebar-form {
display: none;
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
.sidebar-mini.sidebar-collapse .sidebar-form,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
.sidebar-mini.sidebar-collapse .sidebar-menu li.header {
display: none!important;
}
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 50px;
@ -639,6 +642,35 @@ a:focus {
margin-left: 50px;
}
}
.main-sidebar .user-panel > .info,
.sidebar-form,
.sidebar-menu > li > a > span,
.sidebar-menu > li > .treeview-menu,
.sidebar-menu > li > a > .pull-right,
.sidebar-menu li.header {
-webkit-transition: display 0s linear 1s;
-o-transition: display 0s linear 1s;
transition: display 0s linear 1s;
}
.sidebar-menu > li > a,
.main-sidebar .user-panel,
.sidebar-menu > li.header .treeview-menu > li > a {
width: 100%;
white-space: nowrap!important;
}
.sidebar-menu > li.header {
overflow: hidden;
text-overflow: clip;
}
.sidebar-menu li > a {
position: relative;
}
.sidebar-menu li > a > .pull-right {
position: absolute;
top: 50%;
right: 10px;
margin-top: -7px;
}
/*
* Component: Control sidebar. By deafult, this is the right sidebar.
*/

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

File diff suppressed because one or more lines are too long

32
dist/js/app.js vendored
View File

@ -385,6 +385,7 @@ function _init() {
//Listen to the click event
btn.click(function (e) {
e.preventDefault();
//If the sidebar is not open
if (!sidebar.hasClass('control-sidebar-open')
&& !$('body').hasClass('control-sidebar-open')) {
//Open the sidebar
@ -395,32 +396,37 @@ function _init() {
});
//If the body has a boxed layout, fix the sidebar bg position
if ($("body").hasClass('layout-boxed')) {
var bg = $(".control-sidebar-bg");
bg.css("position", "absolute");
_this._fix(bg);
}
var bg = $(".control-sidebar-bg");
_this._fix(bg);
},
//Open the control sidebar
open: function (sidebar, slide) {
//Slide over content
if (slide)
sidebar.addClass('control-sidebar-open');
//Push the content by adding the open class to the body instead
//of the sidebar itself
else
$('body').addClass('control-sidebar-open');
},
//Close the control sidebar
close: function (sidebar, slide) {
if (slide)
sidebar.removeClass('control-sidebar-open');
else
$('body').removeClass('control-sidebar-open');
sidebar.removeClass('control-sidebar-open');
$('body').removeClass('control-sidebar-open');
},
_fix: function (sidebar) {
var _this = this;
sidebar.height($(".wrapper").height());
$(window).resize(function () {
_this._fix(sidebar);
});
if ($("body").hasClass('layout-boxed')) {
sidebar.css('position', 'absolute');
sidebar.height($(".wrapper").height());
$(window).resize(function () {
_this._fix(sidebar);
});
} else {
sidebar.css('position', 'fixed');
sidebar.height($(window).height());
}
}
};

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

File diff suppressed because one or more lines are too long

127
dist/js/demo.js vendored
View File

@ -4,7 +4,7 @@
* You should not use this file in production.
* This file is for demo purposes only.
*/
(function ($) {
(function ($, AdminLTE) {
/**
* List of all the available skins
@ -26,93 +26,62 @@
"skin-green-light"
];
/**
* CSS rules for the menu
*
* @type Object
*/
var menu_css = {
"padding": "10px",
"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)"
};
//Create the new tab
var tab_pane = $("<div />", {
"id": "control-sidebar-theme-demo-options-tab",
"class": "tab-pane"
});
/**
* 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 tab button
var tab_button = $("<li />")
.html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
+ "<i class='fa fa-wrench'></i>"
+ "</a>");
//Create the handle
var demo = $("<div />")
.css(handle_css)
.html("<i class='fa fa-gear'></i>")
.addClass("no-print");
//Add the tab button to the right sidebar tabs
$("[href='#control-sidebar-home-tab']")
.parent()
.before(tab_button);
//Create the menu
var demo_settings = $("<div />")
.css(menu_css)
.addClass("no-print");
var demo_settings = $("<div />");
//Layout options
demo_settings.append(
"<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>"
"<h4 class='control-sidebar-heading'>"
+ "Layout Options"
+ "</h4>"
//Fixed layout
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
+ "<label>"
+ "<input type='checkbox' data-layout='layout-fixed'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
+ "Fixed layout"
+ "</label>"
+ "</div>"
+ "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
+ "</div>"
//Boxed layout
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
+ "<label>"
+ "<input type='checkbox' data-layout='layout-boxed'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
+ "Boxed Layout"
+ "</label>"
+ "</div>"
+ "<p>Activate the boxed layout</p>"
+ "</div>"
//Sidebar Toggle
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
+ "<label>"
+ "<input type='checkbox' data-layout='sidebar-collapse'/> "
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+ "Toggle Sidebar"
+ "</label>"
+ "</div>"
+ "<p>Toggle the left sidebar's state (open or collapse)</p>"
+ "</div>"
//Control Sidebar Toggle
+ "<div class='form-group'>"
+ "<div class='checkbox'>"
+ "<label>"
+ "<input type='checkbox' data-controlsidebar='control-sidebar-open'/> "
+ "Toggle Control Sidebar Slide Effect"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+ "Toggle Right Sidebar Slide"
+ "</label>"
+ "<small>Toggles between slide over content and push content effects.</small>"
+ "</div>"
+ "<p>Toggles between slide over content and push content effects.</p>"
+ "</div>"
);
var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
@ -217,23 +186,11 @@
+ "<p class='text-center no-margin' 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("<h4 class='control-sidebar-heading'>Skins</h4>");
demo_settings.append(skins_list);
demo.click(function () {
if (!$(this).hasClass("open")) {
$(this).animate({"right": "250px"});
demo_settings.animate({"right": "0"});
$(this).addClass("open");
} else {
$(this).animate({"right": "0"});
demo_settings.animate({"right": "-250px"});
$(this).removeClass("open");
}
});
$("body").append(demo);
$("body").append(demo_settings);
tab_pane.append(demo_settings);
$("#control-sidebar-settings-tab").before(tab_pane);
setup();
@ -245,8 +202,10 @@
*/
function change_layout(cls) {
$("body").toggleClass(cls);
$.AdminLTE.layout.fixSidebar();
//Fix the problem
AdminLTE.layout.fixSidebar();
//Fix the problem with right sidebar and layout boxed
if(cls == "layout-boxed")
AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
}
/**
@ -313,13 +272,13 @@
$("[data-layout]").on('click', function () {
change_layout($(this).data('layout'));
});
$("[data-controlsidebar]").on('click', function () {
change_layout($(this).data('controlsidebar'));
var slide = !$.AdminLTE.options.controlSidebarOptions.slide;
$.AdminLTE.options.controlSidebarOptions.slide = slide;
if(!slide)
var slide = !AdminLTE.options.controlSidebarOptions.slide;
AdminLTE.options.controlSidebarOptions.slide = slide;
if (!slide)
$('.control-sidebar').removeClass('control-sidebar-open');
});
}
})(jQuery);
})(jQuery, $.AdminLTE);

6
dist/js/pages/dashboard.js vendored
View File

@ -8,11 +8,6 @@
$(function () {
//Activate the iCheck Plugin
$('input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
//Make the dashboard widgets sortable Using jquery UI
$(".connectedSortable").sortable({
placeholder: "sort-highlight",
@ -22,6 +17,7 @@ $(function () {
zIndex: 999999
});
$(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move");
//jQuery UI sortable for the todo list
$(".todo-list").sortable({
placeholder: "sort-highlight",

10
index.html
View File

@ -1092,18 +1092,16 @@
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js" type="text/javascript"></script>
</body>

57
index2.html
View File

@ -18,7 +18,7 @@
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
@ -50,7 +50,7 @@
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
@ -1113,11 +1113,11 @@
<strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar">
<!-- Control Sidebar -->
<aside class="control-sidebar">
<!-- 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>
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
@ -1164,59 +1164,58 @@
</li>
</ul><!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class='control-sidebar-menu'>
<li>
<a href='javascript::;'>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</div>
</a>
</li>
</li>
<li>
<a href='javascript::;'>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</div>
</a>
</li>
</li>
<li>
<a href='javascript::;'>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-waring pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</div>
</a>
</li>
</li>
<li>
<a href='javascript::;'>
<a href='javascript::;'>
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</div>
</a>
</li>
</ul><!-- /.control-sidebar-menu -->
</li>
</ul><!-- /.control-sidebar-menu -->
</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">
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
@ -1255,21 +1254,21 @@
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked />
</label>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right" />
</label>
</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>
</label>
</div><!-- /.form-group -->
</form>
</div><!-- /.tab-pane -->
@ -1278,7 +1277,7 @@
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class='control-sidebar-bg'></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.3 -->
@ -1286,7 +1285,7 @@
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- Sparkline -->
@ -1298,8 +1297,6 @@
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- ChartJS 1.0.1 -->
@ -1307,7 +1304,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>
</body>