make all infobox panels collapsible
This commit is contained in:
parent
61df68a098
commit
2008af9a68
11 changed files with 51 additions and 10 deletions
7
css/style.css
Normal file
7
css/style.css
Normal file
|
@ -0,0 +1,7 @@
|
|||
.clickable{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-heading span {
|
||||
font-size: 15px;
|
||||
}
|
|
@ -1,6 +1,7 @@
|
|||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Disk Use</div>
|
||||
<div class="panel-heading">Disk Use<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="diskuse" class="table diskuse table-condensed table-striped table-hover">
|
||||
|
@ -57,4 +58,5 @@ try{
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,7 +3,8 @@ $totalLH = count($lastHeard);
|
|||
?>
|
||||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Last Heard List of today's <?php echo $totalLH; ?> callsigns.</div>
|
||||
<div class="panel-heading">Last Heard List of today's <?php echo $totalLH; ?> callsigns.<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="lastHeard" class="table lastHeard table-condensed table-striped table-hover">
|
||||
|
@ -29,6 +30,7 @@ $totalLH = count($lastHeard);
|
|||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
|
|
@ -3,7 +3,8 @@ $totalLH = count($lastHeard);
|
|||
?>
|
||||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Today's local transmissions</div>
|
||||
<div class="panel-heading">Today's local transmissions<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="localTx" class="table localTx table-condensed table-striped table-hover">
|
||||
|
@ -35,6 +36,7 @@ $totalLH = count($lastHeard);
|
|||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Enabled Modes</div>
|
||||
<div class="panel-heading">Enabled Modes<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
|
@ -16,4 +17,5 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Repeater Info</div>
|
||||
<div class="panel-heading">Repeater Info<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table class="table repeaterinfo">
|
||||
|
@ -115,4 +116,5 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">System Info</div>
|
||||
<div class="panel-heading">System Info<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="sysinfo" class="table sysinfo table-condensed">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function loadXMLDocSysinfo() {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">Currently TXing</div>
|
||||
<div class="panel-heading">Currently TXing<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="currtx" class="table curTx table-condensed table-striped table-hover">
|
||||
|
@ -32,6 +33,7 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function doXMLHTTPRequest(scriptname, elem) {
|
||||
var xmlhttp;
|
||||
|
|
|
@ -2,7 +2,8 @@
|
|||
?>
|
||||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">YSFGateway-Infos</div>
|
||||
<div class="panel-heading">YSFGateway-Infos<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<table class="table">
|
||||
<tr>
|
||||
|
@ -17,10 +18,12 @@
|
|||
?>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<!-- Standard-Panel-Inhalt -->
|
||||
<div class="panel-heading">YSFReflectors reported active</div>
|
||||
<div class="panel-heading">YSFReflectors reported active<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></div>
|
||||
<div class="panel-body">
|
||||
<!-- Tabelle -->
|
||||
<div class="table-responsive">
|
||||
<table id="ysfGateways" class="table ysfGateways table-condensed table-striped table-hover">
|
||||
|
@ -56,6 +59,7 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
|
16
index.php
16
index.php
|
@ -21,6 +21,8 @@ include "version.php";
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.6,maximum-scale=1, user-scalable=yes">
|
||||
<!-- Default-CSS -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- CSS for tooltip display -->
|
||||
<link rel="stylesheet" href="css/tooltip.css">
|
||||
<!-- CSS for monospaced fonts in tables -->
|
||||
|
@ -157,6 +159,20 @@ if (!isset($_GET['stoprefresh'])) {
|
|||
instructions how to enable JavaScript in your web browser</a>.
|
||||
</noscript>
|
||||
</body>
|
||||
<script>
|
||||
$(document).on('click', '.panel-heading span.clickable', function(e){
|
||||
var $this = $(this);
|
||||
if(!$this.hasClass('panel-collapsed')) {
|
||||
$this.parents('.panel').find('.panel-body').slideUp();
|
||||
$this.addClass('panel-collapsed');
|
||||
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
|
||||
} else {
|
||||
$this.parents('.panel').find('.panel-body').slideDown();
|
||||
$this.removeClass('panel-collapsed');
|
||||
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
<?php
|
||||
showLapTime("End of Page");
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<?php
|
||||
define("VERSION", "20170228-1");
|
||||
define("VERSION", "20170302-1");
|
||||
?>
|
||||
|
|
Loading…
Reference in a new issue