From a625f51e198df9881e3b62b9b2c982bdcffeab69 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Thu, 9 Apr 2020 16:08:38 +0000 Subject: [PATCH] wip #3375 @2 --- framework/application/forms/CMS/Sub/Intro.php | 5 + .../views/helpers/BackgroundBlock.php | 7 +- js/002-common.js | 38 ++ js/102-intro.js | 6 +- less/002-common.less | 430 ++++++++++-------- less/102-intro.less | 121 ++--- 6 files changed, 345 insertions(+), 262 deletions(-) diff --git a/framework/application/forms/CMS/Sub/Intro.php b/framework/application/forms/CMS/Sub/Intro.php index 7f7b81b..e61f92b 100644 --- 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); $this->addElement($intro_bg); + $backgroundImage = new CubeIT_Form_Element_File_Image('backgroundmobileimage'); + $backgroundImage->setLabel('Image de fond (variante mobile)'); + $backgroundImage->setMaxItems(1); + $this->addElement($backgroundImage); + $chapo = new CubeIT_Form_Element_Markitup('chapo'); $chapo->setLabel('Chapo'); $this->addElement($chapo); diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php index cc38ba0..bbc2f92 100644 --- 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; if (stripos($image_path, '.oam') !== false) { - $pict = $this->view->imageCms($image_path); + if (!isset($data['backgroundmobileimage'])) { + $pict = $this->view->imageCms($image_path); + } else { + $pict = '
' . $this->view->imageCms($image_path) . '
'; + $pict .= '
' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']))) . '
'; + } } else { if (isset($data['backgroundmobileimage'])) { $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']); diff --git a/js/002-common.js b/js/002-common.js index c34d4b7..8c16c80 100644 --- 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'))); }); + resize_oam(); + var mobile = isMobile(); if (mobile !== _mobile) { _mobile = mobile; @@ -108,9 +110,45 @@ function resize() { } setZoom(ww); + $(window).trigger('fluidbookresize'); } +function resize_oam() { + $('iframe.oam').each(function () { + var p = $(this).parent(); + var pw = $(p).outerWidth(); + var ph = $(p).outerHeight(); + var fit = 'cover'; + var px = 0; + var py = 0.5; + + if ($(this).closest('.mobiler').length == 1) { + fit = 'contains'; + px = 0.5; + py = 1; + } + var scale; + var w = parseInt($(this).attr('width')); + var h = parseInt($(this).attr('height')); + var sw = pw / w; + var sh = ph / h; + if (fit === 'cover') { + scale = Math.max(sw, sh); + } else { + scale = Math.min(sw, sh); + } + var nw = w * scale; + var nh = h * scale; + + var x = Math.round((pw - nw) * px); + var y = Math.round((ph - nh) * py); + + $(this).css({transform: 'scale(' + scale + ')', left: x, top: y}); + }); +} + + function calculateZoom(ww) { if (typeof ww === 'undefined') { diff --git a/js/102-intro.js b/js/102-intro.js index 0e85538..9fe69bc 100644 --- a/js/102-intro.js +++ b/js/102-intro.js @@ -1,7 +1,9 @@ registerLoader(load_intro); -function load_intro(){ - if($("section.intro:eq(0)").data('header-theme')!==null){ +function load_intro() { + if ($("section.intro:eq(0)").data('header-theme') !== null) { $("header").addClass($("section.intro:eq(0)").data('header-theme')); } + } + diff --git a/less/002-common.less b/less/002-common.less index 3d53584..2d38149 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -1,310 +1,342 @@ @import "000-imports"; ::selection { - background: #8AAB41; - color: #fff; + background: #8AAB41; + color: #fff; } ::-moz-selection { - background: #8AAB41; - color: #fff; + background: #8AAB41; + color: #fff; } html { - box-sizing: border-box; + box-sizing: border-box; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } body { - background-color: #fff; - font-family: @body-font; - font-size: 14px; - line-height: 1.6; - min-width: @content-min-width; - -moz-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - color: #151e28; - opacity: 0; - transition: opacity @transition-time-buttons; - - .wf-active & { - opacity: 1; - } - - @media @m900 { - font-size: 14px; - } + background-color: #fff; + font-family: @body-font; + font-size: 14px; + line-height: 1.6; + min-width: @content-min-width; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: #151e28; + opacity: 0; + transition: opacity @transition-time-buttons; + + .wf-active & { + opacity: 1; + } + + @media @m900 { + font-size: 14px; + } } .popupWindow .back { - box-shadow: none; + box-shadow: none; } // When the popup is open, freeze the background so it doesn't scroll // This is so we don't have problems with touch devices body.popupOpen { - position: fixed; - height: 100%; - width: 100%; - overflow: hidden; + position: fixed; + height: 100%; + width: 100%; + overflow: hidden; } .popupWindow { - -webkit-overflow-scrolling: touch; - background-color: #fff; // For some reason this is needed when using -webkit-overflow-scrolling or background is missing at bottom + -webkit-overflow-scrolling: touch; + background-color: #fff; // For some reason this is needed when using -webkit-overflow-scrolling or background is missing at bottom } main { - background-color: #fff; - max-width: @content-max-width; - margin: 0 auto; - position: relative; + background-color: #fff; + max-width: @content-max-width; + margin: 0 auto; + position: relative; } #z { - transform-origin: 50% 0 0; + transform-origin: 50% 0 0; } .ie10, .ie11 { - #z { - transform: scale(1) !important; - } + #z { + transform: scale(1) !important; + } } #mm-0 { - max-width: 100%; - overflow: hidden; + max-width: 100%; + overflow: hidden; } // Main heading style h1, h2 { - &.title { - color: @color-text; - font-family: @playfair; - font-size: 50px; - font-weight: 400; - line-height: 1.2; - .divider(1.4em); - - @media @m900 { - text-align: center; - font-size: 30px; - padding-top: 10px; - } - - br { - @media @m900 { - display: none; - } - } - } + &.title { + color: @color-text; + font-family: @playfair; + font-size: 50px; + font-weight: 400; + line-height: 1.2; + .divider(1.4em); + + @media @m900 { + text-align: center; + font-size: 30px; + padding-top: 10px; + } + + br { + @media @m900 { + display: none; + } + } + } } p { - margin-bottom: 1.2em; + margin-bottom: 1.2em; - &:last-of-type { - margin-bottom: 0; - } + &:last-of-type { + margin-bottom: 0; + } } a { - transition: @transition-time-buttons color; - color: @color-link; - text-decoration: underline; + transition: @transition-time-buttons color; + color: @color-link; + text-decoration: underline; - &:hover { - color: @color-green; - } + &:hover { + color: @color-green; + } } .content-wrapper { - position: relative; - width: 100%; - padding-top: 4%; - padding-bottom: 5%; - - &.fullheight { - min-height: 100%; - background-size: 100%; - } - - .picture { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 1000px; - z-index: 0; - - - picture { - img { - width: 100%; - height: auto; - display: block; - position: absolute; - right: 0; - bottom: 0; - } - } - - iframe{ - //right: 0; - //bottom: 0; - //position: absolute; - } - } - - .grid { - //position: absolute; - //top: 50%; - //transform: translateY(-50%); - //width: 100%; - position: relative; - z-index: 1; - } + position: relative; + width: 100%; + padding-top: 4%; + padding-bottom: 5%; + + &.fullheight { + min-height: 100%; + background-size: 100%; + } + + .picture { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + + .desktopr, .mobiler { + width: 100%; + height: 100%; + + iframe.oam { + position: absolute; + } + } + + .desktopr { + @media @m900 { + display: none; + } + } + + .mobiler { + display: none; + @media @m900 { + display: block; + } + } + + iframe.oam { + overflow: hidden; + pointer-events: none; + transform-origin: 0 0 0; + } + + + picture { + img { + width: 100%; + height: auto; + display: block; + position: absolute; + right: 0; + bottom: 0; + } + } + + iframe { + //right: 0; + //bottom: 0; + //position: absolute; + } + } + + .grid { + //position: absolute; + //top: 50%; + //transform: translateY(-50%); + //width: 100%; + position: relative; + z-index: 1; + } } .no-shrink { - //min-width: @desktop-min-width; + //min-width: @desktop-min-width; } .cubeit-content { - width: 90%; - margin: 0 auto; + width: 90%; + margin: 0 auto; } // Simple Flexbox Grid .grid { - display: flex; - padding-left: 5%; - padding-right: 5%; + display: flex; + padding-left: 5%; + padding-right: 5%; - &.wrap { - flex-wrap: wrap; - } + &.wrap { + flex-wrap: wrap; + } } .col { - flex: 1 0 auto; + flex: 1 0 auto; } // Grid contains 6 columns without gutters .col-1 { - flex-basis: percentage(1/6); - @media @m1280 { - flex-basis: percentage(1/4); - } - - @media @m900 { - flex-basis: 100%; - } + flex-basis: percentage(1/6); + @media @m1280 { + flex-basis: percentage(1/4); + } + + @media @m900 { + flex-basis: 100%; + } } .col-2 { - flex-basis: percentage(2/6); - @media @m1280 { - flex-basis: percentage(2/4); - } - @media @m900 { - flex-basis: 100%; - } + flex-basis: percentage(2/6); + @media @m1280 { + flex-basis: percentage(2/4); + } + @media @m900 { + flex-basis: 100%; + } } .col-3 { - flex-basis: percentage(3/6); - @media @m1280 { - flex-basis: percentage(3/4); - } - @media @m900 { - flex-basis: 100%; - } + flex-basis: percentage(3/6); + @media @m1280 { + flex-basis: percentage(3/4); + } + @media @m900 { + flex-basis: 100%; + } } .col-4 { - flex-basis: percentage(4/6); - @media @m1280 { - flex-basis: 100%; - } + flex-basis: percentage(4/6); + @media @m1280 { + flex-basis: 100%; + } } .col-5 { - flex-basis: percentage(5/6); - @media @m1280 { - flex-basis: 100%; - } + flex-basis: percentage(5/6); + @media @m1280 { + flex-basis: 100%; + } } .col-6 { - flex-basis: percentage(6/6); - @media @m1280 { - flex-basis: 100%; - } + flex-basis: percentage(6/6); + @media @m1280 { + flex-basis: 100%; + } } .dotclear { - ul { - .list(); - } + ul { + .list(); + } - p + ul { - margin-top: 1.5em; - } + p + ul { + margin-top: 1.5em; + } } .no-intro { - height: 0px; - box-sizing: content-box; - padding-top: 152px; // Minimum clearance and top for fixed menu + height: 0px; + box-sizing: content-box; + padding-top: 152px; // Minimum clearance and top for fixed menu - @media @m1280 { - padding-top: 120px; - } + @media @m1280 { + padding-top: 120px; + } - @media @m900 { - padding-top: 100px; - } + @media @m900 { + padding-top: 100px; + } - @media @m768 { - padding-top: 80px; - } + @media @m768 { + padding-top: 80px; + } } #ajaxLoader { - cursor: wait; + cursor: wait; - .c { - visibility: hidden; - } + .c { + visibility: hidden; + } } .popupLayer { - .popupWindow, .popupOverlay { - opacity: 0; - transition: opacity @transition-time-popin; - } - - &.display { - .popupWindow, .popupOverlay { - opacity: 1; - } - } + .popupWindow, .popupOverlay { + opacity: 0; + transition: opacity @transition-time-popin; + } + + &.display { + .popupWindow, .popupOverlay { + opacity: 1; + } + } } address { - font-style: normal; + font-style: normal; - a { - text-decoration: none; - } + a { + text-decoration: none; + } } #gupc { - position: absolute; - bottom: 0; - left: 0; + position: absolute; + bottom: 0; + left: 0; +} + +#cookieBanner { + background-color: #263340 !important; } \ No newline at end of file diff --git a/less/102-intro.less b/less/102-intro.less index 836a0de..4eece1f 100644 --- a/less/102-intro.less +++ b/less/102-intro.less @@ -1,76 +1,77 @@ @import "000-imports"; .intro { - color: #151e28; + color: #151e28; - &.nopad { - .content-wrapper { - .intro-no-padding(); - } - } + &.nopad { + .content-wrapper { + .intro-no-padding(); + } + } - &.nobg { - .content-wrapper { - @media @m900 { - padding-bottom: 15%; - } - } - } + &.nobg { + .content-wrapper { + @media @m900 { + padding-bottom: 15%; + } + } + } - .content-wrapper { - .intro-padding(); - background-size: 100% auto; - background-position: 100% 100%; + .content-wrapper { + .intro-padding(); + background-size: 100% auto; + background-position: 100% 100%; - @media @m900 { - padding-bottom: 85%; - background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink() - text-align: center; + @media @m900 { + padding-bottom: 85%; + background-size: 180% auto; // This value needs to be synced with 410-features.js for resizeVideoLink() + text-align: center; - .title { - padding-top: 1em; - } + .title { + padding-top: 1em; + } - .dotclear { - text-align: left; - } - } + .dotclear { + text-align: left; + } + } - hr { - border: 0; - height: 1px; - font-size: 50px; - .divider(1.4em); + hr { + border: 0; + height: 1px; + font-size: 50px; + .divider(1.4em); - @media @m900 { - font-size: 30px; - } - } - } + @media @m900 { + font-size: 30px; + } + } - blockquote { - background-color: #f3f3f3; - padding: 2.678555em 0; - color: #66727a; - font-family: @opensans; - font-weight: 400; - font-size: 1.4em; - text-align: center; - line-height: 1.6; + } - @media @m900 { - font-size: 1.1em; - } + blockquote { + background-color: #f3f3f3; + padding: 2.678555em 0; + color: #66727a; + font-family: @opensans; + font-weight: 400; + font-size: 1.4em; + text-align: center; + line-height: 1.6; - div { - width: 60%; - min-width: 980px; - margin: 0 auto; + @media @m900 { + font-size: 1.1em; + } - @media @m1024 { - width: 80%; - min-width: 0; - } - } - } + div { + width: 60%; + min-width: 980px; + margin: 0 auto; + + @media @m1024 { + width: 80%; + min-width: 0; + } + } + } } \ No newline at end of file -- 2.39.5