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:
parent
8b7733cd37
commit
682190c186
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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="col-md-2"><?php include("sidebar.php"); ?></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-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>
|
||||
|
|
Loading…
Reference in New Issue