From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Apr 2018 14:37:20 +0000 (+0200)
Subject: done #2021 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e43097c9317c85deecac3e05d498e96ba9231839;p=fluidbook-html5.git

done #2021 @1
---

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 4540e08e..4c23141d 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -278,22 +278,25 @@ FluidbookLoader.prototype = {
         var img = this.loadImage(src, width, height, type, callback);
         return $(img).get(0).outerHTML;
     },
-    getThumbImage: function (page, div, shade) {
+    getThumbImage: function (page, div, shade, width) {
         var returnHTML = false;
         if (div === null || div == undefined) {
             div = $('<div />');
         }
+        if (width == undefined) {
+            width = 100;
+        }
 
         left = ((page % 2 == 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl);
 
-        var h = this.fluidbook.datas.thumbHeight;
-        var s = Math.floor((page - 1) / 100);
-        var row = Math.floor(((page - (s * 100)) - 1) / 10);
+        var h = width * (this.fluidbook.datas.thumbHeight / 100);
+        var s = Math.floor((page - 1) / width);
+        var row = Math.floor(((page - (s * width)) - 1) / 10);
         var col = (page - 1) % 10;
         if (col < 0) {
             col += 10;
         }
-        var spriteleft = col * 100;
+        var spriteleft = col * width;
         var spritetop = row * h;
 
         var shadeImage = '';
@@ -310,13 +313,23 @@ FluidbookLoader.prototype = {
             shadeImage = 'url("images/shadows/thumbnails/' + i + '.png"),';
 
             shadePosition = p + " 0%,";
-            shadeSize = '50px ' + h + 'px,';
+            shadeSize = (width / 2) + 'px ' + h + 'px,';
+        }
+
+        var thumbImage = 'url("data/thumbnails/s' + s + '.jpg")';
+        var thumbPosition = (-spriteleft) + 'px ' + (-spritetop) + 'px';
+        var thumbSize = 'auto auto';
+
+        if (width != 100) {
+            thumbImage = 'url("data/background/150/t' + page + '.jpg")';
+            thumbPosition = '0px 0px';
+            thumbSize = '100% 100%';
         }
 
         $(div).css({
-            backgroundImage: shadeImage + 'url("data/thumbnails/s' + s + '.jpg")',
-            backgroundPosition: shadePosition + '' + (-spriteleft) + 'px ' + (-spritetop) + 'px',
-            backgroundSize: shadeSize + 'auto auto'
+            backgroundImage: shadeImage + thumbImage,
+            backgroundPosition: shadePosition + thumbPosition,
+            backgroundSize: shadeSize + thumbSize
         }).addClass('img');
         return $(div).get(0).outerHTML;
     },
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 2699f500..fdc2126a 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -275,8 +275,8 @@ FluidbookMenu.prototype = {
         view += '</div>';
         $("#view").append('<div class="mview" data-menu="bookmarks-help">' + view + '</div>');
 
-        this.fluidbook.loader.getThumbImage(2, $("#view .thumb.left .img"), false, 147);
-        this.fluidbook.loader.getThumbImage(3, $("#view .thumb.right .img"), false, 147);
+        this.fluidbook.loader.getThumbImage(2, $("#view .thumb.left .img"), true, 147);
+        this.fluidbook.loader.getThumbImage(3, $("#view .thumb.right .img"), true, 147);
 
         if (callback != undefined) {
             callback();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index f53b3809..df38fb9d 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1079,7 +1079,7 @@ html.ios body.portrait #interface {
 				text-align: center;
 			}
 
-			@w: 100px;
+			@w: 147px;
 			.doubleThumb {
 				position: relative;
 				width: @w*2;
@@ -1099,7 +1099,7 @@ html.ios body.portrait #interface {
 						.img {
 							&:after {
 								left: auto;
-								right: -20px;
+								right: -24px;
 							}
 						}
 					}
@@ -1115,10 +1115,10 @@ html.ios body.portrait #interface {
 							content: "";
 							position: absolute;
 							z-index: -1;
-							top: -20px;
-							left: -20px;
-							width: 75px;
-							height: 75px;
+							top: -24px;
+							left: -24px;
+							width: 100px;
+							height: 100px;
 							background-color: @menu-background;
 							border: 2px solid #fff;
 							border-radius: 50%;
@@ -1127,8 +1127,8 @@ html.ios body.portrait #interface {
 					}
 
 					.bookmark {
-						width: 45px;
-						height: 45px;
+						width: 60px;
+						height: 60px;
 						z-index: 2;
 					}