From d4cceb33a82e78d238a0ec6ab7f9cb01565cd573 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 9 Sep 2019 16:42:40 +0200
Subject: [PATCH] set sizes according to webflow | wait #3016 @0.5

---
 resources/js/carrousel.js                  | 37 +++++++++++++++-------
 resources/styles/components/carrousel.styl |  4 ++-
 resources/views/pages/home.blade.php       |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/resources/js/carrousel.js b/resources/js/carrousel.js
index cec155d..6a35dba 100644
--- a/resources/js/carrousel.js
+++ b/resources/js/carrousel.js
@@ -1,6 +1,7 @@
 import TweenMax from "gsap/TweenMax";
 import TimelineMax from "gsap/TimelineMax";
 import * as Hammer from 'hammerjs';
+import fa from "../../public/vendor/adminlte/bower_components/moment/src/locale/fa";
 
 window.Hammer = Hammer.default;
 
@@ -85,22 +86,34 @@ window.Hammer = Hammer.default;
 
         resize: function () {
             let $this = this;
-            this.element.find('.img-slider').each(function () {
-                let width = $this.element.find('.slide-img').eq($this.index).width(),
-                    height = $this.element.find('.slide-img').eq($this.index).height();
 
+            var cw = this.element.outerWidth() / 2;
+            var ch = 720;
+
+            console.log(cw, ch);
+
+            this.element.find('.img-slider').each(function () {
                 let naturalHeight = $(this).prop('naturalHeight'),
                     naturalWidth = $(this).prop('naturalWidth');
 
                 let getAllImg = new Image();
                 getAllImg.src = $(this).attr("src");
 
-                let widthFactor = width / naturalWidth,  // coef multiplicateur width
-                    heightFactor = height / naturalHeight; // coef multiplicateur height
-
-                TweenMax.set($(this), {
-                    width: naturalWidth * Math.max(widthFactor, heightFactor),
-                    height: naturalHeight * Math.max(widthFactor, heightFactor)
+                let widthFactor = cw / naturalWidth,  // coef multiplicateur width
+                    heightFactor = ch / naturalHeight; // coef multiplicateur height
+
+                var factor = Math.max(widthFactor, heightFactor);
+                console.log(factor);
+                var iw = naturalWidth * factor;
+                var ih = naturalHeight * factor;
+                var left = (cw * 0.5) + (cw - iw) / 2;
+                var top = (ch - ih) / 2;
+
+                $(this).css({
+                    width: iw,
+                    height: ih,
+                    top: top,
+                    left: left
                 });
             });
 
@@ -174,8 +187,8 @@ window.Hammer = Hammer.default;
                     opacity: 0,
                 }, {ease: Power1.easeOut, opacity: 1, x: 0}, 0.6);
 
-                tl.from($this.nextContainerImg, 1.2 * $this.multiplyDuration, {
-                    x: 150 * direction,
+                tl.from($this.nextContainerImg, 0.7 * $this.multiplyDuration, {
+                    x: 100 * direction,
                     ease: Power2.easeInOut
                 }, 0); // initial delay value 1.5s
                 tl.to($this.currentContainerImg, 1.2 * $this.multiplyDuration, {
@@ -199,7 +212,7 @@ window.Hammer = Hammer.default;
                 tl2.to($this.currentSlideIndex, 0.7, {
                     transform: 'translateX(' + ($this.negativePercent + '%') + ')',
                     ease: Power1.easeOut
-                },0);
+                }, 0);
 
                 tl2.from($this.nextSlideIndex, 0.7, {
                     transform: 'translateX(' + ($this.percent + '%') + ')',
diff --git a/resources/styles/components/carrousel.styl b/resources/styles/components/carrousel.styl
index 57da66a..e951b48 100644
--- a/resources/styles/components/carrousel.styl
+++ b/resources/styles/components/carrousel.styl
@@ -58,8 +58,9 @@
   .slider
     width: 100%
     position relative
-    height 80vh
+    height 620px
     @media (max-width 769px)
+      height calc(100vh - 134px)
       overflow hidden
 
   .slide
@@ -72,6 +73,7 @@
     overflow hidden
     height 100%
     position relative
+    max-height 720px
 
   .slider-indicator
     position absolute
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 85723bc..02caa75 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -21,7 +21,7 @@
                 @foreach($page->get('slideshow') as $i=>$slide)
                     <div class="column-wrapper absolute slide hide">
 
-                        <column class="slide-content slide-txt pt-2v pr-1v pb-2v">
+                        <column class="slide-content slide-txt pt-1v pr-1v pb-2v">
                             <div class="mobile-bg"
                                  style="background-image: url({{$page->getImageURLByCollection($slide['image'])}})"></div>
 
-- 
2.39.5