WIP #1736 @4

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 13e2e4d00dd3d6836bd05bb63f61411fd7e297d4..104ae0633e722f665ca38226631c5e92f83e7dfe 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -55,7 +55,10 @@ FluidbookHelp.prototype = {
         // When the menu position is inverted, the icon help lines need\r
         // to be drawn in the reverse order to avoid text/line overlaps\r
         var tooltips = this.fluidbook.datas.invertMenuPosition ? $(tooltipSelector).get().reverse() : $(tooltipSelector);\r
-               var h = 20 + ($(tooltipSelector).length - 1) * 25;\r
+               var navScale = this.fluidbook.resize.navScale;\r
+        var initialHeight = 20 * navScale; // Buffer in line height away from icons\r
+               var hStep = 25 * navScale; // The step height - the difference in height between the icon label lines\r
+               var h = initialHeight + ($(tooltipSelector).length - 1) * hStep;\r
                var ww = $(window).width();\r
 \r
                $(tooltips).each(function() {\r
@@ -65,30 +68,30 @@ FluidbookHelp.prototype = {
                        }\r
 \r
                        var icon = $(this).find('.nav-icon:visible:first'); // Must get first visible icon so "toggle" icons work\r
-                       if(icon.length>0) {\r
-                var offset = icon.offset();\r
-\r
-                var left;\r
+                       if (icon.length > 0) {\r
+                var offset = icon.offset(),\r
+                                       iconWidth = icon.outerWidth() * navScale,\r
+                                       left;\r
 \r
                 if ($this.fluidbook.l10n.dir == 'ltr') {\r
-                    left = offset.left + (icon.outerWidth() / 2);\r
+                    left = offset.left + (iconWidth / 2);\r
                 } else {\r
-                    left = (ww - offset.left - (icon.outerWidth() / 2)) * -1;\r
+                    left = (ww - offset.left - (iconWidth / 2)) * -1;\r
                 }\r
 \r
+                // Since the outer container has been scaled, we need to factor that in\r
+                               // for the left position so the lines still meet with the icons\r
+                left = left / navScale;\r
+\r
                 var c = 'nav';\r
                 if ($(this).parents("#afterSearch").length > 0) {\r
                     c = 'afterSearch';\r
                 }\r
                 help += '<div class="icon ' + c + '" style="padding-top:' + h + 'px;left:' + left + 'px;"><span>' + text + '</span></div>';\r
-                h -= 25;\r
+                h -= hStep;\r
             }\r
                });\r
-               // $("#horizontalNav").transform({\r
-               //      scale: [scale, scale]\r
-               // }, {\r
-               //      preserve: true\r
-               // });\r
+\r
                help += '</div>';\r
 \r
                // Interface\r
@@ -221,33 +224,41 @@ FluidbookHelp.prototype = {
             var sliderHelp = $this.view.find('.slider');\r
             var sliderCursor = $('#slidercursor .visible');\r
             sliderHelp.css({\r
-                bottom: hh - sliderCursor.offset().top,\r
-                left: sliderCursor.offset().left + (sliderCursor.width() / 2)\r
+                bottom: (hh - sliderCursor.offset().top) * navScale,\r
+                left: sliderCursor.offset().left + (sliderCursor.width() / 2 * navScale),\r
+                               transformOrigin: '0 0'\r
             });\r
         };\r
         positionSliderLabel(); // Run immediately\r
                setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct\r
 \r
-               $("#helpView #icons")\r
-                       .css('top', menuHeightScaled)\r
-                       .transform({\r
-                       scale: [navScale, navScale],\r
-                       origin: ['0%', '0%']\r
+               this.view.find('#icons').css({\r
+                       'top': menuHeightScaled,\r
+                       'transform': 'scale('+ navScale +')',\r
+                       'transformOrigin': '0 100%'\r
                });\r
 \r
                $("#helpView #icons").css({\r
                        fontSize: (14 / navScale) * interfaceScale\r
                });\r
 \r
-               $("#helpView .illustration").transform({\r
-                       scale: [interfaceScale, interfaceScale],\r
-                       origin: ['50%', '50%']\r
+               // $("#helpView .illustration").transform({\r
+               //      scale: [interfaceScale, interfaceScale],\r
+               //      origin: ['50%', '50%']\r
+               // });\r
+\r
+               this.view.find('.illustration').css({\r
+                       transform: 'translate(-50%, -50%) scale('+ interfaceScale +')'\r
                });\r
 \r
-               $("#helpView .interface").find('.last,.next,.first,.previous').transform({\r
+               // ToDo: refactor bookmarkLabel code so that a scale transform can be applied without messing up positioning (wrap all 3 elements in a div? Handle RTL differences)\r
+\r
+               $("#helpView .interface").find('> div').transform({\r
                        scale: [interfaceScale, interfaceScale]\r
                })\r
 \r
+               // ToDo: refactor this and try to move transform-origins to CSS. Make sure that .first and .last label positions factor in interfaceScale\r
+\r
                $("#helpView .interface").find('.last').transform({\r
                        origin: ['100%', '100%']\r
                }, {\r
@@ -273,7 +284,7 @@ FluidbookHelp.prototype = {
                        preserve: true\r
                });\r
 \r
-               this.view.find('.illustration').css('margin-top', (hh - 200 * interfaceScale) / 2);\r
+               //this.view.find('.illustration').css('margin-top', (hh - 200 * interfaceScale) / 2);\r
        },\r
        clearTimeout: function() {\r
                clearTimeout(this.autoTimeout);\r

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index a7b61e28020c9ef7e4ed25dfefbe78b8f4bc1eb9..c5be9aeb34b24d8c852be77cacfcc0138433e699 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -15,6 +15,7 @@ function FluidbookResize(fluidbook) {
     this.textScale = 2;
     this.bookScale = 1;
     this.interfaceScale = 1;
+    this.navScale = 1;
     this.ww = $(window).width();
     this.hh = $(window).height();
     this.init();
@@ -75,6 +76,8 @@ FluidbookResize.prototype = {
         this.interfaceScale = interfaceScale;
 
         var navScale = interfaceScale * parseInt(this.fluidbook.datas.mobileNavScale) / 100;
+        this.navScale = navScale;
+
         var cssInterfaceScale = [interfaceScale, interfaceScale];
         var cssNavScale = [navScale, navScale];
 
@@ -161,10 +164,15 @@ FluidbookResize.prototype = {
             bottom: audioButtonPosition
         });
 
-        $("#nav,#logo,footer,#searchHints").transform({
+        $("#logo,footer,#searchHints").transform({
             scale: navScale
         });
 
+        // Scale horizontal size and positioning. Transform origin is handled in CSS for LTR/RTL variations
+        $('#horizontalNav').css({
+            'transform': 'translateY(-'+ 50 * navScale +'%) scale('+ navScale +')'
+        })
+
         var headerHeight = this.fluidbook.datas.menuHeight * navScale;
         $('header').css({
             height: headerHeight,

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 9252c7b34a55ad79470a6e0f4fb1a06589341c25..345dcc343845cf3fc810a1eae3106aa59866993c 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1425,8 +1425,18 @@ ul.chapters.shareList a.level0 .svg-icon {
        overflow: hidden;
 
        .illustration {
+               position: absolute;
+               top: 50%;
+               left: 50%;
+               //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done
                text-align: center;
                font-size: 20px;
+
+               img {
+                       max-width: 100%;
+                       height: auto;
+               }
+
                p {
                        position: static;
                }

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index dd526777c73e6e9c892652165e22f003ecbed794..9dfda2c0de42e2469ecab2ceccd2b9519f7d60a7 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -1,7 +1,7 @@
 #horizontalNav {
        position: absolute;
        top: 50%;
-       transform: translateY(-50%);
+       //transform: translateY(-50%); // Now handled in fluidbook.resize.js due to dynamic scaling in the transform
 
        @media all and (max-width: @menu-breakpoint) {
                display: none;
@@ -11,12 +11,14 @@
        .ltr &, .rtl.menu-inverted & {
                left: 0;
                right: auto;
+               transform-origin: 0 0;
        }
 
        // Positioning for right-to-left Fluidbooks + inverted menu on LTR
        .rtl &, .ltr.menu-inverted & {
                right: 0;
                left: auto;
+               transform-origin: 100% 0;
        }
 
        // Locales icon + text link