Merge pull request #79 from christianesperar/master

Fix menu and panel toolbox
pull/87/head
Aigars Silkalns 2016-04-14 17:00:12 +03:00
commit 768fbb3226
12 changed files with 86 additions and 77 deletions

View File

@ -484,6 +484,7 @@ a:hover, a:focus {
.nav.side-menu> li {
position: relative;
display: block;
cursor: pointer;
}
.nav.side-menu> li > a {
margin-bottom: 6px;
@ -635,6 +636,7 @@ li.current-page a {
}
.panel_toolbox>li {
float: left;
cursor: pointer;
}
.panel_toolbox>li>a {
padding: 5px;

View File

@ -344,7 +344,7 @@
<div class="x_title">
<h2>E-commerce page design</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -355,7 +355,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -337,7 +337,7 @@
<div class="x_title">
<h2>Bar Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -348,7 +348,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -366,7 +366,7 @@
<div class="x_title">
<h2>Mini Pie</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -377,7 +377,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -396,7 +396,7 @@
<div class="x_title">
<h2>Pie Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -407,7 +407,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -425,7 +425,7 @@
<div class="x_title">
<h2>Pie Area</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -436,7 +436,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -454,7 +454,7 @@
<div class="x_title">
<h2>Donut Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -465,7 +465,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -484,7 +484,7 @@
<div class="x_title">
<h2>Scatter Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -495,7 +495,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -513,7 +513,7 @@
<div class="x_title">
<h2>Line Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -524,7 +524,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -542,7 +542,7 @@
<div class="x_title">
<h2>Horizontal Bar</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -553,7 +553,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -571,7 +571,7 @@
<div class="x_title">
<h2>World Map</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -582,7 +582,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -601,7 +601,7 @@
<div class="x_title">
<h2>Pyramid</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -612,7 +612,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -630,7 +630,7 @@
<div class="x_title">
<h2>Sonar</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -641,7 +641,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -660,7 +660,7 @@
<div class="x_title">
<h2>Guage</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -671,7 +671,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -339,7 +339,7 @@
<div class="x_title">
<h2>Font Awesome Icons <small>different icon design elements</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -350,7 +350,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -349,7 +349,7 @@
<div class="x_title">
<h2> Inbox Design<small>User Mail</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -360,7 +360,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -416,7 +416,7 @@
<div class="x_title">
<h2>Top Profiles</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -427,7 +427,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -6,21 +6,31 @@
// Sidebar
$(function () {
$('#sidebar-menu li ul').slideUp();
$('#sidebar-menu li').removeClass('active');
var URL = window.location,
$BODY = $('body'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$MENU_TOGGLE = $('#menu_toggle');
$SIDEBAR_FOOTER = $('.sidebar-footer');
$LEFT_COL = $('.left_col');
$('#sidebar-menu li').on('click', function() {
$SIDEBAR_MENU.find('li ul').slideUp();
$SIDEBAR_MENU.find('li').removeClass('active');
$SIDEBAR_MENU.find('li').on('click', function(ev) {
var link = $('a', this).attr('href');
if(link) {
window.location.href = link;
} else {
// prevent event bubbling on parent menu
if (link) {
ev.stopPropagation();
}
// execute slidedown if parent menu
else {
if ($(this).is('.active')) {
$(this).removeClass('active');
$('ul', this).slideUp();
} else {
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li ul').slideUp();
$SIDEBAR_MENU.find('li').removeClass('active');
$SIDEBAR_MENU.find('li ul').slideUp();
$(this).addClass('active');
$('ul', this).slideDown();
@ -28,36 +38,33 @@ $(function () {
}
});
$('#menu_toggle').click(function () {
if ($('body').hasClass('nav-md')) {
$('body').removeClass('nav-md').addClass('nav-sm');
$('.left_col').removeClass('scroll-view').removeAttr('style');
$('.sidebar-footer').hide();
$MENU_TOGGLE.on('click', function() {
if ($BODY.hasClass('nav-md')) {
$BODY.removeClass('nav-md').addClass('nav-sm');
$LEFT_COL.removeClass('scroll-view').removeAttr('style');
$SIDEBAR_FOOTER.hide();
if ($('#sidebar-menu li').hasClass('active')) {
$('#sidebar-menu li.active').addClass('active-sm').removeClass('active');
if ($SIDEBAR_MENU.find('li').hasClass('active')) {
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
}
} else {
$('body').removeClass('nav-sm').addClass('nav-md');
$('.sidebar-footer').show();
$BODY.removeClass('nav-sm').addClass('nav-md');
$SIDEBAR_FOOTER.show();
if ($('#sidebar-menu li').hasClass('active-sm')) {
$('#sidebar-menu li.active-sm').addClass('active').removeClass('active-sm');
if ($SIDEBAR_MENU.find('li').hasClass('active-sm')) {
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
}
});
});
// Sidebar Menu active class
$(function () {
var url = window.location;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
// check active menu
$SIDEBAR_MENU.find('a[href="' + URL + '"]').parent('li').addClass('current-page');
$SIDEBAR_MENU.find('a').filter(function () {
return this.href == URL;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
// Right column height
$(".right_col").css("min-height", $(window).height());
$(window).resize(function () {

View File

@ -342,7 +342,7 @@
<div class="x_title">
<h2>Other Graph types <small> Assorted graph types</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -353,7 +353,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -343,7 +343,7 @@
<div class="x_title">
<h2>User Report <small>Activity report</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -354,7 +354,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -343,7 +343,7 @@
<div class="x_title">
<h2>New Partner Contracts Consultancy</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -354,7 +354,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -353,7 +353,7 @@
<div class="x_title">
<h2>Default Example <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -364,7 +364,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -854,7 +854,7 @@
<div class="x_title">
<h2>Button Example <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -865,7 +865,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -1355,7 +1355,7 @@
<div class="x_title">
<h2>Fixed Header Example <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -1366,7 +1366,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -1856,7 +1856,7 @@
<div class="x_title">
<h2>KeyTable example <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -1867,7 +1867,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
@ -2365,7 +2365,7 @@
<div class="x_title">
<h2>Responsive example <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -2376,7 +2376,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>

View File

@ -340,7 +340,7 @@
<div class="x_title">
<h2>Typography <small>different design elements</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a href="#"><i class="fa fa-chevron-up"></i></a>
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
@ -351,7 +351,7 @@
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-close"></i></a>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>