Fix #591 @2.5

diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php
index 8a99a6dbef813be493ba1f4d1669c3ec86b94268..519aa9911e0f8d712b49d6907484e37569208bcf 100644 (file)
--- 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 572fd0e32283fbd658363d73d377cab28a2058ca..af6cd7c9f0a413d84ae0e62fbaaa2340959212c8 100644 (file)
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -3,13 +3,22 @@
 $this->headScript()->addFeatherlight();\r
 $this->headScript()->addScriptAndStyle('410-features');\r
 \r
+$playButton = '<svg class="play-btn" preserveAspectRatio= "xMidYMid meet" viewBox="0 0 80 80">\r
+                <circle class="fill" stroke=none cx="40" cy="40" r="37.5" />\r
+                <polygon class="triangle" stroke=none points="28,20.4 62,40 28,59.6" />\r
+              </svg>';\r
+$playButtonLink = $this->link($playButton, '#', [\r
+                                'class' => 'features-video',\r
+                                'data-featherlight' => '#introVideo',\r
+                                'data-featherlight-after-open' => 'playVideo()'\r
+                            ]);\r
+\r
 $extraContent  = $this->linkTruePopupFullscreen($this->intro['button']['label'], $this->intro['button']['url'], ['class' => 'features-video-button']);\r
-$extraContent .= $this->link('', '#', ['class' => 'features-video', 'data-featherlight' => '#introVideo', 'data-featherlight-after-open' => 'playVideo()']);\r
 $extraContent .= '<div class="lightbox" id="introVideo">';\r
 $extraContent .= $this->videoWeb($this->video);\r
 $extraContent .= '</div>'; // .lightbox\r
 \r
-$res  = $this->introBlock($this->intro, $extraContent);\r
+$res  = $this->introBlock($this->intro, $extraContent, $playButtonLink);\r
 \r
 $res .= $this->featuresSection($this->features_title, $this->features);\r
 $res .= $this->featuresSection($this->services_title, $this->services);\r

diff --git a/js/410-features.js b/js/410-features.js
index 1721ea1c42398620bb5f3cdf07baec20b91e074a..8b102a9b053c69369f197841c87f9e1ec59795df 100644 (file)
--- 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 68427643abb02baecfb3d6be70f98624a839f921..31ce55212bac0616a82f5e1c3d59bde9334c03e5 100644 (file)
--- 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%;
 }