WIP #541 @6.5

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 0131406545c7cc3ab547ea6096f1dffdfcfaea64..3025b7ec0600f8687ed133521951991ccaceae69 100644 (file)
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -18,10 +18,7 @@ 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 .'" '. $layout_data .'>';
+            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'">';
 
             $res .= $this->_CSS($id, $block);
 
@@ -84,7 +81,10 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
     protected function _CSS($id, $block) {
 
-        $gradient = $block['background_gradient'];
+        // Set the width background images should disappear and be replaced by CSS gradients
+        // This should match the setting at the top of "410-features.less"
+        $breakpoint_single_column = '767px';
+
         $res  = '<style scoped>';
 
         $res .= "#$id {";
@@ -99,16 +99,17 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         
         $res .= '}';
 
-        // Mobile version - swap background images for a gradient / solid colour
-        // Todo: consider using breakpoints instead of relying on .m class (to be decided depending on how other breakpoints are handled)
-        $res .= ".m #$id {";
+        // 1 column version - swap background images for a gradient / solid colour
+        $res .= "@media screen and (max-width: $breakpoint_single_column) {";
+            $res .= "#$id {";
 
-        if ($this->hasGradient($block)) {
-            $res .= $this->_gradient($block);
-        } else {
-            $res .= 'background-image: none;';
-        }
+            if ($this->hasGradient($block)) {
+                $res .= $this->_gradient($block);
+            } else {
+                $res .= 'background-image: none;';
+            }
 
+            $res .= '}';
         $res .= '}';
         $res .= '</style>';
 

diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index a433829929c3f8a7255ad7827634c81bbe8ed7ef..30eb05bd346f67659429b4990518b7af24178ff1 100644 (file)
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,6 +1,5 @@
 <?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 d10890186e2b56cf9ae57e69d6ef44f6eb391fee..94d79b8ad575802c149424095a213d17a233564f 100644 (file)
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -2,11 +2,18 @@ registerLoader(load_features);
 
 function load_features() {
 
-    $('.feature-blocks').cement({
-        columns: 6,
-        columnMinWidth: 200,
-        horizontalGutter: 0,
-        verticalGutter: 0
+    $(".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 16bc545faaec88bd5ea2cd49519ad8f2975572ac..5c328f63cedbe2e3c00fcb7be08bfeb84b2a52cb 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -1,5 +1,9 @@
 @import "000-imports";
 
+// Specific breakpoints for feature blocks
+@f2cols: ~"(max-width: 1350px)";
+@f1col: ~"(max-width: 767px)"; // Note: the same value should also be set in FeaturesSection.php for the _CSS() function
+
 .feature-blocks {
   width: 100%;
 }
@@ -11,13 +15,34 @@
   background-size: 100%;
   color: @color-text;
 
+  @media @f1col {
+    width: 100% !important;
+    padding-bottom: 0 !important;
+    .feature-inner {
+      position: static;
+    }
+  }
+
   // Block layouts
   &.rectangle-right, &.rectangle-bottom {
     width: percentage(3/6);
     padding-bottom: percentage(2/6); // 3:2 aspect ratio
+
+    @media @f2cols {
+      width: percentage(1/2);
+      padding-bottom: percentage(1/2);
+    }
   }
   &.rectangle-right {
-    background-position: center right;
+    background-position: bottom right;
+
+    @media @f2cols {
+      background-size: 120%;
+
+      .feature-text {
+        width: 100%;
+      }
+    }
   }
   &.rectangle-bottom, &.square-bottom {
     background-position: center bottom;
@@ -26,6 +51,11 @@
   &.square-top, &.square-bottom {
     width: percentage(2/6);
     padding-bottom: percentage(2/6); // 1:1 aspect ratio
+
+    @media @f2cols {
+      width: percentage(1/2);
+      padding-bottom: percentage(1/2);
+    }
   }
   &.square-top {
     background-position: center top;
@@ -34,10 +64,24 @@
   &.small-rectangle-tall {
     width: percentage(1/6);
     padding-bottom: percentage(2/6); // 1:2 aspect ratio
+
+    @media @f2cols {
+      width: percentage(1/2);
+      padding-bottom: percentage(1/4);
+
+      .feature-icon {
+        float: left;
+      }
+    }
   }
   &.small-rectangle-wide {
     width: percentage(2/6);
     padding-bottom: percentage(1/6); // 2:1 aspect ratio
+
+    @media @f2cols {
+      width: percentage(1/2);
+      padding-bottom: percentage(1/4);
+    }
   }
 }
 
@@ -49,6 +93,14 @@
   left: 0;
   padding: 30px;
   line-height: (22/14);
+
+  @media @f2cols {
+    padding: 20px;
+  }
+
+  @media @f1col {
+    padding: 30px;
+  }
 }
 
 .feature-icon {
@@ -57,6 +109,14 @@
   margin-bottom: 30px;
   margin-right: 30px;
 
+  @media @f2cols {
+    margin-right: 20px;
+  }
+
+  @media @f1col {
+    float: none !important;
+  }
+
   .small-rectangle-wide & {
     float: left;
   }
@@ -67,12 +127,20 @@
   .square-top &,
   .square-bottom & {
     display: none;
+
+    @media @f1col {
+      display: block;
+    }
   }
 }
 
 .feature-text {
   overflow: hidden;
 
+  @media @f1col {
+    font-size: 14px;
+  }
+
   .rectangle-right & {
     width: 30%;
   }
@@ -80,6 +148,15 @@
   .square-top & {
     margin-top: 50%;
     padding-top: 30px;
+
+    @media @f2cols {
+      padding-top: 20px;
+    }
+
+    @media @f1col {
+      margin-top: 0;
+      padding-top: 0;
+    }
   }
 }