From 5e9027c363341dd70e1ca437659a878aebd7e93b Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 6 Jul 2016 16:18:41 +0000
Subject: [PATCH] Content and styling. WIP #488 @6.25

---
 .../views/helpers/FeaturesSection.php         | 24 +++++--
 .../scripts/templates/fonctionnalites.phtml   |  2 +
 js/410-features.js                            | 12 ++++
 less/410-features.less                        | 71 +++++++++++++++++++
 4 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 js/410-features.js
 create mode 100644 less/410-features.less

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 8666576..01e8bbd 100644
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -4,6 +4,8 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
     public function featuresSection($title, $blocks) {
 
+        $this->headScript()->addMasonry()->addJQueryTransform();
+
         $res  = '<div class="content-wrapper grid wrap">';
         $res .= '<h1 class="title col-6">' . nl2br($title) . '</h1>';
         $res .= '<div class="feature-blocks">';
@@ -11,11 +13,22 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         foreach ($blocks as $block) {
 
             $gradient = $this->_gradient($block['background_gradient']);
+            $background_colour = empty($block['background_gradient']['color1']) ? '' : 'background-color: '. $block['background_gradient']['color1'] .';';
             $text_colour = $gradient ? 'light' : 'dark';
 
-            $res .= '<div class="feature-block text-'. $text_colour .'" style="'. $gradient .'">';
-            $res .= '<h4>'. $block['title'] .'</h4>';
+            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" style="'. $background_colour . $gradient .'">';
+            $res .= '<div class="feature-inner">';
+
+            if (is_array($block['icon'])) {
+                $res .= $this->imageCms($block['icon'], '', null, null, ['class' => 'feature-icon']);
+            }
+
+            $res .= '<div class="feature-text">';
+            $res .= '<h4 class="feature-title">'. $block['title'] .'</h4>';
             $res .= $this->markupDotclear($block['content']);
+            $res .= '</div>'; // .feature-text
+            
+            $res .= '</div>'; // .feature-inner
             $res .= '</div>'; // .feature-block
         }
 
@@ -35,10 +48,9 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         $c1 = $gradient['color1'];
         $c2 = $gradient['color2'];
 
-        return "background: $c1;
-background: -moz-linear-gradient($angle, $c1 0%, $c2 100%);
-background: -webkit-linear-gradient($angle, $c1 0%, $c2 100%);
-background: linear-gradient($angle, $c1 0%, $c2 100%);
+        return "background-image: -moz-linear-gradient($angle, $c1 0%, $c2 100%);
+background-image: -webkit-linear-gradient($angle, $c1 0%, $c2 100%);
+background-image: linear-gradient($angle, $c1 0%, $c2 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$c1', endColorstr='$c2',GradientType=1);";
     }
 
diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index 13f1e66..30eb05b 100644
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,5 +1,7 @@
 <?php
 
+$this->headScript()->addScriptAndStyle('410-features');
+
 $res  = $this->introBlock($this->intro, '');
 
 $res .= $this->featuresSection($this->features_title, $this->features);
diff --git a/js/410-features.js b/js/410-features.js
new file mode 100644
index 0000000..b7cd13b
--- /dev/null
+++ b/js/410-features.js
@@ -0,0 +1,12 @@
+registerLoader(load_features);
+
+function load_features() {
+
+    $(".feature-blocks").masonry({
+        itemSelector: ".feature-block",
+        //fitWidth: true,
+        columnWidth: ".small-rectangle-tall",
+        transitionDuration: 0,
+    });
+
+}
\ No newline at end of file
diff --git a/less/410-features.less b/less/410-features.less
new file mode 100644
index 0000000..ba6def8
--- /dev/null
+++ b/less/410-features.less
@@ -0,0 +1,71 @@
+@import "000-imports";
+
+.feature-blocks {
+  width: 100%;
+}
+
+.feature-block {
+  position: relative;
+  overflow: hidden;
+
+  // Block layouts
+  &.rectangle-right, &.rectangle-bottom {
+    width: percentage(3/6);
+    padding-bottom: percentage(2/6); // 3:2 aspect ratio
+  }
+  &.square-top, &.square-bottom {
+    width: percentage(2/6);
+    padding-bottom: percentage(2/6); // 1:1 aspect ratio
+  }
+
+  &.small-rectangle-tall {
+    width: percentage(1/6);
+    padding-bottom: percentage(2/6); // 1:2 aspect ratio
+  }
+  &.small-rectangle-wide {
+    width: percentage(2/6);
+    padding-bottom: percentage(1/6); // 2:1 aspect ratio
+  }
+}
+
+.feature-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 30px;
+  line-height: (22/14);
+}
+
+.feature-icon {
+  margin-bottom: 30px;
+  margin-right: 30px;
+
+  .small-rectangle-wide & {
+    float: left;
+  }
+}
+
+.feature-text {
+  .rectangle-right & {
+    width: 30%;
+  }
+
+  .square-top & {
+    margin-top: 50%;
+
+  }
+}
+
+.feature-title {
+  font-family: @montserrat;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+}
+
+.text-light {
+  .font-thinning();
+  color: #fff;
+}
\ No newline at end of file
-- 
2.39.5