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

Redo console HTML to be organized by flexbox, not bootstrap grid 

Utilizing css3 flexbox, I'm able to easily lay out all monitors
with equal width and height, while not having to worry about parent
.row <div>'s
This commit is contained in:
Kyle Johnson 2014-11-28 16:56:22 +00:00
parent 8b7733cd37
commit 682190c186
2 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/skins/bootstrap/css/skin.css
View File

@ -399,3 +399,19 @@ th.table-th-sort-rev span.table-th-sort-span {
width: 100%;
background-color: #F5F5F5;
}
/*On the flex container*/
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.monitor {
width: 240px;
height: 240px;
margin: 5px;
}

53
web/skins/bootstrap/views/console.php
View File

@ -1,43 +1,32 @@
<?php xhtmlHeaders( __FILE__, $SLANG['Console'] ); ?>
<body>
<?php include("header.php"); ?>
<?php include("header.php"); ?>
<form name="monitorForm" method="get" action="<?= $_SERVER['PHP_SELF'] ?>">
<input type="hidden" name="view" value="<?= $view ?>"/>
<input type="hidden" name="action" value=""/>
<div id="content" class="container-fluid">
<div class="row">
<div class="col-md-2"><?php include("sidebar.php"); ?></div>
<div class="col-md-10">
<div ng-controller="ConsoleController">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" ng-repeat="monitor in monitors">
<div class="panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
<div class="panel-heading">
<a ng-hide="(monitor.alerts.zmc || monitor.alerts.zma)" class="pull-right" href="#" tooltip="{{ monitor.alert }}"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span></a>
<h2 class="text-left panel-title">{{ monitor.Name }} <small>({{monitor.Id}})</small></h2>
</div>
<div class="panel-body center-block">
<img class="img-responsive img-rounded" ng-src="/cgi-bin/nph-zms?mode=single&monitor={{monitor.Id}}&scale=50" />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"><?php include("sidebar.php"); ?></div>
<div class="col-md-10">
<div ng-controller="ConsoleController" class="flexcontainer">
<div ng-repeat="monitor in monitors" class="monitor panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
<div class="panel-heading">
<a ng-hide="(monitor.alerts.zmc || monitor.alerts.zma)" class="pull-right" href="#" tooltip="{{ monitor.alert }}">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
</a>
<h2 class="text-left panel-title">{{ monitor.Name }} <small>({{monitor.Id}})</small></h2>
</div> <!-- End .panel-heading -->
<div class="panel-body center-block">
<img class="img-responsive img-rounded" ng-src="/cgi-bin/nph-zms?mode=single&monitor={{monitor.Id}}&scale=50" />
</div> <!-- End .panel-body -->
</div> <!-- End .monitor -->
</div> <!-- End ConsoleController -->
</div> <!-- End .col-md-10 -->
</div> <!-- End .row -->
</div> <!-- End #content .container-fluid -->
</form>
<?php include("footer.php"); ?>
</div> <!-- End .row -->
</div> <!-- .container-fluid -->
<?php include("footer.php"); ?>
</body>
</html>