From e58912dca8da00354f6e8c7ba25f73b8d62ba20d Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 12 Jul 2016 16:44:38 +0000 Subject: [PATCH] WIP #541 @6.5 --- .../views/helpers/FeaturesSection.php | 27 ++++--- .../scripts/templates/fonctionnalites.phtml | 1 - js/410-features.js | 17 ++-- less/410-features.less | 79 ++++++++++++++++++- 4 files changed, 104 insertions(+), 20 deletions(-) diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php index 0131406..3025b7e 100644 --- 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 .= '
'; + $res .= '
'; $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 = ''; diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml index a433829..30eb05b 100644 --- a/framework/application/views/scripts/templates/fonctionnalites.phtml +++ b/framework/application/views/scripts/templates/fonctionnalites.phtml @@ -1,6 +1,5 @@ headScript()->addScriptAndStyle('411-cement'); $this->headScript()->addScriptAndStyle('410-features'); $res = $this->introBlock($this->intro, ''); diff --git a/js/410-features.js b/js/410-features.js index d108901..94d79b8 100644 --- 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 16bc545..5c328f6 100644 --- 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; + } } } -- 2.39.5