From: vincent@cubedesigners.com <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 7 Sep 2016 09:53:00 +0000 (+0000)
Subject: #681 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d812b4ef980e2d4bebc25c2fd01706aa6bf7fc03;p=fluidbook-v3.git

#681 @1
---

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 9024b9a..e4e37cb 100644
--- 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 133d373..b151db4 100644
--- 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 31ce552..f6c01e1 100644
--- 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