Modify Menubar

- Small Screens - Icon only - Wrap the label in a span with hidden-sm
- Medium Screen - Text only - add hidden-md to the icon
- Large Devices - shrink the left/right padding on .nav>li>a to 10px.
This commit is contained in:
Aaron Daniels
2015-11-18 08:32:48 +10:00
parent 725fc56f41
commit 2a52b935b5
2 changed files with 12 additions and 10 deletions

View File

@ -1764,4 +1764,7 @@ tr.search:nth-child(odd) {
label { label {
font-weight: normal; font-weight: normal;
} }
.nav>li>a.dropdown-toggle {
padding: 15px 10px;
}

View File

@ -47,7 +47,7 @@ else {
<div class="collapse navbar-collapse" id="navHeaderCollapse"> <div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="dropdown"> <li class="dropdown">
<a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-lightbulb-o fa-fw fa-lg fa-nav-icons"></i> Overview</a> <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-lightbulb-o fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Overview</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-lightbulb-o fa-fw fa-lg"></i> Overview</a></li> <li><a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-lightbulb-o fa-fw fa-lg"></i> Overview</a></li>
<li class="dropdown-submenu"> <li class="dropdown-submenu">
@ -107,7 +107,7 @@ if ( dbFetchCell("SELECT 1 from `packages` LIMIT 1") ) {
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="devices/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-server fa-fw fa-lg fa-nav-icons"></i> Devices</a> <a href="devices/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-server fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Devices</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="dropdown-submenu"> <li class="dropdown-submenu">
<a href="devices/"><i class="fa fa-server fa-fw fa-lg"></i> All Devices</a> <a href="devices/"><i class="fa fa-server fa-fw fa-lg"></i> All Devices</a>
@ -177,11 +177,10 @@ if ($_SESSION['userlevel'] >= '10') {
</li> </li>
<?php <?php
if ($config['show_services']) { if ($config['show_services']) {
?> ?>
<li class="dropdown"> <li class="dropdown">
<a href="services/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-cogs fa-fw fa-lg fa-nav-icons"></i> Services</a> <a href="services/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-cogs fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Services</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="services/"><i class="fa fa-cogs fa-fw fa-lg"></i> All Services </a></li> <li><a href="services/"><i class="fa fa-cogs fa-fw fa-lg"></i> All Services </a></li>
@ -210,7 +209,7 @@ if ($_SESSION['userlevel'] >= '10') {
<!-- PORTS --> <!-- PORTS -->
<li class="dropdown"> <li class="dropdown">
<a href="ports/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-link fa-fw fa-lg fa-nav-icons"></i> Ports</a> <a href="ports/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-link fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Ports</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="ports/"><i class="fa fa-link fa-fw fa-lg"></i> All Ports</a></li> <li><a href="ports/"><i class="fa fa-link fa-fw fa-lg"></i> All Ports</a></li>
@ -316,7 +315,7 @@ $menu_sensors = $used_sensors;
?> ?>
<li class="dropdown"> <li class="dropdown">
<a href="health/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-heartbeat fa-fw fa-lg fa-nav-icons"></i> Health</a> <a href="health/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-heartbeat fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Health</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="health/metric=mempool/"><i class="fa fa-gears fa-fw fa-lg"></i> Memory</a></li> <li><a href="health/metric=mempool/"><i class="fa fa-gears fa-fw fa-lg"></i> Memory</a></li>
<li><a href="health/metric=processor/"><i class="fa fa-desktop fa-fw fa-lg"></i> Processor</a></li> <li><a href="health/metric=processor/"><i class="fa fa-desktop fa-fw fa-lg"></i> Processor</a></li>
@ -367,7 +366,7 @@ $app_list = dbFetchRows("SELECT DISTINCT(`app_type`) AS `app_type` FROM `applica
if ($_SESSION['userlevel'] >= '5' && count($app_list) > "0") { if ($_SESSION['userlevel'] >= '5' && count($app_list) > "0") {
?> ?>
<li class="dropdown"> <li class="dropdown">
<a href="apps/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-tasks fa-fw fa-lg fa-nav-icons"></i> Apps</a> <a href="apps/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-tasks fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Apps</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<?php <?php
@ -405,7 +404,7 @@ if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf
?> ?>
<li class="dropdown"> <li class="dropdown">
<a href="routing/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-arrows fa-fw fa-lg fa-nav-icons"></i> Routing</a> <a href="routing/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-arrows fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm">Routing</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<?php <?php
$separator = 0; $separator = 0;
@ -452,7 +451,7 @@ if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf
?> ?>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-plug fa-fw fa-lg fa-nav-icons"></i> <span class="hidden-md hidden-sm">Plugins</span></a> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-plug fa-fw fa-lg fa-nav-icons hidden-md"></i> <span class="hidden-sm hidden-lg">Plugins</span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<?php <?php
Plugins::call('menu'); Plugins::call('menu');