From c1d7cc189aad338fbb9d283a2e0f411d36719869 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Wed, 29 Jul 2015 15:48:02 +0000 Subject: [PATCH] Home slideshow --- .../forms/CMS/Sub/Home/Slideshow/Slide.php | 14 +-- .../views/helpers/HomeSlideshow.php | 20 +-- .../views/scripts/common/content.phtml | 2 +- .../views/scripts/common/header.phtml | 14 +-- images/logo.svg | 94 ++++++++------- images/slideshow/pattern.png | Bin 0 -> 935 bytes js/common.js | 24 +--- js/home.js | 27 +++++ less/00-constants.less | 33 +---- less/01-mixins.less | 114 ++++++++++++++++++ less/common.less | 6 +- less/header.less | 6 +- less/home.less | 65 +++++++++- less/slideshow.less | 97 --------------- 14 files changed, 275 insertions(+), 241 deletions(-) create mode 100644 images/slideshow/pattern.png create mode 100644 js/home.js create mode 100644 less/01-mixins.less diff --git a/framework/application/forms/CMS/Sub/Home/Slideshow/Slide.php b/framework/application/forms/CMS/Sub/Home/Slideshow/Slide.php index b0129fa..585c508 100644 --- a/framework/application/forms/CMS/Sub/Home/Slideshow/Slide.php +++ b/framework/application/forms/CMS/Sub/Home/Slideshow/Slide.php @@ -10,16 +10,6 @@ class Cubedesigners_Form_CMS_Sub_Home_Slideshow_Slide extends CubeIT_Form_SubFor $image->setMaxItems(1); $this->addElement($image); - $fond = new CubeIT_Form_Element_File_Image('background'); - $fond->setLabel('Image de fond'); - $fond->setMaxItems(1); - $this->addElement($fond); - - $mask = new CubeIT_Form_Element_File_Image('mask'); - $mask->setLabel('Masque'); - $mask->setMaxItems(1); - $this->addElement($mask); - $legend = new CubeIT_Form_Element_Markitup('legende'); $legend->setLabel('Legende'); $this->addElement($legend); @@ -33,6 +23,4 @@ class Cubedesigners_Form_CMS_Sub_Home_Slideshow_Slide extends CubeIT_Form_SubFor $this->addSubForm($link, 'lien'); } -} - -?> +} \ No newline at end of file diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php index 79c3bc5..04645a2 100644 --- a/framework/application/views/helpers/HomeSlideshow.php +++ b/framework/application/views/helpers/HomeSlideshow.php @@ -16,32 +16,22 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac $s = ''; foreach ($slides as $id => $slide) { - if (null !== $slide['mask']) { - $image = $this->view->imageMasked($slide['image'], $slide['mask']); - $d = CubeIT_View_Helper_Image::$lastDimensions; - } else { - $image = $this->view->imageCms($slide['image']); - } - $offset = $d[1] - 572; - - + $image = $this->view->imageCms($slide['image']); if (!$slide['time']) { $time = 300000; } else { $time = $slide['time'] * 1000; } + + $attributes['style'] = 'background-image:url("/images/slideshow/pattern.png"),url("' . CubeIT_View_Helper_ImageCms::getPath($slide['image']) . '");'; $attributes['data-time'] = $time; $attributes['class'] = 'slide'; - $attributes['style'] = 'background-image:url(' . CubeIT_View_Helper_ImageCms::getPath($slide['background']) . ');'; - $imgHolder = $this->view->htmlElement($image, 'div', array('class' => 'imgholder')); - $mask = $this->htmlElement($imgHolder, 'div', array('data-overlap' => $offset, 'class' => 'masque', 'style' => 'top:-' . $offset . 'px;height:' . (572 + $offset) . 'px;')); - $link = $slide['lien']; $link['label'] = $this->markupDotclear($slide['legende']); - $s .= $this->view->htmlElement($mask . $this->view->linkCMS($link), 'div', $attributes); + $s .= $this->view->htmlElement($this->view->linkCMS($link), 'div', $attributes); } - $options = array('arrows' => true, 'arrowspermanent' => true, 'autoMode' => true, 'transitionType' => 'slide', 'baseHeight' => 572, 'responsive' => true); + $options = array('arrows' => false, 'arrowspermanent' => false, 'autoMode' => true, 'transitionType' => 'slide', 'baseHeight' => 836, 'responsive' => true); $res .= $this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options)); $res .= ''; diff --git a/framework/application/views/scripts/common/content.phtml b/framework/application/views/scripts/common/content.phtml index 6ccce67..edde11c 100644 --- a/framework/application/views/scripts/common/content.phtml +++ b/framework/application/views/scripts/common/content.phtml @@ -8,8 +8,8 @@ foreach ($feeds as $feed) { } $content = $this->layout()->content . "\n"; -echo $this->render('common/header.phtml'); echo '
'; +echo $this->render('common/header.phtml'); if ($this->beforeMain) { echo $this->beforeMain; } diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index 3f2698a..5f1deec 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -8,10 +8,10 @@ if (!is_null($homepage)) { } ?>
-
+
link($this->image('/images/logo.svg', '', 318, 132), $home, array('class' => 'logo')); + echo $this->link($this->image('/images/logo.svg', "Cubedesigners Logo"), $home, array('class' => 'logo')); if ($this->currentPage && $this->currentPage->getTemplate() == 'home') { echo ''; } else { @@ -19,11 +19,11 @@ if (!is_null($homepage)) { } /* NAVIGATION */ $mainMenu = $this->navigation()->findOneById($this->localeDefault() . '/' . CubeIT_Navigation::MAIN); -// echo '☰'; + // echo '☰'; echo '
'; - echo ''; + echo ''; ?> -
+
\ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg index a5710f6..61e78f0 100644 --- a/images/logo.svg +++ b/images/logo.svg @@ -1,62 +1,66 @@ - + + y="0px" viewBox="-111.3 440.8 264.3 60.5" style="enable-background:new -111.3 440.8 264.3 60.5;" xml:space="preserve"> + - - - - - - - - - - - - + + + + + + + + + + + + - + - - + + diff --git a/images/slideshow/pattern.png b/images/slideshow/pattern.png new file mode 100644 index 0000000000000000000000000000000000000000..377cb3756ed388df93d072c3d259ec7608d5082f GIT binary patch literal 935 zcmaJ=%Wl&^6t#Frs8S_%1y&;m@lxX%+i_i6ajVo$s3jalX{2O>RL7nqR%(y&Ot6zB zJAQ$W;0IW+X2XgF;wRX!MPi)BDGP!n&rA25d+wbx?|a>s`+JY}1VPw$&z(M>ZR%=?Q2SCMSq7 z^Fa|`CDbe|am{P;b$JX$unu8!OS~2}@_N7~83vkkR1eUR4s=73HC=D$hd@EH29XL? zR9959fy{;iHlN6|W#Po^JDp7~zO%#`W2p&Yp661oN+g>?*)R-<6sRb59#N;ug!x51 zp|y&^!8FLCltm-~C8Iwk3ucL2>2(Qlx}{C%rcJzIu<%nTOQa%)|_ z*_t0G-0>N=_ND&yfIo`^*J%xkA7g~jclzr^?Y@eTaOZ*Wba?k9dVKi0d^&Es>wG-B GeD?=k0~zxG literal 0 HcmV?d00001 diff --git a/js/common.js b/js/common.js index 37fb3f0..29d1ebe 100644 --- a/js/common.js +++ b/js/common.js @@ -1,8 +1,8 @@ registerLoader(load_commons); function load_commons() { - $(window).on('cubeitresize', resize); - resize(); + $(window).on('cubeitresize', resize); + resize(); $(window).on('orientationchange', orientationchange); $(screen).on('orientationchange', orientationchange); @@ -11,7 +11,7 @@ function load_commons() { var $menu = $('#menu'), $menulink = $('.nav-icon'); - $menulink.click(function() { + $menulink.click(function () { $menulink.toggleClass('active'); $menu.toggleClass('active'); //$menulink.parent().toggleClass('menu-active'); @@ -19,7 +19,7 @@ function load_commons() { }); // Fallback to display content in case web fonts haven't triggered the display yet - setTimeout(function() { + setTimeout(function () { $('html').addClass('wf-active'); }, 4000); @@ -27,24 +27,10 @@ function load_commons() { function resize() { - //var ww = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - // - // - //if (ww < 1040) { - // $("html").addClass('small'); - //} else { - // $("html").removeClass('small'); - //} - } function orientationchange() { - - //if( $("[name='viewport']").length==0){ - // $("head").append(''); - //} - - if(Modernizr.mq('screen and (max-device-width: 530px)')) { + if (Modernizr.mq('screen and (max-device-width: 530px)')) { $("[name='viewport']").attr("content", "width=530"); } else { $("[name='viewport']").attr("content", "width=device-width, initial-scale=1.0"); diff --git a/js/home.js b/js/home.js new file mode 100644 index 0000000..182b193 --- /dev/null +++ b/js/home.js @@ -0,0 +1,27 @@ +registerLoader(load_home, true); + +function load_home() { + $(window).on('cubeitresize', resize_home); + $(document).on("beforechange afterchange", "#home-slideshow", resize_home); + resize_home(); +} + +function resize_home() { + $("#home-slideshow .slide").each(function () { + var c = $(this).find('.dotclear'); + var sh = $(this).height(); + + $(c).children().show(); + var ch = $(c).height(); + + var available = sh - 130; + + + if (ch > available) { + $(c).children().hide(); + $(c).find('h1').show(); + ch = $(c).height(); + } + $(c).css({marginTop: (sh - ch) / 2}); + }); +} \ No newline at end of file diff --git a/less/00-constants.less b/less/00-constants.less index 28ddc07..a0b5811 100644 --- a/less/00-constants.less +++ b/less/00-constants.less @@ -5,35 +5,4 @@ @yellow: #f6ae01; -.media { - overflow: hidden; -} - -.media--item { - float: left; - margin-right: 25px; -} - -.media--body { - overflow: hidden; -} - -.link(@color,@hovercolor) { - color: @color; - &:hover { - color: @hovercolor; - } -} - -.button(@textcolor,@backgroundcolor,@hovercolor,@hoverbackgroundcolor) { - color: @textcolor !important; - background-color: @backgroundcolor !important; - &:hover { - color: @hovercolor !important; - background-color: @hoverbackgroundcolor !important; - } -} - -.button(@textcolor,@backgroundcolor) { - .button(@textcolor, @backgroundcolor, #fff, @yellow); -} \ No newline at end of file +@import "01-mixins"; \ No newline at end of file diff --git a/less/01-mixins.less b/less/01-mixins.less new file mode 100644 index 0000000..b85f859 --- /dev/null +++ b/less/01-mixins.less @@ -0,0 +1,114 @@ +.media { + overflow: hidden; +} + +.media--item { + float: left; + margin-right: 25px; +} + +.media--body { + overflow: hidden; +} + +.link(@color,@hovercolor) { + color: @color; + &:hover { + color: @hovercolor; + } +} + +.button(@textcolor,@backgroundcolor,@hovercolor,@hoverbackgroundcolor) { + color: @textcolor !important; + background-color: @backgroundcolor !important; + &:hover { + color: @hovercolor !important; + background-color: @hoverbackgroundcolor !important; + } +} + +.button(@textcolor,@backgroundcolor) { + .button(@textcolor, @backgroundcolor, #fff, @yellow); +} + +.content-center() { + max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side + min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale + padding-right: 34px; + padding-left: 34px; + margin: 0 auto; +} + +.slideshowmixin() { + + height: 572px; + position: relative; + width: 100%; + overflow: visible; + + .slide { + position: absolute; + display: none; + background-repeat: repeat-x; + background-position: 0 100%; + width: 100%; + height: 572px; + overflow: visible; + .masque { + width: 100%; + position: relative; + overflow: hidden; + .imgholder { + width: 1600px; + height: 572px; + position: relative; + margin: 0 auto; + overflow: visible; + + img, canvas { + + } + } + } + } + a { + margin: 0; + padding: 0; + } + + .arrows { + position: absolute; + bottom: 18px; + display: block; + width: 77px; + height: 38px; + white-space: nowrap; + z-index: 3; + border: 30px solid transparent; + a { + background-color: transparent; + width: 37px; + height: 38px; + top: auto !important; + display: inline-block; + position: static; + border-radius: 3px; + + //padding: 0 0 25px; + &:hover { + background-color: @yellow; + } + + &.prev { + background-image: url('/images/slideshow/arrows.png'); + background-position: 10px 8px; + margin-right: 10px; + } + + &.next { + background-image: url('/images/slideshow/arrows.png'); + background-position: -26px 8px; + } + } + } +} \ No newline at end of file diff --git a/less/common.less b/less/common.less index 718ed8f..25f0f15 100644 --- a/less/common.less +++ b/less/common.less @@ -16,11 +16,7 @@ img.responsive { } .content, .cubeit-content { - max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side - min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale - margin: 0 auto; - padding-right: 34px; - padding-left: 34px; + .content-center(); position: relative; } diff --git a/less/header.less b/less/header.less index 22c4276..0ec8af0 100644 --- a/less/header.less +++ b/less/header.less @@ -9,6 +9,7 @@ header { ul { text-transform: uppercase; font-family: @Klavika; + font-weight: 400; font-size: 16px; list-style: none; @@ -43,10 +44,9 @@ header { } .logo { - width: 318px; - height: 132px; + position: absolute; - top: 0; + top: 36px; &:hover { .svg { diff --git a/less/home.less b/less/home.less index 4cbfec4..2af0977 100644 --- a/less/home.less +++ b/less/home.less @@ -1,5 +1,11 @@ @import "00-constants"; +header { + background-color: transparent !important; + position: relative; + z-index: 4; +} + /* Home Title */ .home-title { padding: 50px 0px 50px 0; @@ -15,10 +21,61 @@ } } -#header { - min-height: 168px !important; -} - nav.active[role="navigation"] { padding-bottom: 50px !important; +} + +/* Home Slideshow */ +#home-slideshow { + overflow: visible; + margin-top: -130px; + .slides-holder { + overflow: visible; + .slides { + .slideshowmixin(); + .slide { + background-repeat: repeat, no-repeat; + background-size: auto, cover; + background-position: 0 0, 50% 0; + background-blend-mode: multiply; + > div { + + text-align: center; + color: #fff; + .content-center(); + margin: 0 auto; + + h1 { + font-size: 85px; + text-transform: none; + font-weight: 400; + } + + h2 { + font-weight: 300; + text-transform: none; + font-size: 35px; + } + + p { + margin: 45px 0 0 0; + } + + img { + margin: 0 15px; + } + } + + a { + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + opacity: 0; + } + } + } + } } \ No newline at end of file diff --git a/less/slideshow.less b/less/slideshow.less index fdc2c0c..64baf3a 100644 --- a/less/slideshow.less +++ b/less/slideshow.less @@ -1,29 +1,5 @@ @import "00-constants"; -/* Home Slideshow */ -#home-slideshow { - overflow: visible; - .slides-holder { - overflow: visible; - - .slides { - .slideshowmixin(); - - .slide { - a { - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - opacity: 0; - } - } - } - } -} - .slideshowscroll { .slideshowmixin(); @@ -78,76 +54,3 @@ float: right; } -.slideshowmixin() { - - height: 572px; - position: relative; - width: 100%; - overflow: visible; - - .slide { - position: absolute; - display: none; - background-repeat: repeat-x; - background-position: 0 100%; - width: 100%; - height: 572px; - overflow: visible; - .masque { - width: 100%; - position: relative; - overflow: hidden; - .imgholder { - width: 1600px; - height: 572px; - position: relative; - margin: 0 auto; - overflow: visible; - - img, canvas { - - } - } - } - } - a { - margin: 0; - padding: 0; - } - - .arrows { - position: absolute; - bottom: 18px; - display: block; - width: 77px; - height: 38px; - white-space: nowrap; - z-index: 3; - border: 30px solid transparent; - a { - background-color: transparent; - width: 37px; - height: 38px; - top: auto !important; - display: inline-block; - position: static; - border-radius: 3px; - - //padding: 0 0 25px; - &:hover { - background-color: @yellow; - } - - &.prev { - background-image: url('../images/slideshow/arrows.png'); - background-position: 10px 8px; - margin-right: 10px; - } - - &.next { - background-image: url('../images/slideshow/arrows.png'); - background-position: -26px 8px; - } - } - } -} \ No newline at end of file -- 2.39.5