WIP #541 @5

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 26b626eccb6ac1ce9ac16fac1175d443ee4c2fc4..0131406545c7cc3ab547ea6096f1dffdfcfaea64 100644 (file)
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -17,8 +17,11 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
             // Text colour is based on whether block has a gradient or not
             $text_colour = $this->hasGradient($block) ? 'light' : 'dark';
+            
+            // Get layout settings for cement.js
+            $layout_data = $this->_layoutData($block['layout']);
 
-            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'">';
+            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'" '. $layout_data .'>';
 
             $res .= $this->_CSS($id, $block);
 
@@ -52,6 +55,33 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         return is_array($block['background_image']);
     }
 
+    protected function _layoutData($layout) {
+        
+        switch($layout) {
+            case 'square-top':
+            case 'square-bottom':
+                $w = 2;
+                $h = 2;
+                break;
+            case 'rectangle-right':
+            case 'rectangle-bottom':
+                $w = 3;
+                $h = 2;
+                break;
+            case 'small-rectangle-tall':
+                $w = 1;
+                $h = 2;
+                break;
+            case 'small-rectangle-wide':
+                $w = 2;
+                $h = 1;
+        }
+        
+        if (!$w || !$h) return '';
+
+        return 'data-w="'. $w .'" data-h="'. $h .'"';
+    }
+
     protected function _CSS($id, $block) {
 
         $gradient = $block['background_gradient'];

diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index 30eb05bd346f67659429b4990518b7af24178ff1..a433829929c3f8a7255ad7827634c81bbe8ed7ef 100644 (file)
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,5 +1,6 @@
 <?php\r
 \r
+$this->headScript()->addScriptAndStyle('411-cement');\r
 $this->headScript()->addScriptAndStyle('410-features');\r
 \r
 $res  = $this->introBlock($this->intro, '');\r

diff --git a/js/410-features.js b/js/410-features.js
index b7cd13bb5ed81b78d49c614e385622456a0dd20f..d10890186e2b56cf9ae57e69d6ef44f6eb391fee 100644 (file)
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -2,11 +2,11 @@ registerLoader(load_features);
 
 function load_features() {
 
-    $(".feature-blocks").masonry({
-        itemSelector: ".feature-block",
-        //fitWidth: true,
-        columnWidth: ".small-rectangle-tall",
-        transitionDuration: 0,
+    $('.feature-blocks').cement({
+        columns: 6,
+        columnMinWidth: 200,
+        horizontalGutter: 0,
+        verticalGutter: 0
     });
 
 }
\ No newline at end of file

diff --git a/less/410-features.less b/less/410-features.less
index 86513bd10f8ec4bc1aebd480777bb3f284f068be..16bc545faaec88bd5ea2cd49519ad8f2975572ac 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -44,6 +44,8 @@
 .feature-inner {
   position: absolute;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   padding: 30px;
   line-height: (22/14);