Clean white squared admin with collapsable menu

This commit is contained in:
Adolfo Gómez García 2015-10-02 00:55:58 +02:00
parent 95230292c3
commit fa78b4b295
9 changed files with 344 additions and 148 deletions

File diff suppressed because one or more lines are too long

View File

@ -29,7 +29,7 @@
<body>
<!-- Navigation bar -->
<div id="wrapper">
<div id="wrapper" class="full">
{% block menu %}{% include 'uds/admin/snippets/navbar.html' with admin=request.user.is_admin %}{% endblock %}
<!-- End of menu -->
@ -126,26 +126,49 @@
<script src="{% get_static_prefix %}adm/js/base64.js"></script>
<script type="text/javascript">
// HOver on dropdown menus
function toggleNavbarMethod() {
if ($(window).width() > 768) {
$('.navbar .dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).trigger('click');
}).on('mouseout', function(){
$('.dropdown-toggle', this).trigger('click').blur();
});
}
}
$(function() {
// set default error function
api.defaultFail = gui.failRequestModalFnc(gettext('Error on request'));
// Initialize gui
gui.init();
function showHideTooltip() {
if( $('.side-nav').attr('class').indexOf('full') != -1) {
$('.side-nav > ul > li').find('img').tooltip('destroy');
} else {
$('.side-nav > ul > li').each(function(index, element) {
var $element = $(element).find('a');
var title = $element.find('.menu-lnk').text();
$element.find('img').tooltip({
placement: 'right',
title: title,
container: 'body',
delay: {
show: 500,
hide: 100
}
});
});
}
}
$.fn.datepicker.defaults.format = 'yyyy/mm/dd';
$.fn.datepicker.defaults.todayBtn = "linked";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.language = "{{ LANGUAGE_CODE }}";
$(function(){
showHideTooltip();
$('.side-nav .switcher').on('click', function() {
var rr = [$('.side-nav'), $('#wrapper')];
for( var r = 0; r < 2; r++ ) {
if( rr[r].attr('class').indexOf('full') != -1 ) {
rr[r].removeClass('full');
} else {
rr[r].addClass('full');
}
}
showHideTooltip();
});
// set default error function
api.defaultFail = gui.failRequestModalFnc(gettext('Error on request'));
// Initialize gui
gui.init();
$.fn.datepicker.defaults.format = 'yyyy/mm/dd';
$.fn.datepicker.defaults.todayBtn = "linked";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.language = "{{ LANGUAGE_CODE }}";
});
</script>

View File

@ -16,27 +16,29 @@
<!-- Side bar -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><a class="lnk-dashboard" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/dashboard-monitor.png"/> {% trans 'Overview' %}</a></li>
<li><a class="lnk-service_providers" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/providers.png"/> {% trans 'Services' %}</a></li>
<li><a class="lnk-authenticators" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/authenticators.png"/> {% trans 'Authenticators' %}</a></li>
<li><a class="lnk-osmanagers" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/osmanagers.png"/> Os Managers</a></li>
<li><a class="lnk-connectivity" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/transports.png"/> {% trans 'Connectivity' %}</a></li>
<li><a class="lnk-calendars" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/calendars.png"/> {% trans 'Calendars' %}</a></li>
<li><a class="lnk-deployed_services" href=""><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/pools.png"/> {% trans 'Service Pools' %}</a></li>
{% if admin %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/tools.png"/> Tools <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/gallery.png"/> {% trans 'Gallery' %}</a></li>
<li><a class="lnk-reports" href=""><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/reports.png"/> {% trans 'Reports' %}</a></li>
<li><a class="lnk-configuration" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/configuration.png"/> {% trans 'Configuration' %}</a></li>
<li><a class="lnk-clear_cache" href="#"><img class="table-icon" src="{{ STATIC_URL }}/adm/img/icons/flush-cache.png"/> {% trans 'Flush cache' %}</a></li>
<div class="side-nav">
<div class="switcher fa"> </div>
<ul class="nav navbar-nav">
<li><a class="lnk-dashboard" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/dashboard-monitor.png"/> <span class="menu-lnk">{% trans 'Overview' %}</span></a></li>
<li><a class="lnk-service_providers" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/providers.png"/> <span class="menu-lnk">{% trans 'Services' %}</span></a></li>
<li><a class="lnk-authenticators" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/authenticators.png"/> <span class="menu-lnk">{% trans 'Authenticators' %}</span></a></li>
<li><a class="lnk-osmanagers" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/osmanagers.png"/> <span class="menu-lnk">Os Managers</span></a></li>
<li><a class="lnk-connectivity" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/transports.png"/> <span class="menu-lnk">{% trans 'Connectivity' %}</span></a></li>
<li><a class="lnk-calendars" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/calendars.png"/> <span class="menu-lnk">{% trans 'Calendars' %}</span></a></li>
<li><a class="lnk-deployed_services" href=""><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/pools.png"/> <span class="menu-lnk">{% trans 'Service Pools' %}</span></a></li>
{% if admin %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/tools.png"/> <span class="menu-lnk">{% trans 'Tools' %} <b class="caret"></b></span></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/gallery.png"/> <span class="menu-lnk">{% trans 'Gallery' %}</span></a></li>
<li><a class="lnk-reports" href=""><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/reports.png"/> <span class="menu-lnk">{% trans 'Reports' %}</a></span></li>
<li><a class="lnk-configuration" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/configuration.png"/> <span class="menu-lnk">{% trans 'Configuration' %}</span></a></li>
<li><a class="lnk-clear_cache" href="#"><img class="icon" src="{{ STATIC_URL }}/adm/img/icons/flush-cache.png"/> <span class="menu-lnk">{% trans 'Flush cache' %}</span></a></li>
</ul>
</li>
{% endif %}
</ul>
</li>
{% endif %}
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
</ul>

View File

@ -1,23 +1,16 @@
$btn-margin: $font-size-base/2;
.btn-alert {
@include button-variant($btn-default-color, darken($brand-danger, 40%), darken($brand-danger, 60%));
&.disabled,
&[disabled] {
@include button-variant(darken($btn-default-color, 20%), darken($brand-danger, 40%), $btn-default-border);
}
@include button-variant(complement($brand-danger), darken($brand-danger, 10%), darken($brand-danger, 20%));
margin-right: $btn-margin;
}
.btn-action {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
&.disabled,
&[disabled] {
@include button-variant(darken($btn-default-color, 20%), darken($btn-default-bg, 20%), $btn-default-border);
}
@include button-variant($btn-default-color, invert($btn-default-color), $btn-default-border);
margin-right: $font-size-base/2;
}
.btn-export {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
&.disabled,
&[disabled] {
@include button-variant(darken($btn-default-color, 20%), darken($btn-default-bg, 20%), $btn-default-border);
}
margin-right: $font-size-base/2;
}

View File

@ -41,12 +41,14 @@ This states displays as default
float: right;
}
.table {
*.table {
color: #00496b;
border: 1px solid $brand-primary;
// $font-family-monospace
// $font-family-serif
// $font-family-sans-serif
font-family: $font-family-monospace;
font-size: $font-size-large;
// font-family: $font-family-monospace;
// font-size: $font-size-large;
}
/*.table tbody tr.selected {

View File

@ -129,9 +129,9 @@ $table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
$table-bg: transparent;
//** Background color used for `.table-striped`.
$table-bg-accent: #f9f9f9;
$table-bg-accent: #e1eef4;
//** Background color used for `.table-hover`.
$table-bg-hover: #f5f5f5;
$table-bg-hover: lighten($brand-primary, 10%);
$table-bg-active: $table-bg-hover;
//** Border color for table and cell borders.

View File

@ -1,16 +1,26 @@
// Own variables
$sidebar-size: 90px; // 225 px
$sidebar-size-collapsed: 90px; // 40px;
$sidebar-top: 50px;
$uds-panel-min-height: 500px;
// Bootstrap
$icon-font-path: "../fonts/";
@import "_udsvars";
// Own variables
$sidebar-icon-width: 24px;
$sidebar-icon-width-collapsed: 36px;
$sidebar-size: 225px; // 225 px
$sidebar-size-collapsed: $sidebar-icon-width-collapsed + 2*$font-size-base; // 40px;
$sidebar-top: 50px;
$sidebar-switcher-size: 14px;
$sizebar-switcher-font-size: $sidebar-switcher-size - 2px;
$sidebar-switcher-pos: $sidebar-size - $sidebar-switcher-size;
$sidebar-switcher-pos-collapsed: $sidebar-size-collapsed - $sidebar-switcher-size;
$uds-panel-min-height: 500px;
// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
@ -135,6 +145,20 @@ body {
height: 100%;
}
// Hides switcher on small devices, so menu displays correctly
.side-nav {
padding-top: 0px;
.switcher {
visibility: hidden;
width: 0px;
height: 0px;
}
.icon {
width: 24px;
vertical-align: center;
padding-bottom: 3px;
}
}
/* Edit Below to Customize Widths > 768px */
@media (min-width: 768px) {
@ -142,6 +166,12 @@ body {
#wrapper {
padding-left: $sidebar-size;
-webkit-transition: padding 0.3s; /* For Safari 3.1 to 6.0 */
transition: padding 0.3s;
&.full {
padding-left: $sidebar-size-collapsed;
}
}
#page-wrapper {
@ -149,24 +179,119 @@ body {
}
/* Side Nav */
.side-nav {
margin-left: -$sidebar-size;
left: $sidebar-size;
width: $sidebar-size-collapsed;
position: fixed;
top: $sidebar-top;
height: 100%;
overflow-y: auto;
border-radius: 0;
border-color: $navbar-inverse-border;
border-color: $navbar-default-border;
border-style: solid;
border-width: 0 1px 0 0;
background-color: $navbar-inverse-bg;
overflow-y: auto;
background-color: $navbar-default-bg;
-webkit-transition: width 0.3s; /* For Safari 3.1 to 6.0 */
transition: width 0.3s;
&:hover {
margin-left: -$sidebar-size-collapsed;
padding-top: $sidebar-switcher-size;
left: $sidebar-size-collapsed;
width: $sidebar-size-collapsed;
.icon {
width: $sidebar-icon-width-collapsed;
-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
transition: all 0.3s;
}
.menu-lnk {
display: none;
overflow-x: hidden;
}
.switcher {
visibility: visible;
position: absolute;
left: $sidebar-switcher-pos-collapsed;
top: 0;
background-color: $navbar-inverse-bg;
color: $gray-lighter;
width: $sidebar-switcher-size;
height: $sidebar-switcher-size;
font-size: $sizebar-switcher-font-size;
text-align: center;
cursor: pointer;
z-index: $zindex-popover;
-webkit-transition: left 0.3s; /* For Safari 3.1 to 6.0 */
transition: left 0.3s;
&:before {
content:"\f101";
}
}
> ul > li {
width: $sidebar-size;
overflow-x: hidden;
// border-bottom: 1px solid $navbar-default-border;
&:hover, &.active, &:focus {
color: $brand-primary;
background-color: darken($navbar-default-bg, 15%);
}
&.dropdown > ul.dropdown-menu {
width: $sidebar-size;
position: relative;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
-webkit-box-shadow: none;
> li > a {
color: inherit;
padding: $font-size-base;
&:hover, &.active, &:focus {
color: #fff;
background-color: #080808;
}
}
}
}
&.full {
margin-left: -$sidebar-size;
left: $sidebar-size;
width: $sidebar-size;
.switcher {
left: $sidebar-switcher-pos;
&:before {
content:"\f100";
}
}
.icon {
width: $sidebar-icon-width;
}
.menu-lnk {
display: inline;
opacity: 1.0;
width: 100%;
}
> ul > li {
//border-bottom: none;
}
}
/*&:hover {
width: $sidebar-size;
}
@ -208,10 +333,10 @@ body {
}
}
/* > a {
width: $sidebar-size;
}*/
}
//> a {
// width: $sidebar-size;
//}
}*/
}
/* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */

View File

@ -44,50 +44,53 @@
<!-- Side bar -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><a class="lnk-dashboard" href="#"><span class="fa fa-dashboard"> </span>Overview</a></li>
<li><a class="lnk-service_providers" href="#"><img class="table-icon" src="img/icons/providers.png"/> Services</a></li>
<li><a class="lnk-authenticators" href="#"><img class="table-icon" src="img/icons/authenticators.png"/> Authenticators</a></li>
<li><a class="lnk-osmanagers" href="#"><img class="table-icon" src="img/icons/osmanagers.png"/> Os Managers</a></li>
<li><a class="lnk-connectivity" href="#"><img class="table-icon" src="img/icons/transports.png"/> Connectivity</a></li>
<li><a class="lnk-calendars" href="#"><img class="table-icon" src="img/icons/calendars.png"/> Calendars</a></li>
<li><a class="lnk-deployed_services" href=""><img class="table-icon" src="img/icons/pools.png"/> Service Pools</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="table-icon" src="img/icons/tools.png"/> Tools <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="table-icon" src="img/icons/gallery.png"/> Gallery</a></li>
<li><a class="lnk-reports" href=""><img class="table-icon" src="img/icons/reports.png"/> Reports</a></li>
<li><a class="lnk-configuration" href="#"><img class="table-icon" src="img/icons/configuration.png"/> Configuration</a></li>
<li><a class="lnk-clear_cache" href="#"><img class="table-icon" src="img/icons/flush-cache.png"/> Flush cache</a></li>
<div class="side-nav">
<div class="switcher fa"> </div>
<ul class="nav navbar-nav">
<li><a class="lnk-dashboard" href="#"><img src="img/icons/dashboard-monitor.png" class="icon"> <span class="menu-lnk">Overview</span></a></li>
<li><a class="lnk-service_providers" href="#"><img class="icon" src="img/icons/providers.png"/> <span class="menu-lnk">Services</span></a></li>
<li><a class="lnk-authenticators" href="#"><img class="icon" src="img/icons/authenticators.png"/> <span class="menu-lnk">Authenticators</span></a></li>
<li><a class="lnk-osmanagers" href="#"><img class="icon" src="img/icons/osmanagers.png"/> <span class="menu-lnk">Os Managers</span></a></li>
<li><a class="lnk-connectivity" href="#"><img class="icon" src="img/icons/transports.png"/> <span class="menu-lnk">Connectivity</span></a></li>
<li><a class="lnk-calendars" href="#"><img class="icon" src="img/icons/calendars.png"/> <span class="menu-lnk">Calendars</span></a></li>
<li><a class="lnk-deployed_services" href=""><img class="icon" src="img/icons/pools.png"/> <span class="menu-lnk">Service Pools</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="table-icon" src="img/icons/tools.png"/> Tools <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="table-icon" src="img/icons/gallery.png"/> Gallery</a></li>
<li><a class="lnk-reports" href=""><img class="table-icon" src="img/icons/reports.png"/> Reports</a></li>
<li><a class="lnk-configuration" href="#"><img class="table-icon" src="img/icons/configuration.png"/> Configuration</a></li>
<li><a class="lnk-clear_cache" href="#"><img class="table-icon" src="img/icons/flush-cache.png"/> Flush cache</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-user">
</ul>
<form id="form_language" action="{% url "django.views.i18n.set_language" %}" method="post">
<input id="id_language" type="hidden" name="language" value=""/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><!--<i class="glyphicon bfh-flag-{{ lang.0|country }}"></i>-->
<i class="fa fa-comments-o"></i> Spanish<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- here we force an update of locale of REST api -->
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>English</a></li>
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>French</a></li>
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>German</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard"></i> Username <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{% url 'uds.web.views.index"><span class="fa fa-user"></span> User mode</a></li>
<li><a href="/logout"><span class="fa fa-power-off text-danger"></span> Logout</a></li>
</ul>
</li>
<form id="form_language" action="{% url "django.views.i18n.set_language" %}" method="post">
<input id="id_language" type="hidden" name="language" value=""/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><!--<i class="glyphicon bfh-flag-{{ lang.0|country }}"></i>-->
<i class="fa fa-comments-o"></i> Spanish<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- here we force an update of locale of REST api -->
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>English</a></li>
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>French</a></li>
<li><a href="#" onclick='$("#id_language").val("{{ lang.0 }}"); $("#form_language").submit();'>German</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard"></i> Username <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{% url 'uds.web.views.index"><span class="fa fa-user"></span> User mode</a></li>
<li><a href="/logout"><span class="fa fa-power-off text-danger"></span> Logout</a></li>
</ul>
</li>
</ul>
</ul>
</form>
</div>
@ -137,14 +140,20 @@
<script src="js/main.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
$(function(){
$('.side-nav .switcher').on('click', function() {
var rr = [$('.side-nav'), $('#wrapper')];
for( var r = 0; r < 2; r++ ) {
if( rr[r].attr('class').contains('full') ) {
rr[r].removeClass('full');
} else {
rr[r].addClass('full');
}
}
});
});
</script>
</body>
</html>

View File

@ -25,7 +25,7 @@
</head>
<body>
<!-- Navigation bar -->
<div id="wrapper">
<div id="wrapper" class="full">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
@ -44,24 +44,27 @@
<!-- Side bar -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><a class="lnk-dashboard" href="#"><img class="table-icon" src="img/icons/dashboard-monitor.png"/> Overview</a></li>
<li><a class="lnk-service_providers" href="#"><img class="table-icon" src="img/icons/providers.png"/> Services</a></li>
<li><a class="lnk-authenticators" href="#"><img class="table-icon" src="img/icons/authenticators.png"/> Authenticators</a></li>
<li><a class="lnk-osmanagers" href="#"><img class="table-icon" src="img/icons/osmanagers.png"/> Os Managers</a></li>
<li><a class="lnk-connectivity" href="#"><img class="table-icon" src="img/icons/transports.png"/> Connectivity</a></li>
<li><a class="lnk-calendars" href="#"><img class="table-icon" src="img/icons/calendars.png"/> Calendars</a></li>
<li><a class="lnk-deployed_services" href=""><img class="table-icon" src="img/icons/pools.png"/> Service Pools</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="table-icon" src="img/icons/tools.png"/> Tools <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="table-icon" src="img/icons/gallery.png"/> Gallery</a></li>
<li><a class="lnk-reports" href=""><img class="table-icon" src="img/icons/reports.png"/> Reports</a></li>
<li><a class="lnk-configuration" href="#"><img class="table-icon" src="img/icons/configuration.png"/> Configuration</a></li>
<li><a class="lnk-clear_cache" href="#"><img class="table-icon" src="img/icons/flush-cache.png"/> Flush cache</a></li>
</ul>
</li>
</ul>
<div class="side-nav">
<div class="switcher fa"> </div>
<ul class="nav navbar-nav">
<li><a class="lnk-dashboard" href="#"><img src="img/icons/dashboard-monitor.png" class="icon"> <span class="menu-lnk">Overview</span></a></li>
<li><a class="lnk-service_providers" href="#"><img class="icon" src="img/icons/providers.png"/> <span class="menu-lnk">Services</span></a></li>
<li><a class="lnk-authenticators" href="#"><img class="icon" src="img/icons/authenticators.png"/> <span class="menu-lnk">Authenticators</span></a></li>
<li><a class="lnk-osmanagers" href="#"><img class="icon" src="img/icons/osmanagers.png"/> <span class="menu-lnk">Os Managers</span></a></li>
<li><a class="lnk-connectivity" href="#"><img class="icon" src="img/icons/transports.png"/> <span class="menu-lnk">Connectivity</span></a></li>
<li><a class="lnk-calendars" href="#"><img class="icon" src="img/icons/calendars.png"/> <span class="menu-lnk">Calendars</span></a></li>
<li><a class="lnk-deployed_services" href=""><img class="icon" src="img/icons/pools.png"/> <span class="menu-lnk">Service Pools</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="icon" src="img/icons/tools.png"/> <span class="menu-lnk">Tools <b class="caret"></b></span></a>
<ul class="dropdown-menu">
<li><a class="lnk-gallery" href="#"><img class="icon" src="img/icons/gallery.png"/> <span class="menu-lnk">Gallery</span></a></li>
<li><a class="lnk-reports" href=""><img class="icon" src="img/icons/reports.png"/> <span class="menu-lnk">Reports</span></a></li>
<li><a class="lnk-configuration" href="#"><img class="icon" src="img/icons/configuration.png"/> <span class="menu-lnk">Configuration</span></a></li>
<li><a class="lnk-clear_cache" href="#"><img class="icon" src="img/icons/flush-cache.png"/> <span class="menu-lnk">Flush cache</span></a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
</ul>
@ -1535,6 +1538,45 @@
<script src="js/main.js"></script>
<!-- endbuild -->
<script>
function showHideTooltip() {
if( $('.side-nav').attr('class').indexOf('full') != -1) {
$('.side-nav li').find('img').tooltip('destroy');
} else {
$('.side-nav li').each(function(index, element) {
var $element = $(element).find('a').eq(0);
var title = $element.find('.menu-lnk').eq(0).text();
$element.find('img').eq(0).tooltip({
placement: 'right',
title: title,
container: 'body',
delay: {
show: 500,
hide: 100
}
});
});
}
}
$(function(){
showHideTooltip();
$('.side-nav .switcher').on('click', function() {
var rr = [$('.side-nav'), $('#wrapper')];
for( var r = 0; r < 2; r++ ) {
if( rr[r].attr('class').indexOf('full') != -1 ) {
rr[r].removeClass('full');
} else {
rr[r].addClass('full');
}
}
showHideTooltip();
});
});
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=