From f5f3b4da13d37dec138f44d28d745010b399a03b Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 13 May 2019 13:47:00 +0200
Subject: [PATCH] wait #2715 @0.5

---
 .../fluidbook.mobilefirst.slider.js           | 23 +++++++++++++++----
 style/mobilefirst.less                        |  1 +
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js b/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js
index d7c8bc7e..1c187689 100644
--- a/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js
+++ b/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js
@@ -86,18 +86,33 @@ FluidbookMobileFirstSlider.prototype = {
     },
 
     resize: function () {
+        this.element.css('transform', '');
         var h = this.element.outerHeight();
         var fluidbook = $("#fluidbook").get(0).getBoundingClientRect();
 
+
+        // Avaialbel space
+        var ah = this.fluidbook.resize.hh - 50;
+        var aw = ((this.fluidbook.resize.ww - fluidbook.width) / 2);
+
+        // Available space with margins
+        var ahm = ah - 140;
+        var awm = aw - 120;
+
+        // Calculating scale
+        var scale = Math.min(1, ahm / h, awm / this.width);
+        this.element.css('transform', 'scale(' + scale + ')');
+
         var slider = {};
-        slider.top = 50 + (this.fluidbook.resize.hh - 50 - h) / 2;
-        slider.left = (((this.fluidbook.resize.ww - fluidbook.width) / 2) - this.width) / 2;
-        if (slider.left < 60 || slider.top < 70) {
+        slider.top = 50 + (ah - (h * scale)) / 2;
+        slider.left = (aw - (this.width * scale)) / 2;
+
+        if (scale < 0.5) {
             this.element.addClass('hiddenresp');
-            return;
         } else {
             this.element.removeClass('hiddenresp');
         }
+
         this.element.css(slider);
         this.updateScroll();
     },
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index 8b6b354a..9aa97eda 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -225,6 +225,7 @@
   transition: opacity 250ms;
   opacity: 1;
   pointer-events: none;
+  transform-origin:0 0;
 
   &.hidden, &.hiddenresp, &.hiddenzoom {
     opacity: 0;
-- 
2.39.5