Done #1679 @6.5

diff --git a/js/libs/fluidbook/fluidbook.l10n.js b/js/libs/fluidbook/fluidbook.l10n.js
index ea186090cdbe1cb4ca912f6b7c8dc94095720aec..0af39ff1a0b7ee87e7170ba7118365534eac9111 100644 (file)
--- a/js/libs/fluidbook/fluidbook.l10n.js
+++ b/js/libs/fluidbook/fluidbook.l10n.js
@@ -15,7 +15,7 @@ FluidbookL10N.prototype = {
         }
         this.lang = lang;
 
-        this.dir = (this.getActiveLang() == 'ar' || this.getActiveLang() == 'he') ? 'rtl' : 'ltr';
+        this.dir = this.getLanguageDirection(this.getActiveLang());
         $('html').attr('dir', this.dir);
         if (this.dir == 'rtl') {
             $('html').removeClass('ltr').addClass('rtl');
@@ -147,6 +147,13 @@ FluidbookL10N.prototype = {
         return name;
     },
 
+    // Determine if a language is LTR or RTL based on its code
+    getLanguageDirection: function (languageCode) {
+        // Arabic and Hebrew are the only RTL languages defined for now.
+        // ToDo: update this with a full list of RTL languages
+        return (languageCode == 'ar' || languageCode == 'he') ? 'rtl' : 'ltr'
+    },
+
     updateTranslations: function () {
         var $this = this;
         $("#q").attr('placeholder', this.__('search'));

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 1c6024edfea94fc94059938a11230d2ecc321690..71aadeacc39a4edd7cac9f1907eeca5e85bca960 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -203,13 +203,11 @@ FluidbookLinks.prototype = {
             }, 50);
 
             // Hide close button initially so it only shows when zoom finishes.
-            // Also reduce size a bit - the popup will close by clicking anywhere so link size isn't as critical.
-            // It's better to be smaller so it doesn't cover too much of the zoom image.
-            $(".zoomPopupClose").css('opacity', 0).transform({scale: 0.5, origin: ['100%', 0, 0]});
+            $(".zoomPopupClose").css('opacity', 0);
 
             // Display close button after zoom animation has finished
             setTimeout(function () {
-                $(".zoomPopupClose").css('opacity', '1');
+                $(".zoomPopupClose").css('opacity', 1);
             }, 500);
         });
     },

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index a1d1e5b55aa61d8fd8031e635ef51a43982b0ed3..c78fafdfc98f158ac55d7b201435d207bb3bab5c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -312,9 +312,9 @@ FluidbookMenu.prototype = {
 
             var c = '';
             if ($this.fluidbook.datas.phonegap) {
-                view += '<li data-level="0"><a href="#" data-id="' + url + '" data-locale="' + v.lang + '" class="level0 appswitchlocale"><img src="images/flags/' + v.flag + '.png" alt="' + name + '" />' + name + '</a></li>';
+                view += '<li data-level="0"><a href="#" data-id="' + url + '" data-locale="' + v.lang + '" class="level0 appswitchlocale"><img src="images/flags/' + v.flag + '.png" alt="' + name + '" /><span dir="' + $this.fluidbook.l10n.getLanguageDirection(langCode) + '">' + name + '</span></a></li>';
             } else {
-                view += '<li data-level="0"><a href="' + url + '" class="level0"><img src="images/flags/' + v.flag + '.png" alt="' + name + '" />' + name + '</a></li>';
+                view += '<li data-level="0"><a href="' + url + '" class="level0"><img src="images/flags/' + v.flag + '.png" alt="' + name + '" /><span dir="' + $this.fluidbook.l10n.getLanguageDirection(langCode) + '">' + name + '</span></a></li>';
             }
         });
         view += '</ul>';

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 8fa56405c4fbf15e3e6546fcf5811cee6acfcb7a..217a8ec5a2a52a67658a024cc384a4ae764d1d82 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -14,7 +14,10 @@ function FluidbookNav(fluidbook) {
 
 FluidbookNav.prototype = {
     initMenu: function () {
-        var $this = this;
+        var $this = this,
+            dir = this.fluidbook.l10n.dir,
+            inverted = this.fluidbook.datas.invertMenuPosition,
+            side = ((dir == 'ltr' && inverted) || (dir == 'rtl' && !inverted)) ? 'right' : 'left';
 
         this.menu.mmenu({
 
@@ -30,7 +33,7 @@ FluidbookNav.prototype = {
                 "pagedim-black"
             ],
             "offCanvas": {
-                "position": this.fluidbook.datas.invertMenuPosition ? "right" : "left",
+                "position": side,
                 "zposition": "front"
             },
             "navbar": {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index c2fd35ca0f828d2932b36936b4c34bd4cd0e7328..85718847640839a762d1ae675a4edd1bff6f551b 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -366,13 +366,22 @@ body, html {
        }
 }
 
-.localesList li a {
-       padding: 10px 20px !important;
-}
+.localesList {
+       li {
+               a {
+                       padding: 10px 20px !important;
 
-.localesList li a img {
-       vertical-align: middle;
-       margin: -2px 20px 0 0;
+                       img {
+                               vertical-align: middle;
+                               margin: -2px 0 0 0;
+                       }
+
+                       span {
+                               display: inline-block !important;
+                               padding: 0 12px !important;
+                       }
+               }
+       }
 }
 
 @zoomtransition: 350ms;
@@ -1055,6 +1064,11 @@ html.ios body.portrait #interface {
                                line-height: 1;
                                background-color: @menu-button-background;
                                z-index: 1;
+
+                               .rtl & {
+                                       right: auto;
+                                       left: 0;
+                               }
                        }
                }
        }
@@ -1614,15 +1628,32 @@ ul.chapters {
                &.level1 {
                        padding-left: 50px;
 
+                       .rtl & {
+                               padding-left: 0;
+                               padding-right: 50px;
+                       }
+
                }
                &.level2 {
                        padding-left: 80px;
+
+                       .rtl & {
+                               padding-left: 0;
+                               padding-right: 80px;
+                       }
+
+
                        .right .puce {
                                margin: -2px 0 0 0;
                        }
                }
                .level3 {
                        padding-left: 110px;
+
+                       .rtl & {
+                               padding-left: 0;
+                               padding-right: 110px;
+                       }
                }
                > nav {
                        display: none;
@@ -1632,6 +1663,12 @@ ul.chapters {
        li > a > span {
                display: block;
                padding-right: 30px;
+
+               .rtl & {
+                       padding-right: 0;
+                       padding-left: 30px;
+               }
+
        }
        .right {
                right: 32px;
@@ -1643,20 +1680,27 @@ ul.chapters {
                height: 25px;
                text-align: center;
 
+               .rtl & {
+                       right: auto;
+                       left: 32px;
+               }
+
                .puce {
                        width: 25px;
                        height: 25px;
-                       line-height: 17px;
-                       padding: 6px;
                        color: #fff;
                        position: relative;
-                       top: 0px;
+                       display: flex;
+                       align-items: center;
+                       justify-content: center;
+
+                       .rtl & {
+                               transform: rotate(180deg);
+                       }
+
                        svg {
                                width: 16px;
                                height: 16px;
-                               position: relative;
-                               left: -1px;
-                               top: -1px;
                        }
                        border-radius: 1px;
 
@@ -2067,16 +2111,25 @@ ul.chapters {
        }
        .zoomPopupClose {
                position: absolute;
-               top: 0px;
-               right: 0px;
-               width: 60px;
-               height: 60px;
+               top: 0;
+               right: 0;
+               width: 30px;
+               height: 30px;
+               padding: 11px;
                z-index: 103;
-               padding: 22px;
                background-color: @menu-button-background;
                color: @menu-text;
                opacity: 1;
                transition: opacity 250ms;
+
+               .svg-icon {
+                       display: block; // Needed for proper positioning in centre of square
+               }
+
+               .rtl & {
+                       right: auto;
+                       left: 0;
+               }
        }
 }
 

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 1c087f29e2b03c1f755cbf5454f224438d573f4e..9c4725ea64bf85de910d03c3fe36c213f8134f47 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -83,6 +83,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   a, li > span {
     padding: 10px 10px 10px 29px;
 
+    .rtl & {
+      padding: 10px 29px 10px 10px !important;
+    }
+
     img {
       display: inline-block;
       vertical-align: middle;
@@ -169,12 +173,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
     width: 26px;
     height: 26px;
     vertical-align: middle;
-    margin-right: 10px;
   }
 }
 
-
-#menuClose {
+#menu #menuClose { // Extra specificity needed to override MMenu RTL styles
   position: absolute;
   top: 0;
   right: 0;
@@ -183,6 +185,11 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
   color: @menu-text;
   background-color: @menu-button-background;
+
+  .rtl & {
+    right: auto;
+    left: 0;
+  }
 }
 
 
@@ -193,6 +200,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   position: relative;
   padding: 0;
   text-align: left;
+
+  .rtl & {
+    text-align: right;
+  }
 }
 
 #q {
@@ -205,6 +216,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   font-size: 16px;
   padding: 0 1em 0 70px;
   width: 260px;
+
+  .rtl & {
+    padding: 0 70px 0 1em;
+  }
 }
 
 #submitSearch {
@@ -213,7 +228,6 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   top: 50%;
   transform: translateY(-50%);
   color: @menu-background;
-  padding: 9px 10px 10px 26px;
 
   .svg-icon {
     width: 25px;
@@ -225,16 +239,21 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   }
 
   .rtl & {
-    margin: 0 5px 0 0;
+    left: auto;
+    right: 0;
   }
 }
 
+.menu-item-title {
+  margin: 0 10px;
+}
+
 #menuSearchResults, #menuSearchHints {
   display: none; // Hidden by default, displayed via JS
 }
 
 #menuSearchHints {
-  padding-top: 15px;
+  padding: 15px 0;
 
   .hint {
     padding: 13px 30px;
@@ -259,6 +278,13 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
       bottom: 0;
       right: 25px;
       transform: rotate(135deg);
+
+      // Reverse arrow position and direction for RTL screens
+      .rtl & {
+        right: auto;
+        left: 25px;
+        transform: rotate(315deg);
+      }
     }
 
     em {
@@ -267,7 +293,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   }
 }
 
-#menuSearchResults {
+#menu #menuSearchResults {
   position: relative;
   height: 100%;
   // Max height is now handled via JS
@@ -275,8 +301,13 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   margin: 50px auto 0 0;
   width: 295px; // To make 25px gap to right of scrollbar (320px - 25px)
 
+  .rtl & {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
   a {
-    padding: 0;
+    padding: 0 !important;
   }
 
   .doubleThumb {
@@ -318,7 +349,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
 }
 
 
-#shareLinks {
+#menu #shareLinks {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -334,6 +365,11 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   .share-icons {
     padding-left: 29px;
     white-space: nowrap;
+
+    .rtl & {
+      padding-left: 0;
+      padding-right: 29px;
+    }
   }
 
   .shareList {
@@ -346,10 +382,15 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
 
     &:not(:last-of-type) {
       margin-right: 33px;
+
+      .rtl & {
+        margin-right: 0;
+        margin-left: 33px;
+      }
     }
 
     a {
-      padding: 0;
+      padding: 0 !important;
     }
 
     img {