Adds fullscreen button to hide and show header, sidebar and footer

pull/177/head
Kevin Crider 2013-09-27 17:45:52 -04:00
parent 73d9cfd3d9
commit a37e2fc168
3 changed files with 26 additions and 2 deletions

View File

@ -47,7 +47,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
?>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div id="header" class="navbar navbar-default" role="navigation">
<p class="navbar-text navbar-right"><?php echo $daemonStatusHtml; ?></p>
<p class="navbar-text navbar-right">Used Event Storage: <?php echo $diskSpace; ?>%</p>
<p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p>
@ -66,7 +66,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
</div>
</div>
</div>
<div class="container">
<div id="main-content" class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 sidebar-offcanvas" id="sidebar">
<div class="sidebar-nav">
@ -89,6 +89,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
</p>
</div>
</div>
<div id="toggle-fullscreen"><span class="glyphicon glyphicon-fullscreen"></span></div>
<!-- <?php echo $this->element('sql_dump'); ?> -->
<?php echo $this->Js->writeBuffer(); ?>
</body>

View File

@ -1,3 +1,11 @@
/* Fullscreen */
#main-content {}
#main-content.fullscreen {padding-top:15px;}
#toggle-fullscreen {position:absolute;bottom:0px;right:0px;opacity:.5;padding:5px;cursor:pointer;}
#toggle-fullscreen:hover {opacity:1;}
/* End Fullscreen */
/* Bootstrap fixes */
@media (min-width: 1200px) {
.container {

View File

@ -1,5 +1,20 @@
$(document).ready(function() {
// Fullscreen //
var fullscreen = false;
$('#toggle-fullscreen').click(function() {
if (fullscreen) {
$('#header, #sidebar, #footer').show();
fullscreen = false;
$('#main-content').removeClass('fullscreen');
} else {
$('#header, #sidebar, #footer').hide();
fullscreen = true;
$('#main-content').addClass('fullscreen');
}
});
// Fullscreen //
// Version Polling //
setTimeout(function() {
$.post('/Version/isUpdateAvailable', function(data) {