wait #2715 @0.5

diff --git a/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js b/js/libs/fluidbook/mobilefirst/fluidbook.mobilefirst.slider.js
index d7c8bc7e60e191885a2bd974258fdc61ca044bc5..1c18768954057ae7aa62d65c3d63f88dff527d21 100644 (file)
--- 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 8b6b354af8a30d7994ce9d470e2a05d86b4c8abc..9aa97eda302e088e1a2fbc78edc8c50b06c14499 100644 (file)
--- 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;