ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix header to display properly on mobile devices. 

* Update some of the classes to reflect newer version of bootstrap.
 * Use a collapseable header / nav button on mobile devices.
 * Align the on / off button with the rest of the nav items.
This commit is contained in:
Kyle Johnson 2015-02-17 21:29:16 -05:00
parent 62d445a61d
commit cbaec2e17a
1 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/views/header.html
View File

@ -1,20 +1,32 @@
<nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController">
<div class="container-fluid">
<a ui-sref="home"><span class="navbar-brand">ZoneMinder</span></a>
<button type="button" class="btn btn-md navbar-btn pull-right" ng-class="isRunning ? 'btn-success' : 'btn-danger'" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-off"></span>
</button>
<ul class="nav navbar-nav pull-right">
<li><a ui-sref="monitor.list">Monitors</a></li>
<li><a ui-sref="events">Events</a></li>
<li><a href="?view=timeline">Timeline</a></li>
<li><a ui-sref="options">Options</a></li>
<li><a href="?view=log">Logs</span></a></li>
<li><a href="?view=devices">Devices</a></li>
<li><a href="?view=host">Host</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">ZoneMinder</a>
</div>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="monitor.list">Monitors</a></li>
<li><a ui-sref="events">Events</a></li>
<li><a href="?view=timeline">Timeline</a></li>
<li><a ui-sref="options">Options</a></li>
<li><a href="?view=log">Logs</span></a></li>
<li><a href="?view=devices">Devices</a></li>
<li><a href="?view=host">Host</a></li>
<li>
<button type="button" class="btn navbar-btn" ng-class="isRunning ? 'btn-success' : 'btn-danger'" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-off"></span>
</button>
</li>
</ul>
</div> <!-- End #mainNav -->
</div>
</nav>
<div ng-include="'/views/state.html'"></div>