wip #3375 @2

diff --git a/framework/application/forms/CMS/Sub/Intro.php b/framework/application/forms/CMS/Sub/Intro.php
index 7f7b81b18f9cd76a469a0e761d04b005982448da..e61f92b976ba8d0003070c608cd2ab7ea49937e0 100644 (file)
--- a/framework/application/forms/CMS/Sub/Intro.php
+++ b/framework/application/forms/CMS/Sub/Intro.php
@@ -41,6 +41,11 @@ class Fluidbook_Form_CMS_Sub_Intro extends CubeIT_Form_SubForm {
                $intro_bg->setMaxItems(1);\r
                $this->addElement($intro_bg);\r
 \r
+        $backgroundImage = new CubeIT_Form_Element_File_Image('backgroundmobileimage');\r
+        $backgroundImage->setLabel('Image de fond (variante mobile)');\r
+        $backgroundImage->setMaxItems(1);\r
+        $this->addElement($backgroundImage);\r
+\r
                $chapo = new CubeIT_Form_Element_Markitup('chapo');\r
                $chapo->setLabel('Chapo');\r
                $this->addElement($chapo);\r

diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php
index cc38ba05f3a809bb51f99c644227f2dcbf08f892..bbc2f929335a0c9d6a074f4220baf46a4e62c94a 100644 (file)
--- a/framework/application/views/helpers/BackgroundBlock.php
+++ b/framework/application/views/helpers/BackgroundBlock.php
@@ -36,7 +36,12 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
                 $target_height = ($mobile_max_width / 0.55) * $image_ratio;\r
 \r
                 if (stripos($image_path, '.oam') !== false) {\r
-                    $pict = $this->view->imageCms($image_path);\r
+                    if (!isset($data['backgroundmobileimage'])) {\r
+                        $pict = $this->view->imageCms($image_path);\r
+                    } else {\r
+                        $pict = '<div class="desktopr">' . $this->view->imageCms($image_path) . '</div>';\r
+                        $pict .= '<div class="mobiler">' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']))) . '</div>';\r
+                    }\r
                 } else {\r
                     if (isset($data['backgroundmobileimage'])) {\r
                         $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']);\r

diff --git a/js/002-common.js b/js/002-common.js
index c34d4b74238c87ff8b57587c77e25a41d3aa2a79..8c16c807f2d46039d032bb5155dad0cf77188649 100644 (file)
--- a/js/002-common.js
+++ b/js/002-common.js
@@ -101,6 +101,8 @@ function resize() {
         $(this).css('min-height', Math.round($(this).outerWidth() * $(this).data('bg-ratio')));\r
     });\r
 \r
+    resize_oam();\r
+\r
     var mobile = isMobile();\r
     if (mobile !== _mobile) {\r
         _mobile = mobile;\r
@@ -108,9 +110,45 @@ function resize() {
     }\r
 \r
     setZoom(ww);\r
+\r
     $(window).trigger('fluidbookresize');\r
 }\r
 \r
+function resize_oam() {\r
+    $('iframe.oam').each(function () {\r
+        var p = $(this).parent();\r
+        var pw = $(p).outerWidth();\r
+        var ph = $(p).outerHeight();\r
+        var fit = 'cover';\r
+        var px = 0;\r
+        var py = 0.5;\r
+\r
+        if ($(this).closest('.mobiler').length == 1) {\r
+            fit = 'contains';\r
+            px = 0.5;\r
+            py = 1;\r
+        }\r
+        var scale;\r
+        var w = parseInt($(this).attr('width'));\r
+        var h = parseInt($(this).attr('height'));\r
+        var sw = pw / w;\r
+        var sh = ph / h;\r
+        if (fit === 'cover') {\r
+            scale = Math.max(sw, sh);\r
+        } else {\r
+            scale = Math.min(sw, sh);\r
+        }\r
+        var nw = w * scale;\r
+        var nh = h * scale;\r
+\r
+        var x = Math.round((pw - nw) * px);\r
+        var y = Math.round((ph - nh) * py);\r
+\r
+        $(this).css({transform: 'scale(' + scale + ')', left: x, top: y});\r
+    });\r
+}\r
+\r
+\r
 function calculateZoom(ww) {\r
 \r
     if (typeof ww === 'undefined') {\r

diff --git a/js/102-intro.js b/js/102-intro.js
index 0e855387b563e74680a956603f9a05f386c1a73b..9fe69bcf00f4fb263f0e01b2d3f0f5ecf1a6519b 100644 (file)
--- a/js/102-intro.js
+++ b/js/102-intro.js
@@ -1,7 +1,9 @@
 registerLoader(load_intro);\r
 \r
-function load_intro(){\r
-    if($("section.intro:eq(0)").data('header-theme')!==null){\r
+function load_intro() {\r
+    if ($("section.intro:eq(0)").data('header-theme') !== null) {\r
         $("header").addClass($("section.intro:eq(0)").data('header-theme'));\r
     }\r
+\r
 }\r
+\r

diff --git a/less/002-common.less b/less/002-common.less
index 3d5358440cc7f8a7078321582e9a7affa3cb992e..2d3814905d46d9cfe5cff340c304f676e4853710 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -1,310 +1,342 @@
 @import "000-imports";\r
 \r
 ::selection {\r
-       background: #8AAB41;\r
-       color: #fff;\r
+  background: #8AAB41;\r
+  color: #fff;\r
 }\r
 \r
 ::-moz-selection {\r
-       background: #8AAB41;\r
-       color: #fff;\r
+  background: #8AAB41;\r
+  color: #fff;\r
 }\r
 \r
 html {\r
-       box-sizing: border-box;\r
+  box-sizing: border-box;\r
 }\r
 \r
 *, *:before, *:after {\r
-       box-sizing: inherit;\r
+  box-sizing: inherit;\r
 }\r
 \r
 body {\r
-       background-color: #fff;\r
-       font-family: @body-font;\r
-       font-size: 14px;\r
-       line-height: 1.6;\r
-       min-width: @content-min-width;\r
-       -moz-text-size-adjust: 100%;\r
-       -webkit-text-size-adjust: 100%;\r
-       color: #151e28;\r
-       opacity: 0;\r
-       transition: opacity @transition-time-buttons;\r
-\r
-       .wf-active & {\r
-               opacity: 1;\r
-       }\r
-\r
-       @media @m900 {\r
-               font-size: 14px;\r
-       }\r
+  background-color: #fff;\r
+  font-family: @body-font;\r
+  font-size: 14px;\r
+  line-height: 1.6;\r
+  min-width: @content-min-width;\r
+  -moz-text-size-adjust: 100%;\r
+  -webkit-text-size-adjust: 100%;\r
+  color: #151e28;\r
+  opacity: 0;\r
+  transition: opacity @transition-time-buttons;\r
+\r
+  .wf-active & {\r
+    opacity: 1;\r
+  }\r
+\r
+  @media @m900 {\r
+    font-size: 14px;\r
+  }\r
 }\r
 \r
 .popupWindow .back {\r
-       box-shadow: none;\r
+  box-shadow: none;\r
 }\r
 \r
 // When the popup is open, freeze the background so it doesn't scroll\r
 // This is so we don't have problems with touch devices\r
 body.popupOpen {\r
-       position: fixed;\r
-       height: 100%;\r
-       width: 100%;\r
-       overflow: hidden;\r
+  position: fixed;\r
+  height: 100%;\r
+  width: 100%;\r
+  overflow: hidden;\r
 }\r
 \r
 .popupWindow {\r
-       -webkit-overflow-scrolling: touch;\r
-       background-color: #fff; // For some reason this is needed when using -webkit-overflow-scrolling or background is missing at bottom\r
+  -webkit-overflow-scrolling: touch;\r
+  background-color: #fff; // For some reason this is needed when using -webkit-overflow-scrolling or background is missing at bottom\r
 }\r
 \r
 main {\r
-       background-color: #fff;\r
-       max-width: @content-max-width;\r
-       margin: 0 auto;\r
-       position: relative;\r
+  background-color: #fff;\r
+  max-width: @content-max-width;\r
+  margin: 0 auto;\r
+  position: relative;\r
 }\r
 \r
 #z {\r
-       transform-origin: 50% 0 0;\r
+  transform-origin: 50% 0 0;\r
 }\r
 \r
 .ie10, .ie11 {\r
-       #z {\r
-               transform: scale(1) !important;\r
-       }\r
+  #z {\r
+    transform: scale(1) !important;\r
+  }\r
 }\r
 \r
 #mm-0 {\r
-       max-width: 100%;\r
-       overflow: hidden;\r
+  max-width: 100%;\r
+  overflow: hidden;\r
 }\r
 \r
 // Main heading style\r
 h1, h2 {\r
-       &.title {\r
-               color: @color-text;\r
-               font-family: @playfair;\r
-               font-size: 50px;\r
-               font-weight: 400;\r
-               line-height: 1.2;\r
-               .divider(1.4em);\r
-\r
-               @media @m900 {\r
-                       text-align: center;\r
-                       font-size: 30px;\r
-                       padding-top: 10px;\r
-               }\r
-\r
-               br {\r
-                       @media @m900 {\r
-                               display: none;\r
-                       }\r
-               }\r
-       }\r
+  &.title {\r
+    color: @color-text;\r
+    font-family: @playfair;\r
+    font-size: 50px;\r
+    font-weight: 400;\r
+    line-height: 1.2;\r
+    .divider(1.4em);\r
+\r
+    @media @m900 {\r
+      text-align: center;\r
+      font-size: 30px;\r
+      padding-top: 10px;\r
+    }\r
+\r
+    br {\r
+      @media @m900 {\r
+        display: none;\r
+      }\r
+    }\r
+  }\r
 }\r
 \r
 p {\r
-       margin-bottom: 1.2em;\r
+  margin-bottom: 1.2em;\r
 \r
-       &:last-of-type {\r
-               margin-bottom: 0;\r
-       }\r
+  &:last-of-type {\r
+    margin-bottom: 0;\r
+  }\r
 }\r
 \r
 a {\r
-       transition: @transition-time-buttons color;\r
-       color: @color-link;\r
-       text-decoration: underline;\r
+  transition: @transition-time-buttons color;\r
+  color: @color-link;\r
+  text-decoration: underline;\r
 \r
-       &:hover {\r
-               color: @color-green;\r
-       }\r
+  &:hover {\r
+    color: @color-green;\r
+  }\r
 }\r
 \r
 .content-wrapper {\r
-       position: relative;\r
-       width: 100%;\r
-       padding-top: 4%;\r
-       padding-bottom: 5%;\r
-\r
-       &.fullheight {\r
-               min-height: 100%;\r
-               background-size: 100%;\r
-       }\r
-\r
-       .picture {\r
-               position: absolute;\r
-               bottom: 0;\r
-               left: 0;\r
-               width: 100%;\r
-               height: 1000px;\r
-               z-index: 0;\r
-\r
-\r
-               picture {\r
-                       img {\r
-                               width: 100%;\r
-                               height: auto;\r
-                               display: block;\r
-                               position: absolute;\r
-                               right: 0;\r
-                               bottom: 0;\r
-                       }\r
-               }\r
-\r
-               iframe{\r
-                       //right: 0;\r
-                       //bottom: 0;\r
-                       //position: absolute;\r
-               }\r
-       }\r
-\r
-       .grid {\r
-               //position: absolute;\r
-               //top: 50%;\r
-               //transform: translateY(-50%);\r
-               //width: 100%;\r
-               position: relative;\r
-               z-index: 1;\r
-       }\r
+  position: relative;\r
+  width: 100%;\r
+  padding-top: 4%;\r
+  padding-bottom: 5%;\r
+\r
+  &.fullheight {\r
+    min-height: 100%;\r
+    background-size: 100%;\r
+  }\r
+\r
+  .picture {\r
+    position: absolute;\r
+    bottom: 0;\r
+    left: 0;\r
+    width: 100%;\r
+    height: 100%;\r
+    z-index: 0;\r
+\r
+    .desktopr, .mobiler {\r
+      width: 100%;\r
+      height: 100%;\r
+\r
+      iframe.oam {\r
+        position: absolute;\r
+      }\r
+    }\r
+\r
+    .desktopr {\r
+      @media @m900 {\r
+        display: none;\r
+      }\r
+    }\r
+\r
+    .mobiler {\r
+      display: none;\r
+      @media @m900 {\r
+        display: block;\r
+      }\r
+    }\r
+\r
+    iframe.oam {\r
+      overflow: hidden;\r
+      pointer-events: none;\r
+      transform-origin: 0 0 0;\r
+    }\r
+\r
+\r
+    picture {\r
+      img {\r
+        width: 100%;\r
+        height: auto;\r
+        display: block;\r
+        position: absolute;\r
+        right: 0;\r
+        bottom: 0;\r
+      }\r
+    }\r
+\r
+    iframe {\r
+      //right: 0;\r
+      //bottom: 0;\r
+      //position: absolute;\r
+    }\r
+  }\r
+\r
+  .grid {\r
+    //position: absolute;\r
+    //top: 50%;\r
+    //transform: translateY(-50%);\r
+    //width: 100%;\r
+    position: relative;\r
+    z-index: 1;\r
+  }\r
 }\r
 \r
 .no-shrink {\r
-       //min-width: @desktop-min-width;\r
+  //min-width: @desktop-min-width;\r
 }\r
 \r
 .cubeit-content {\r
-       width: 90%;\r
-       margin: 0 auto;\r
+  width: 90%;\r
+  margin: 0 auto;\r
 }\r
 \r
 // Simple Flexbox Grid\r
 .grid {\r
-       display: flex;\r
-       padding-left: 5%;\r
-       padding-right: 5%;\r
+  display: flex;\r
+  padding-left: 5%;\r
+  padding-right: 5%;\r
 \r
-       &.wrap {\r
-               flex-wrap: wrap;\r
-       }\r
+  &.wrap {\r
+    flex-wrap: wrap;\r
+  }\r
 }\r
 \r
 .col {\r
-       flex: 1 0 auto;\r
+  flex: 1 0 auto;\r
 }\r
 \r
 // Grid contains 6 columns without gutters\r
 .col-1 {\r
-       flex-basis: percentage(1/6);\r
-       @media @m1280 {\r
-               flex-basis: percentage(1/4);\r
-       }\r
-\r
-       @media @m900 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(1/6);\r
+  @media @m1280 {\r
+    flex-basis: percentage(1/4);\r
+  }\r
+\r
+  @media @m900 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .col-2 {\r
-       flex-basis: percentage(2/6);\r
-       @media @m1280 {\r
-               flex-basis: percentage(2/4);\r
-       }\r
-       @media @m900 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(2/6);\r
+  @media @m1280 {\r
+    flex-basis: percentage(2/4);\r
+  }\r
+  @media @m900 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .col-3 {\r
-       flex-basis: percentage(3/6);\r
-       @media @m1280 {\r
-               flex-basis: percentage(3/4);\r
-       }\r
-       @media @m900 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(3/6);\r
+  @media @m1280 {\r
+    flex-basis: percentage(3/4);\r
+  }\r
+  @media @m900 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .col-4 {\r
-       flex-basis: percentage(4/6);\r
-       @media @m1280 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(4/6);\r
+  @media @m1280 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .col-5 {\r
-       flex-basis: percentage(5/6);\r
-       @media @m1280 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(5/6);\r
+  @media @m1280 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .col-6 {\r
-       flex-basis: percentage(6/6);\r
-       @media @m1280 {\r
-               flex-basis: 100%;\r
-       }\r
+  flex-basis: percentage(6/6);\r
+  @media @m1280 {\r
+    flex-basis: 100%;\r
+  }\r
 }\r
 \r
 .dotclear {\r
-       ul {\r
-               .list();\r
-       }\r
+  ul {\r
+    .list();\r
+  }\r
 \r
-       p + ul {\r
-               margin-top: 1.5em;\r
-       }\r
+  p + ul {\r
+    margin-top: 1.5em;\r
+  }\r
 }\r
 \r
 .no-intro {\r
-       height: 0px;\r
-       box-sizing: content-box;\r
-       padding-top: 152px; // Minimum clearance and top for fixed menu\r
+  height: 0px;\r
+  box-sizing: content-box;\r
+  padding-top: 152px; // Minimum clearance and top for fixed menu\r
 \r
-       @media @m1280 {\r
-               padding-top: 120px;\r
-       }\r
+  @media @m1280 {\r
+    padding-top: 120px;\r
+  }\r
 \r
-       @media @m900 {\r
-               padding-top: 100px;\r
-       }\r
+  @media @m900 {\r
+    padding-top: 100px;\r
+  }\r
 \r
-       @media @m768 {\r
-               padding-top: 80px;\r
-       }\r
+  @media @m768 {\r
+    padding-top: 80px;\r
+  }\r
 }\r
 \r
 #ajaxLoader {\r
-       cursor: wait;\r
+  cursor: wait;\r
 \r
-       .c {\r
-               visibility: hidden;\r
-       }\r
+  .c {\r
+    visibility: hidden;\r
+  }\r
 }\r
 \r
 .popupLayer {\r
-       .popupWindow, .popupOverlay {\r
-               opacity: 0;\r
-               transition: opacity @transition-time-popin;\r
-       }\r
-\r
-       &.display {\r
-               .popupWindow, .popupOverlay {\r
-                       opacity: 1;\r
-               }\r
-       }\r
+  .popupWindow, .popupOverlay {\r
+    opacity: 0;\r
+    transition: opacity @transition-time-popin;\r
+  }\r
+\r
+  &.display {\r
+    .popupWindow, .popupOverlay {\r
+      opacity: 1;\r
+    }\r
+  }\r
 }\r
 \r
 address {\r
-       font-style: normal;\r
+  font-style: normal;\r
 \r
-       a {\r
-               text-decoration: none;\r
-       }\r
+  a {\r
+    text-decoration: none;\r
+  }\r
 }\r
 \r
 #gupc {\r
-       position: absolute;\r
-       bottom: 0;\r
-       left: 0;\r
+  position: absolute;\r
+  bottom: 0;\r
+  left: 0;\r
+}\r
+\r
+#cookieBanner {\r
+  background-color: #263340 !important;\r
 }
\ No newline at end of file

diff --git a/less/102-intro.less b/less/102-intro.less
index 836a0defff4a413ceb9e5facf4d229aa7f30fdf6..4eece1f5e08fc94af55f92fa1fdc6543d0d39afa 100644 (file)
--- a/less/102-intro.less
+++ b/less/102-intro.less
@@ -1,76 +1,77 @@
 @import "000-imports";\r
 \r
 .intro {\r
-       color: #151e28;\r
+  color: #151e28;\r
 \r
-       &.nopad {\r
-               .content-wrapper {\r
-                       .intro-no-padding();\r
-               }\r
-       }\r
+  &.nopad {\r
+    .content-wrapper {\r
+      .intro-no-padding();\r
+    }\r
+  }\r
 \r
-       &.nobg {\r
-               .content-wrapper {\r
-                       @media @m900 {\r
-                               padding-bottom: 15%;\r
-                       }\r
-               }\r
-       }\r
+  &.nobg {\r
+    .content-wrapper {\r
+      @media @m900 {\r
+        padding-bottom: 15%;\r
+      }\r
+    }\r
+  }\r
 \r
-       .content-wrapper {\r
-               .intro-padding();\r
-               background-size: 100% auto;\r
-               background-position: 100% 100%;\r
+  .content-wrapper {\r
+    .intro-padding();\r
+    background-size: 100% auto;\r
+    background-position: 100% 100%;\r
 \r
-               @media @m900 {\r
-                       padding-bottom: 85%;\r
-                       background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink()\r
-                       text-align: center;\r
+    @media @m900 {\r
+      padding-bottom: 85%;\r
+      background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink()\r
+      text-align: center;\r
 \r
-                       .title {\r
-                               padding-top: 1em;\r
-                       }\r
+      .title {\r
+        padding-top: 1em;\r
+      }\r
 \r
-                       .dotclear {\r
-                               text-align: left;\r
-                       }\r
-               }\r
+      .dotclear {\r
+        text-align: left;\r
+      }\r
+    }\r
 \r
-               hr {\r
-                       border: 0;\r
-                       height: 1px;\r
-                       font-size: 50px;\r
-                       .divider(1.4em);\r
+    hr {\r
+      border: 0;\r
+      height: 1px;\r
+      font-size: 50px;\r
+      .divider(1.4em);\r
 \r
-                       @media @m900 {\r
-                               font-size: 30px;\r
-                       }\r
-               }\r
-       }\r
+      @media @m900 {\r
+        font-size: 30px;\r
+      }\r
+    }\r
 \r
-       blockquote {\r
-               background-color: #f3f3f3;\r
-               padding: 2.678555em 0;\r
-               color: #66727a;\r
-               font-family: @opensans;\r
-               font-weight: 400;\r
-               font-size: 1.4em;\r
-               text-align: center;\r
-               line-height: 1.6;\r
+  }\r
 \r
-               @media @m900 {\r
-                       font-size: 1.1em;\r
-               }\r
+  blockquote {\r
+    background-color: #f3f3f3;\r
+    padding: 2.678555em 0;\r
+    color: #66727a;\r
+    font-family: @opensans;\r
+    font-weight: 400;\r
+    font-size: 1.4em;\r
+    text-align: center;\r
+    line-height: 1.6;\r
 \r
-               div {\r
-                       width: 60%;\r
-                       min-width: 980px;\r
-                       margin: 0 auto;\r
+    @media @m900 {\r
+      font-size: 1.1em;\r
+    }\r
 \r
-                       @media @m1024 {\r
-                               width: 80%;\r
-                               min-width: 0;\r
-                       }\r
-               }\r
-       }\r
+    div {\r
+      width: 60%;\r
+      min-width: 980px;\r
+      margin: 0 auto;\r
+\r
+      @media @m1024 {\r
+        width: 80%;\r
+        min-width: 0;\r
+      }\r
+    }\r
+  }\r
 }
\ No newline at end of file