From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 10 May 2019 12:01:43 +0000 (+0200)
Subject: wait #2707 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=417eb72c302b11fe9942e60e41fc3d91e09293ee;p=fluidbook-html5.git

wait #2707 @2
---

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 2112688b..6526f36a 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -23,9 +23,16 @@ FluidbookLoader.prototype = {
         this.shadeRight = this.loadImage('images/shadows/pages/right.png');
     },
 
-    getPageDimensions: function (page) {
+    getPageDimensions: function (page, width) {
         var dim = this.fluidbook.datas.pagesDimensions[page];
-        return {width: dim[0], height: dim[1]};
+        var height;
+        if (undefined === width) {
+            width = dim[0];
+            height = dim[1];
+        } else {
+            height = dim[1] * (width / dim[0]);
+        }
+        return {width: width, height: height};
     },
 
     getVersionToLoad: function (page) {
diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 838b85e0..f112daa1 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -111,8 +111,13 @@ FluidbookMobileFirst.prototype = {
     resizeIndex: function () {
         $("#indexViewHolder").css('width', this.fluidbook.datas.pages * 130);
         setTimeout(function () {
-            $("#indexView").perfectScrollbar('update');
+            $("#indexViewHolder").perfectScrollbar('update');
+            $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
         }, 500)
-        $("#indexView").perfectScrollbar();
+        $("#indexViewHolder").perfectScrollbar({
+            suppressScrollY: true,
+            useBothWheelAxes: true
+        });
+        $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
     },
 }
\ No newline at end of file
diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index 91943f38..30dd54c6 100644
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -94,7 +94,14 @@ FluidbookIndex.prototype = {
                 }
 
                 if (i > 0) {
-                    ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
+                    var h = '';
+                    var pnt = '';
+                    if (this.fluidbook.mobilefirst.enabled) {
+                        var ph = this.fluidbook.loader.getPageDimensions(i, 100).height;
+                        h = ' style="height:' + ph + 'px;"'
+                        pnt = ' style="top:' + (ph - 5) + 'px;"';
+                    }
+                    ix1 += '<div class="thumb ' + s1 + '"' + h + '><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, true) + '</a><span class="number"' + pnt + '>' + this.fluidbook.physicalToVirtual(i) + '</span>';
                     if (this.fluidbook.bookmarks.enabled) {
                         ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
                     }
@@ -112,7 +119,6 @@ FluidbookIndex.prototype = {
                     s2 = 'left'
                 }
                 if (!this.singleMode) {
-
                     if (j <= this.fluidbook.contentlock.getMaxPage()) {
                         ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
                         if (this.fluidbook.bookmarks.enabled) {
@@ -132,7 +138,13 @@ FluidbookIndex.prototype = {
                 } else {
                     ix = ix1;
                 }
-                this.normalHTML += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '">' + ix;
+
+                var dth = '';
+                if (this.fluidbook.mobilefirst.enabled) {
+                    dth = ' style="height:' + ph + 'px;"';
+                }
+
+                this.normalHTML += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '"' + dth + '>' + ix;
                 this.normalHTML += '</div>';
             }
             this.normalHTML += '</div></div></div>';
diff --git a/style/fluidbook.less b/style/fluidbook.less
index d5062af8..bbc6f776 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1805,6 +1805,7 @@ form input[type="text"], form input[type="email"] {
     text-align: center;
     box-sizing: content-box;
     border-radius: 3px;
+    vertical-align: top;
 
     &.singlemode {
       width: 100px;
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index 433bc378..3e398b27 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -61,13 +61,34 @@
   #indexView {
     min-width: 100%;
     height: 100%;
-    overflow-x: auto;
-    padding: 25px;
+    overflow: hidden !important;
 
     #indexViewHolder {
+      min-width: 100%;
+      max-width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
       margin-top: 5px;
+      position: relative;
+      height: 100%;
+      white-space: nowrap;
+      padding: 25px 20px;
+
+      .ps__rail-x {
+        margin:0 25px;
+        transform: translate(0, -25px) !important;
+        opacity: 1 !important;
+      }
     }
   }
+
+  .thumb {
+    &:before {
+      display: none;
+    }
+
+    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  }
 }