Done #571 @5.5

diff --git a/framework/application/controllers/AjaxpopupController.php b/framework/application/controllers/AjaxpopupController.php
index 5a4147a697069db72164d3cd2811d4e7ea8cd5f6..0f3c556152a54e63efe8c3b0bb699231655883a8 100644 (file)
--- a/framework/application/controllers/AjaxpopupController.php
+++ b/framework/application/controllers/AjaxpopupController.php
@@ -8,6 +8,10 @@ class AjaxpopupController extends CubeIT_Controller_AjaxpopupController {
         return $this->view->quoteForm('requestQuotePopup'); // Different ID for popup form so it doesn't conflict with contact page form
     }
 
-}
+    public function video($ID) {
+        $this->setPopupMaxWidth('1440');
+        $this->setPopupWidth('90%');
+        return $this->view->videoWeb($ID, '100%', 'auto', ['autoplay' => 1]);
+    }
 
-?>
+}
\ No newline at end of file

diff --git a/framework/application/forms/CMS/Fonctionnalites.php b/framework/application/forms/CMS/Fonctionnalites.php
index 3451b5ab97c2bf176a2a163f3ac91b651a7fb645..a100ae8285898f7646a19668428ceff24a3f7f22 100644 (file)
--- a/framework/application/forms/CMS/Fonctionnalites.php
+++ b/framework/application/forms/CMS/Fonctionnalites.php
@@ -5,6 +5,14 @@ class Fluidbook_Form_CMS_Fonctionnalites extends Fluidbook_Form_CMS_Base {
     public function init() {\r
         parent::init();\r
 \r
+        $video_button = new Zend_Form_Element_Text('video_button_text');\r
+        $video_button->setLabel('Texte pour bouton vidéo');\r
+        $this->addElement($video_button);\r
+\r
+        $video = new CubeIT_Form_Element_WebVideo('video');\r
+        $video->setLabel('Vidéo');\r
+        $this->addElement($video);\r
+\r
         $features_title = new Zend_Form_Element_Textarea('features_title');\r
         $features_title->setLabel('Titre pour "Fonctionnalités incluses de série"');\r
         $features_title->setAttrib('rows', 3);\r

diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index 30eb05bd346f67659429b4990518b7af24178ff1..df92201ad98513846b4947db0ae9929a8f8a0aab 100644 (file)
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -2,7 +2,12 @@
 \r
 $this->headScript()->addScriptAndStyle('410-features');\r
 \r
-$res  = $this->introBlock($this->intro, '');\r
+$videoLink = '/ajaxpopup/video/'. $this->video;\r
+\r
+$extraContent  = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']);\r
+$extraContent .= $this->linkPopup('', $videoLink, ['class' => 'features-video', 'width' => '1200']);\r
+\r
+$res  = $this->introBlock($this->intro, $extraContent);\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 5b21c7ee2ba936434fdf6e311de09da58933defe..c50f6fca2de9ed1a1cdc280221fe670de3ec921e 100644 (file)
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -1,9 +1,13 @@
-registerLoader(load_features);
+registerLoader(load_features, true);
 
 function load_features() {
 
-    $(window).on('cubeitresize', resizeFeatureBlocks);
-    resizeFeatureBlocks();
+    $(window).on('cubeitresize', resizeFeaturePage);
+    resizeFeaturePage();
+
+    $(window).on('cubeitopenpopup', function() {
+        cubeitresize(); // Needed so video is sized correctly in popup
+    });
 
     $(".feature-blocks").masonry({
         itemSelector: ".feature-block",
@@ -13,6 +17,28 @@ function load_features() {
 
 }
 
+function resizeFeaturePage() {
+    resizeFeatureBlocks();
+    resizeFeatureVideoLink();
+}
+
+// Link that overlays the background image to trigger the video
+// must be sized and positioned relative to background
+// image size, which is relative to section size
+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);
+
+    $('.features-video').css({
+        bottom: bgHeight * 0.27,
+        height: bgHeight * 0.58
+    });
+}
+
+
 // Ensure that the container is a round number that can be
 // evenly divided by the number of columns. This stops
 // Masonry from having gaps and mis-aligned items

diff --git a/less/003-mixins.less b/less/003-mixins.less
index 0b863ec37801b3eed7803d71055c7fac1bd1ff02..2b64e8f898f372c7c5a6cc399663ed75a9d708b4 100644 (file)
--- a/less/003-mixins.less
+++ b/less/003-mixins.less
@@ -26,6 +26,9 @@
        text-decoration: none;
        text-align: center;
        cursor: pointer;
+       line-height: @line-height;
+       padding-left: @horizontal-padding;
+       padding-right: @horizontal-padding;
 }
 
 .rounded-button() {
@@ -76,10 +79,18 @@
 
 .background-button-green() {
        .background-button(#8aab41, #aac759);
+       color: #fff;
+       &:hover {
+               color: #fff;
+       }
 }
 
 .background-button-blue() {
        .background-button(#3c9fd6, #53bde7);
+       color: #fff;
+       &:hover {
+               color: #fff;
+       }
 }
 
 .divider(@bottom-padding: 100px) {

diff --git a/less/102-intro.less b/less/102-intro.less
index be6fa3f7a802dd65781fe351f82dc14c0e79bacf..eb5b75372c41b4a55659b8ccebfb430abeb742e6 100644 (file)
--- a/less/102-intro.less
+++ b/less/102-intro.less
@@ -14,7 +14,7 @@
 \r
                @media @m900 {\r
                        padding-bottom: 85%;\r
-                       background-size: 180% auto;\r
+                       background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink()\r
                        padding-top: 100px;\r
                        text-align: center;\r
                }\r

diff --git a/less/104-nav.less b/less/104-nav.less
index ddaed5fb093f6c241fd4be3ab1b14e1b899585b5..a3e74fd73c35904566d98f14c3959b0e167e480a 100644 (file)
--- a/less/104-nav.less
+++ b/less/104-nav.less
@@ -158,6 +158,7 @@ nav#contactnav {
                }\r
                &.agencies {\r
                        .border-button-fill(@color-header-grey, #c2c4c7, 5%);\r
+                       line-height: 1;\r
                        @media @m900 {\r
                                display: none;\r
                        }\r

diff --git a/less/410-features.less b/less/410-features.less
index 5c328f63cedbe2e3c00fcb7be08bfeb84b2a52cb..0ba824ca1fc619467c1d3a7d8761a2ee331f972c 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -4,6 +4,34 @@
 @f2cols: ~"(max-width: 1350px)";
 @f1col: ~"(max-width: 767px)"; // Note: the same value should also be set in FeaturesSection.php for the _CSS() function
 
+.fonctionnalites {
+  .intro {
+    position: relative;
+  }
+}
+
+.features-video-button {
+  .button();
+  .background-button-blue();
+  .font-thinning();
+  margin-top: 50px;
+}
+
+.features-video {
+  display: block;
+  position: absolute;
+  //background: rgba(255,255,0,.5); // Highlight mode! (for testing)
+  width: 45%;
+  height: 58%; // Initial value - will be updated by JS
+  right: 5%;
+  bottom: 27%; // Initial value - will be updated by JS
+
+  @media @m900 {
+    width: 81%;
+    right: 9%;
+  }
+}
+
 .feature-blocks {
   width: 100%;
 }