Use css float, width and margin to position the monitors in the index view.

This commit is contained in:
Kyle Johnson 2013-09-27 08:40:52 -04:00
parent 6e06a35982
commit 8dc161d47a
3 changed files with 6 additions and 2 deletions

View File

@ -34,6 +34,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
echo $this->Html->css('colorbox'); echo $this->Html->css('colorbox');
echo $this->Html->css('bootstrap-theme.min'); echo $this->Html->css('bootstrap-theme.min');
echo $this->Html->css('bootstrap.min'); echo $this->Html->css('bootstrap.min');
echo $this->Html->css('main');
echo $this->fetch('meta'); echo $this->fetch('meta');
echo $this->fetch('css'); echo $this->fetch('css');

View File

@ -4,9 +4,9 @@
$this->end(); $this->end();
?> ?>
<div id="monitors" class="js-masonry" data-masonry-options='{ "gutter": 10, "itemSelector": ".monitor" }'> <div id="monitors">
<?php foreach ($monitors as $monitor => $mon): ?> <?php foreach ($monitors as $monitor => $mon): ?>
<div class="panel panel-default monitor" id="Monitor_<?= $mon['Monitor']['Id']; ?>" style="width:<?php $mon['img']['width'];?>"> <div class="panel panel-default monitor pull-left" id="Monitor_<?= $mon['Monitor']['Id']; ?>" style="width:<?php echo Configure::read('ZM_WEB_LIST_THUMB_WIDTH'); ?>px;">
<div class="panel-heading"> <div class="panel-heading">
<h4><?php echo $this->Html->link($mon['Monitor']['Name'],array('controller' => 'monitors', 'action' => 'view', $mon['Monitor']['Id'])); ?></h4> <h4><?php echo $this->Html->link($mon['Monitor']['Name'],array('controller' => 'monitors', 'action' => 'view', $mon['Monitor']['Id'])); ?></h4>
</div> </div>

View File

@ -0,0 +1,3 @@
.monitor{
margin: 5px;
}