#681 @1

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 9024b9a771bee557448e6f7340c6cd5eaa3da6d9..e4e37cb8608df2da16f210bfd7d5446442c0d31e 100644 (file)
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -81,12 +81,7 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
        }
 
        protected function _CSS($id, $block) {
-
-               // 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 = '<style type="text/css">';
 
                $res .= "#$id {";
                $res .= $this->_backgroundColour($block);
@@ -101,8 +96,7 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
                $res .= '}';
 
                // 1 column version - swap background images for a gradient / solid colour
-               $res .= "@media screen and (max-width: $breakpoint_single_column) {";
-               $res .= "#$id {";
+               $res .= '[data-cols="1"] #' . $id . ' {';
 
                if ($this->hasGradient($block)) {
                        $res .= $this->_gradient($block);
@@ -110,7 +104,6 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
                        $res .= 'background-image: none;';
                }
 
-               $res .= '}';
                $res .= '}';
                $res .= '</style>';
 

diff --git a/js/410-features.js b/js/410-features.js
index 133d373d26d657844ee61dc0233a18985d1e8dd3..b151db430da221d43b153d291afa11fd7059de13 100644 (file)
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -5,7 +5,7 @@ function load_features() {
     $(window).on('fluidbookresize', resizeFeaturePage);
     resizeFeaturePage();
 
-    $(window).on('cubeitopenpopup', function() {
+    $(window).on('cubeitopenpopup', function () {
         cubeitresize(); // Needed so video is sized correctly in popup
     });
 
@@ -49,8 +49,6 @@ function resizeFeatureBlocks() {
         container.masonry('destroy');
     }
 
-
-
     // Container width is 90% of the window
     var ww = $(window).width(),
         break2cols = 1350,
@@ -65,7 +63,8 @@ function resizeFeatureBlocks() {
     containerWidth = Math.floor($('main').width() * 0.9 / cols) * cols;
 
     container.width(containerWidth);
-
+    container.attr('data-cols', cols);
+    
     container.masonry({
         itemSelector: ".feature-block",
         columnWidth: ".small-rectangle-tall",
@@ -78,5 +77,5 @@ function resizeFeatureBlocks() {
 function playVideo() {
     var video = $('.featherlight #introVideo iframe');
 
-    video[0].src = video[0].src.replace('autoplay=0','autoplay=1');
+    video[0].src = video[0].src.replace('autoplay=0', 'autoplay=1');
 }
\ No newline at end of file

diff --git a/less/410-features.less b/less/410-features.less
index 31ce55212bac0616a82f5e1c3d59bde9334c03e5..f6c01e19db357e70119615363e22bd43bdae4998 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -5,280 +5,280 @@
 @f1col: ~"(max-width: 767px)"; // Note: the same value should also be set in FeaturesSection.php for the _CSS() function
 
 .fonctionnalites {
-  .intro {
-    position: relative;
+       .intro {
+               position: relative;
 
-    .dotclear p {
-      padding-right: 15px;
+               .dotclear p {
+                       padding-right: 15px;
 
-      @media @m900 {
-        padding-right: 0;
-      }
-    }
-  }
+                       @media @m900 {
+                               padding-right: 0;
+                       }
+               }
+       }
 }
 
 .features-video-button {
-  .button();
-  .background-button-blue();
-  .font-thinning();
-  .longarrow-button(16px, 40px, 18px);
-  margin-top: 50px;
+       .button();
+       .background-button-blue();
+       .font-thinning();
+       .longarrow-button(16px, 40px, 18px);
+       margin-top: 50px;
 }
 
 // Featherlight modifications to make responsive iframes work
 .featherlight-iframe {
-  &:before {
-    display: none; // This element doesn't seem necessary and really messes up the display
-  }
-
-  .featherlight-content {
-    display: block; // Normally it is set to inline-block but then the iframe can't be scaled by percentage
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    overflow: visible; // So close icon can sit outside the box
-    padding: 0 !important;
-    margin: 0 5% !important;
-    border: none !important;
-  }
-
-  .featherlight-close-icon {
-    background-color: transparent;
-    color: #fff;
-    font-size: 20px;
-    top: -27px;
-    right: -4px;
-  }
+       &:before {
+               display: none; // This element doesn't seem necessary and really messes up the display
+       }
+
+       .featherlight-content {
+               display: block; // Normally it is set to inline-block but then the iframe can't be scaled by percentage
+               position: absolute;
+               left: 0;
+               right: 0;
+               top: 50%;
+               transform: translateY(-50%);
+               overflow: visible; // So close icon can sit outside the box
+               padding: 0 !important;
+               margin: 0 5% !important;
+               border: none !important;
+       }
+
+       .featherlight-close-icon {
+               background-color: transparent;
+               color: #fff;
+               font-size: 20px;
+               top: -27px;
+               right: -4px;
+       }
 }
 
 // Lightbox for the video with intrinsic ratio
 .lightbox {
-  display: none;
-  position: relative;
-  padding-bottom: percentage(9/16); // 16:9 aspect ratio
-
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+       display: none;
+       position: relative;
+       padding-bottom: percentage(9/16); // 16:9 aspect ratio
+
+       iframe {
+               position: absolute;
+               top: 0;
+               left: 0;
+               width: 100%;
+               height: 100%;
+       }
 }
 
 .features-video {
-  display: block;
-  position: absolute;
-  //background: rgba(255,255,0,.5); // Highlight mode! (for testing)
-  width: 45%;
-  height: 52%; // Initial value - will be updated by JS
-  right: 5%;
-  bottom: 28.6%; // Initial value - will be updated by JS
-  z-index: 10;
-
-  &:hover {
-    .play-btn .fill {
-      fill: #53bde7;
-    }
-  }
-
-  @media @m900 {
-    width: 81%;
-    right: 9%;
-  }
+       display: block;
+       position: absolute;
+       //background: rgba(255,255,0,.5); // Highlight mode! (for testing)
+       width: 45%;
+       height: 52%; // Initial value - will be updated by JS
+       right: 5%;
+       bottom: 28.6%; // Initial value - will be updated by JS
+       z-index: 10;
+
+       &:hover {
+               .play-btn .fill {
+                       fill: #53bde7;
+               }
+       }
+
+       @media @m900 {
+               width: 81%;
+               right: 9%;
+       }
 }
 
 .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  width: 18%;
-  height: auto;
-
-  .fill {
-    transition: fill 0.3s ease;
-    opacity: 0.9;
-    fill: #3c9fd6;
-  }
-  .triangle {
-    fill: #fff;
-  }
+       position: absolute;
+       top: 50%;
+       left: 50%;
+       transform: translateY(-50%) translateX(-50%);
+       width: 18%;
+       height: auto;
+
+       .fill {
+               transition: fill 0.3s ease;
+               opacity: 0.9;
+               fill: #3c9fd6;
+       }
+       .triangle {
+               fill: #fff;
+       }
 }
 
 .feature-blocks {
-  width: 100%;
+       width: 100%;
 }
 
 .feature-block {
-  position: relative;
-  overflow: hidden;
-  background-repeat: no-repeat;
-  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: bottom right;
-
-    @media @f2cols {
-      background-size: 120%;
-
-      .feature-text {
-        width: 100%;
-      }
-    }
-
-    @media @m1024 {
-      background-size: 105%;
-    }
-  }
-  &.rectangle-bottom, &.square-bottom {
-    background-position: center bottom;
-  }
-
-  &.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;
-  }
-
-  &.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);
-    }
-  }
+       position: relative;
+       overflow: hidden;
+       background-repeat: no-repeat;
+       background-size: 100%;
+       color: @color-text;
+
+       [data-cols="1"] & {
+               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
+
+               [data-cols="2"] & {
+                       width: percentage(1/2);
+                       padding-bottom: percentage(1/2);
+               }
+       }
+       &.rectangle-right {
+               background-position: bottom right;
+
+               [data-cols="2"] & {
+                       background-size: 120%;
+
+                       .feature-text {
+                               width: 100%;
+                       }
+               }
+
+               @media @m1024 {
+                       background-size: 105%;
+               }
+       }
+       &.rectangle-bottom, &.square-bottom {
+               background-position: center bottom;
+       }
+
+       &.square-top, &.square-bottom {
+               width: percentage(2/6);
+               padding-bottom: percentage(2/6); // 1:1 aspect ratio
+
+               [data-cols="2"] & {
+                       width: percentage(1/2);
+                       padding-bottom: percentage(1/2);
+               }
+       }
+       &.square-top {
+               background-position: center top;
+       }
+
+       &.small-rectangle-tall {
+               width: percentage(1/6);
+               padding-bottom: percentage(2/6); // 1:2 aspect ratio
+
+               [data-cols="2"] & {
+                       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
+
+               [data-cols="2"] & {
+                       width: percentage(1/2);
+                       padding-bottom: percentage(1/4);
+               }
+       }
 }
 
 .feature-inner {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 30px;
-  line-height: (22/14);
-
-  @media @f2cols {
-    padding: 20px;
-  }
-
-  @media @f1col {
-    padding: 30px;
-  }
+       position: absolute;
+       top: 0;
+       right: 0;
+       bottom: 0;
+       left: 0;
+       padding: 30px;
+       line-height: (22/14);
+
+       [data-cols="2"] & {
+               padding: 20px;
+       }
+
+       [data-cols="1"] & {
+               padding: 30px;
+       }
 }
 
 .feature-icon {
-  font-size: 65px;
-  line-height: 49px;
-  margin-bottom: 30px;
-  margin-right: 30px;
-
-  @media @f2cols {
-    margin-right: 20px;
-  }
-
-  @media @f1col {
-    float: none !important;
-  }
-
-  .small-rectangle-wide & {
-    float: left;
-  }
-
-  // Hide icon for these views by default
-  .rectangle-right &,
-  .rectangle-bottom &,
-  .square-top &,
-  .square-bottom & {
-    display: none;
-
-    @media @f1col {
-      display: block;
-    }
-  }
+       font-size: 65px;
+       line-height: 49px;
+       margin-bottom: 30px;
+       margin-right: 30px;
+
+       [data-cols="2"] & {
+               margin-right: 20px;
+       }
+
+       [data-cols="1"] & {
+               float: none !important;
+       }
+
+       .small-rectangle-wide & {
+               float: left;
+       }
+
+       // Hide icon for these views by default
+       .rectangle-right &,
+       .rectangle-bottom &,
+       .square-top &,
+       .square-bottom & {
+               display: none;
+
+               [data-cols="1"] & {
+                       display: block;
+               }
+       }
 }
 
 .feature-text {
-  overflow: hidden;
+       overflow: hidden;
 
-  @media @f1col {
-    font-size: 14px;
-  }
+       [data-cols="1"] & {
+               font-size: 14px;
+       }
 
-  .rectangle-right & {
-    width: 30%;
-  }
+       .rectangle-right & {
+               width: 30%;
+       }
 
-  .square-top & {
-    margin-top: 50%;
-    padding-top: 30px;
+       .square-top & {
+               margin-top: 50%;
+               padding-top: 30px;
 
-    @media @f2cols {
-      padding-top: 20px;
-    }
+               [data-cols="2"] & {
+                       padding-top: 20px;
+               }
 
-    @media @f1col {
-      margin-top: 0;
-      padding-top: 0;
-    }
-  }
+               [data-cols="1"] & {
+                       margin-top: 0;
+                       padding-top: 0;
+               }
+       }
 }
 
 .feature-title {
-  font-family: @montserrat;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1;
-  margin-bottom: 15px;
-  text-transform: uppercase;
+       font-family: @montserrat;
+       font-size: 15px;
+       font-weight: 600;
+       line-height: 1;
+       margin-bottom: 15px;
+       text-transform: uppercase;
 }
 
 .text-light {
-  .font-thinning();
-  color: #fff;
+       .font-thinning();
+       color: #fff;
 }
\ No newline at end of file