done #2021 @1

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 4540e08e5fe5c2133278324730923952ecd360a2..4c23141d8ea26842f9aaadc0700f2d4bac0f4af7 100644 (file)
--- 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 2699f5004e981089ad8dd59a61b73ca081945198..fdc2126aa86bf600fe18aa4a568413879780bc0e 100644 (file)
--- 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 f53b38095f482d57321e67ac4320debaade1b39d..df38fb9d6af19e8b00fce4181397252ac3889e4b 100644 (file)
--- 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;
                                        }