From: stephen@cubedesigners.com Date: Wed, 20 Jul 2016 15:54:53 +0000 (+0000) Subject: Done #571 @5.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1892f57186dda642b876a46e33dbb8e9f0552226;p=fluidbook-v3.git Done #571 @5.5 --- diff --git a/framework/application/controllers/AjaxpopupController.php b/framework/application/controllers/AjaxpopupController.php index 5a4147a..0f3c556 100644 --- 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 3451b5a..a100ae8 100644 --- 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() { parent::init(); + $video_button = new Zend_Form_Element_Text('video_button_text'); + $video_button->setLabel('Texte pour bouton vidéo'); + $this->addElement($video_button); + + $video = new CubeIT_Form_Element_WebVideo('video'); + $video->setLabel('Vidéo'); + $this->addElement($video); + $features_title = new Zend_Form_Element_Textarea('features_title'); $features_title->setLabel('Titre pour "Fonctionnalités incluses de série"'); $features_title->setAttrib('rows', 3); diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml index 30eb05b..df92201 100644 --- a/framework/application/views/scripts/templates/fonctionnalites.phtml +++ b/framework/application/views/scripts/templates/fonctionnalites.phtml @@ -2,7 +2,12 @@ $this->headScript()->addScriptAndStyle('410-features'); -$res = $this->introBlock($this->intro, ''); +$videoLink = '/ajaxpopup/video/'. $this->video; + +$extraContent = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']); +$extraContent .= $this->linkPopup('', $videoLink, ['class' => 'features-video', 'width' => '1200']); + +$res = $this->introBlock($this->intro, $extraContent); $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 5b21c7e..c50f6fc 100644 --- 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 0b863ec..2b64e8f 100644 --- 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 be6fa3f..eb5b753 100644 --- a/less/102-intro.less +++ b/less/102-intro.less @@ -14,7 +14,7 @@ @media @m900 { padding-bottom: 85%; - background-size: 180% auto; + background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink() padding-top: 100px; text-align: center; } diff --git a/less/104-nav.less b/less/104-nav.less index ddaed5f..a3e74fd 100644 --- a/less/104-nav.less +++ b/less/104-nav.less @@ -158,6 +158,7 @@ nav#contactnav { } &.agencies { .border-button-fill(@color-header-grey, #c2c4c7, 5%); + line-height: 1; @media @m900 { display: none; } diff --git a/less/410-features.less b/less/410-features.less index 5c328f6..0ba824c 100644 --- 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%; }