From 00aaba97430d5dfef55c829b6894a1c2e444d0b7 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 2 Sep 2016 13:59:17 +0000
Subject: [PATCH] Fix #591 @2.5

---
 .../application/views/helpers/IntroBlock.php  |  6 +++-
 .../scripts/templates/fonctionnalites.phtml   | 13 +++++++--
 js/410-features.js                            | 22 +++++++++-----
 less/410-features.less                        | 29 +++++++++++++++++--
 4 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php
index 8a99a6d..519aa99 100644
--- a/framework/application/views/helpers/IntroBlock.php
+++ b/framework/application/views/helpers/IntroBlock.php
@@ -2,7 +2,7 @@
 
 class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract {
 
-	public function introBlock($intro, $additionnalContent = '') {
+	public function introBlock($intro, $additionnalContent = '', $outsideContent = '') {
 		$this->addScriptAndStyle('102-intro');
 
 		$res = '<div class="grid">';
@@ -17,6 +17,10 @@ class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract {
 		$res .= '</div>'; // .col-2
 		$res .= '</div>'; // .grid
 
+        if ($outsideContent) {
+            $res .= $outsideContent;
+        }
+
 		$res = $this->backgroundBlock($res, $intro);
 
 		if ($intro['chapo']) {
diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index 572fd0e..af6cd7c 100644
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -3,13 +3,22 @@
 $this->headScript()->addFeatherlight();
 $this->headScript()->addScriptAndStyle('410-features');
 
+$playButton = '<svg class="play-btn" preserveAspectRatio= "xMidYMid meet" viewBox="0 0 80 80">
+                <circle class="fill" stroke=none cx="40" cy="40" r="37.5" />
+                <polygon class="triangle" stroke=none points="28,20.4 62,40 28,59.6" />
+              </svg>';
+$playButtonLink = $this->link($playButton, '#', [
+                                'class' => 'features-video',
+                                'data-featherlight' => '#introVideo',
+                                'data-featherlight-after-open' => 'playVideo()'
+                            ]);
+
 $extraContent  = $this->linkTruePopupFullscreen($this->intro['button']['label'], $this->intro['button']['url'], ['class' => 'features-video-button']);
-$extraContent .= $this->link('', '#', ['class' => 'features-video', 'data-featherlight' => '#introVideo', 'data-featherlight-after-open' => 'playVideo()']);
 $extraContent .= '<div class="lightbox" id="introVideo">';
 $extraContent .= $this->videoWeb($this->video);
 $extraContent .= '</div>'; // .lightbox
 
-$res  = $this->introBlock($this->intro, $extraContent);
+$res  = $this->introBlock($this->intro, $extraContent, $playButtonLink);
 
 $res .= $this->featuresSection($this->features_title, $this->features);
 $res .= $this->featuresSection($this->services_title, $this->services);
diff --git a/js/410-features.js b/js/410-features.js
index 1721ea1..8b102a9 100644
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -14,6 +14,11 @@ function load_features() {
 function resizeFeaturePage() {
     resizeFeatureBlocks();
     resizeFeatureVideoLink();
+
+    // Sometimes the position of the video link isn't correct due to
+    // the responsive image so we can call the function again as a
+    // fallback in case it was out of place in the previous call
+    setTimeout(resizeFeatureVideoLink, 250);
 }
 
 // Link that overlays the background image to trigger the video
@@ -24,11 +29,11 @@ function resizeFeatureVideoLink() {
     var container = $('.intro .content-wrapper'),
         bgRatio = container.data('bg-ratio'),
         multiplier = ($(window).width() <= 900) ? 1.8 : 1, // Background is zoomed below 900px (see 102-intro.less)
-        bgHeight = Math.round(container.width() * bgRatio * multiplier);
+        bgHeight = $('.intro .picture img').height();
 
     $('.features-video').css({
-        bottom: bgHeight * 0.27,
-        height: bgHeight * 0.58
+        bottom: bgHeight * 0.286,
+        height: bgHeight * 0.52
     });
 }
 
@@ -38,12 +43,13 @@ function resizeFeatureVideoLink() {
 // Masonry from having gaps and mis-aligned items
 function resizeFeatureBlocks() {
 
-    try{
-        $(".feature-blocks").masonry('destroy');
-    }catch (err){
+    var container = $('.feature-blocks');
 
+    if (container.masonry()) {
+        container.masonry('destroy');
     }
-    $(".feature-blocks").masonry({
+
+    container.masonry({
         itemSelector: ".feature-block",
         columnWidth: ".small-rectangle-tall",
         transitionDuration: 0,
@@ -62,7 +68,7 @@ function resizeFeatureBlocks() {
     // Make sure width is a round number that can be divided by the number of columns
     containerWidth = Math.floor($('main').width() * 0.9 / cols) * cols;
 
-    $('.feature-blocks').width(containerWidth);
+    container.width(containerWidth);
 }
 
 // Switch the video URL to autoplay so the video starts playing...
diff --git a/less/410-features.less b/less/410-features.less
index 6842764..31ce552 100644
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -74,9 +74,16 @@
   position: absolute;
   //background: rgba(255,255,0,.5); // Highlight mode! (for testing)
   width: 45%;
-  height: 58%; // Initial value - will be updated by JS
+  height: 52%; // Initial value - will be updated by JS
   right: 5%;
-  bottom: 27%; // Initial value - will be updated by JS
+  bottom: 28.6%; // Initial value - will be updated by JS
+  z-index: 10;
+
+  &:hover {
+    .play-btn .fill {
+      fill: #53bde7;
+    }
+  }
 
   @media @m900 {
     width: 81%;
@@ -84,6 +91,24 @@
   }
 }
 
+.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;
+  }
+}
+
 .feature-blocks {
   width: 100%;
 }
-- 
2.39.5