make all infobox panels collapsible

This commit is contained in:
dg9vh 2017-03-02 15:56:46 +00:00
parent 61df68a098
commit 2008af9a68
11 changed files with 51 additions and 10 deletions

7
css/style.css Normal file
View file

@ -0,0 +1,7 @@
.clickable{
cursor: pointer;
}
.panel-heading span {
font-size: 15px;
}

View file

@ -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>

View file

@ -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(){

View file

@ -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(){

View file

@ -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>

View file

@ -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>

View file

@ -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() {

View file

@ -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;

View file

@ -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(){

View file

@ -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");

View file

@ -1,3 +1,3 @@
<?php
define("VERSION", "20170228-1");
define("VERSION", "20170302-1");
?>