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

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

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="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>