made the home slideshow responsive

made the menu working on home

diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php
index 7cd2fc290fc5ad5173e8a8463e217c348fdc4fdc..2072bf8f01b214d006607fa5580b50f0c8c0c6c3 100644 (file)
--- a/framework/application/views/helpers/HomeSlideshow.php
+++ b/framework/application/views/helpers/HomeSlideshow.php
@@ -10,17 +10,17 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac
                $slides = $slides['slides'];
 
                $res = '<section>';
-               $res.='<div id="home-slideshow">';
-               $res.='<div class="slides-holder">';
+               $res .= '<div id="home-slideshow">';
+               $res .= '<div class="slides-holder">';
 
                $s = '';
 
                foreach ($slides as $id => $slide) {
                        if (null !== $slide['mask']) {
-                               $image = $this->view->imageMasked($slide['image'], $slide['mask'], $slide['legende']);
+                               $image = $this->view->imageMasked($slide['image'], $slide['mask']);
                                $d = CubeIT_View_Helper_Image::$lastDimensions;
                        } else {
-                               $image = $this->view->imageCms($slide['image'], $slide['legend']);
+                               $image = $this->view->imageCms($slide['image']);
                        }
                        $offset = $d[1] - 572;
 
@@ -34,24 +34,19 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac
                        $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('class' => 'masque', 'style' => 'top:-' . $offset . 'px;height:' . (572 + $offset) . 'px;'));
+                       $mask = $this->htmlElement($imgHolder, 'div', array('data-overlap' => $offset, 'class' => 'masque', 'style' => 'top:-' . $offset . 'px;height:' . (572 + $offset) . 'px;'));
 
                        $link = $slide['lien'];
-                       $sl = $this->view->htmlElement($mask, 'div', $attributes);
-                       $link['label'] = $sl;
-
-                       $s .= $this->view->linkCMS($link);
+                       $link['label'] = $this->markupDotclear($slide['legende']);
+                       $s .= $this->view->htmlElement($mask . $this->view->linkCMS($link), 'div', $attributes);
                }
 
-               $options = array('arrows' => true,
-                       'arrowspermanent' => true,
-                       'autoMode' => true,
-                       'transitionType' => 'slide');
-               $res.=$this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options));
+               $options = array('arrows' => true, 'arrowspermanent' => true, 'autoMode' => true, 'transitionType' => 'slide', 'baseHeight' => 572);
+               $res .= $this->htmlElement($s, 'div', array('class' => 'slides slideshow', 'data-options' => $options));
 
-               $res.='</div>';
-               $res.='</div>';
-               $res.='</section>';
+               $res .= '</div>';
+               $res .= '</div>';
+               $res .= '</section>';
 
                return $res;
        }

diff --git a/js/slideshow.js b/js/slideshow.js
index a22d4c7c60dd65b53b05d78e0ada34379c45525f..946a688d5e57f1d7d5df83dbc99fbe075b94e184 100644 (file)
--- a/js/slideshow.js
+++ b/js/slideshow.js
@@ -6,18 +6,44 @@ function loadCarrousel() {
         var ww = $(window).width();
         var cw = Math.min(960, ww - 70);
         var m = (ww - 1600) / 2;
-        $(s).find(".imgholder").css({marginLeft: m});
         $(s).find(".arrows").css({left: cw + ((ww - cw) / 2) - 77 - 10 - 30});
 
-        if (ww < 1024) {
-            var ratio = 1024 / 650;
-            var h = ww / ratio;
+        var slideshowBaseWidth = 1024;
+        var sw = Math.min(ww, slideshowBaseWidth);
+
+        $(".slideshowcontinuous,.slideshow").each(function () {
+            var baseHeight = parseInt($(this).data('options').baseHeight);
+            var ratio = slideshowBaseWidth / baseHeight;
+            var h = sw / ratio;
+            var scale = h / baseHeight;
+
+
             try {
-                $(".slideshowcontinuous").data('slideshowContinuous').setHeight(h);
+                $(this).data('slideshow').setHeight(h);
+
+                if ($(this).parents('#home-slideshow').length == 1) {
+                    $(this).find('.slide').each(function () {
+                        var masque = $(this).find('.masque');
+                        var overlap = parseInt($(masque).data('overlap'));
+
+                        var ih = (baseHeight + overlap) * scale;
+                        $(this).find(".masque").css({
+                            height: ih,
+                            top: -1 * overlap * scale
+                        });
+
+                        var ml = (ww - 1600 * scale) / 2;
+                        fb(ml);
+
+                        $(this).find('.masque .imgholder').css('marginLeft', ml);
+                        $(this).find(".masque .imgholder img").css({height: ih, width: 'auto'});
+                    });
+                }
             } catch (err) {
 
             }
-        }
+        });
+
     });
 
 }

diff --git a/less/home.less b/less/home.less
index 2e93768d9052d56507b19f569902823269e1c755..7c01ddfd1181e9b6cc2009dd158a27387570c940 100644 (file)
--- a/less/home.less
+++ b/less/home.less
@@ -1,6 +1,6 @@
 /* Home Title */
 .home-title {
-    padding: 50px 0px 50px 0;
+       padding: 50px 0px 50px 0;
        h1 {
                font-weight: 300;
                text-align: center;
@@ -13,6 +13,10 @@
        }
 }
 
-#header{
-       height:168px !important;
+#header {
+       min-height: 168px !important;
+}
+
+nav.active[role="navigation"] {
+       padding-bottom: 50px !important;
 }
\ No newline at end of file

diff --git a/less/slideshow.less b/less/slideshow.less
index bda60bc5c2d071e775e220a2e41232f71c617a16..78311b9f593dbc6f155fce577d1930552b72cf10 100644 (file)
--- a/less/slideshow.less
+++ b/less/slideshow.less
@@ -1,61 +1,70 @@
 /* Home Slideshow */
 #home-slideshow {
-       height:572px;
-       overflow:visible;
-    .slides-holder {
-               height:572px;
-               overflow:visible;
+       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{
+.slideshowscroll {
        .slideshowmixin();
 
-       .slidescont{
-               overflow:hidden;
+       .slidescont {
+               overflow: hidden;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
 
        }
-       .slidesfree{
-               width:100000px;
+       .slidesfree {
+               width: 100000px;
        }
-       .slides{
+       .slides {
                display: inline-block;
                overflow: visible;
                max-width: none;
-               white-space:nowrap;
-               position:relative;
-
-
-               .slide{
-                       position:static;
-                       display:inline-block !important;
-                       margin:0 0 0 20px;
-                       height:439px !important;
-                       width:auto !important;
+               white-space: nowrap;
+               position: relative;
+
+               .slide {
+                       position: static;
+                       display: inline-block !important;
+                       margin: 0 0 0 20px;
+                       height: 439px !important;
+                       width: auto !important;
                }
        }
-       height:439px;
+       height: 439px;
 }
 
-.slideshowcontinuous{
+.slideshowcontinuous {
 
        .slideshowmixin();
-       .arrows{
-               a{
-                       background-color:rgba(56,133,224,0.25);
-                       background-color:rgba(0,0,0,0.25);
+       .arrows {
+               a {
+                       background-color: rgba(56, 133, 224, 0.25);
+                       background-color: rgba(0, 0, 0, 0.25);
                }
        }
-       .slide{
+       .slide {
                background-repeat: no-repeat;
-               background-size:cover;
-               background-position:50% 50% !important;
+               background-size: cover;
+               background-position: 50% 50% !important;
        }
 
 }
@@ -64,64 +73,63 @@
        padding: 25px 0 0 0;
        margin-right: 30px;
        font-size: 18px;
-       float:right;
+       float: right;
 }
 
-.slideshowmixin(){
+.slideshowmixin() {
 
-       height:572px;
-       position:relative;
-       width:100%;
-       overflow:visible;
+       height: 572px;
+       position: relative;
+       width: 100%;
+       overflow: visible;
 
        .slide {
-               position:absolute;
-               display:none;
+               position: absolute;
+               display: none;
                background-repeat: repeat-x;
                background-position: 0 100%;
-               width:100%;
-               height:572px;
-               overflow:visible;
-               .masque{
-                       width:100%;
+               width: 100%;
+               height: 572px;
+               overflow: visible;
+               .masque {
+                       width: 100%;
                        position: relative;
-                       overflow:hidden;
-                       .imgholder{
-                               width:1600px;
-                               height:572px;
+                       overflow: hidden;
+                       .imgholder {
+                               width: 1600px;
+                               height: 572px;
                                position: relative;
-                               margin:0 auto;
-                               overflow:visible;
+                               margin: 0 auto;
+                               overflow: visible;
 
-                               img,canvas{
+                               img, canvas {
 
                                }
                        }
                }
        }
        a {
-               margin:0;
+               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;
+       .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;
+                       top: auto !important;
+                       display: inline-block;
+                       position: static;
+                       border-radius: 3px;
 
                        //padding: 0 0 25px;
                        &:hover {