Done #1642 @4.5

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 7efcc1d8847272d6dc937b9833298bb5da2d05fa..581afd1e368d75b530a4c6955745e8e2b5121a5f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -92,6 +92,11 @@ Fluidbook.prototype = {
         if (this.datas.arrowsTheme) {
             $('html').addClass('sharp');
         }
+
+        if (this.datas.invertMenuPosition) {
+            $('html').addClass('menu-inverted');
+        }
+
         this.initLoading();
     },
     initLoading: function () {

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 223b6eb505ee48ff546ef2ab32d36197020ac0f8..67507ba5cafc8416537b32254e0506284b6d6879 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -30,7 +30,7 @@ FluidbookNav.prototype = {
                 "pagedim-black"
             ],
             "offCanvas": {
-                "position": this.fluidbook.datas.menuPosition || "right",
+                "position": this.fluidbook.datas.invertMenuPosition ? "right" : "left",
                 "zposition": "front"
             },
             "navbar": {
@@ -226,7 +226,7 @@ FluidbookNav.prototype = {
         // MMenu specific elements
         if (navType == 'menu') {
 
-            var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
+            var menuOpener = '<a href="#" id="menuOpener">' + getSpriteIcon('interface-menu') + '<span class="label">' + this.fluidbook.l10n.__('Menu') + '</span></a>';
             $('#main header').append(menuOpener);
 
             // Add holder list element for menu items

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 5447ac690ae219590117956fc17f6b4f2556c1b5..2a89fb595251f8f8ec2084e562fef39afad748e1 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -724,18 +724,23 @@ header {
        &.overridenByFluidbook {
                visibility: hidden;
        }
-}
 
-.ltr #logo {
-       left: 0;
-}
+       // Portrait mode - logo hidden
+       .portrait & {
+               display: none;
+       }
 
-.rtl #logo {
-       right: 0;
-}
+       // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+       .ltr &, .rtl.menu-inverted & {
+               right: 0;
+               left: auto;
+       }
 
-.portrait #logo {
-       display: none;
+       // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+       .rtl &, .ltr.menu-inverted & {
+               left: 0;
+               right: auto;
+       }
 }
 
 /* Credits */

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 177a6a8f33d1019c61f1cb32f425a53a2d07e63f..8458847a5466e62de9c6dbb9db3a35b93d234958 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -93,22 +93,41 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
 
 #menuOpener {
   display: none;
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 16px;
-  line-height: 1;
-  color: @icon-color;
 
   @media all and (max-width: @menu-breakpoint) {
-    display: block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 100%;
+    font-size: 16px;
+    line-height: 1;
+    color: @icon-color;
+    display: flex;
+    align-items: center;
+  }
+
+  // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+  .ltr &, .rtl.menu-inverted & {
+    left: 9px;
+    right: auto;
+    flex-direction: row;
+  }
+
+  // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+  .rtl &, .ltr.menu-inverted & {
+    right: 9px;
+    left: auto;
+    flex-direction: row-reverse; // Swap text and icon positions
+  }
+
+  .label {
+    margin: 0 9px;
   }
 
   .svg-icon {
     width: 20px;
     vertical-align: middle;
-    margin-left: 18px;
+    margin: 0 9px;
   }
 }
 
@@ -117,6 +136,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   top: 0;
   left: 0;
   width: 100%;
+  z-index: 2; // Ensure search box sits above #shareLinks
 
   &:after {
     border: none;

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 7954fed0e6cd0af903820cda499cc16ad89984c9..55ab26cffb55891e5cbeaacae22d571938204ad0 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -1,6 +1,5 @@
 #horizontalNav {
   position: absolute;
-  right: 0;
   top: 50%;
   transform: translateY(-50%);
 
@@ -8,14 +7,35 @@
     display: none;
   }
 
+  // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+  .ltr &, .rtl.menu-inverted & {
+    left: 0;
+    right: auto;
+  }
+
+  // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+  .rtl &, .ltr.menu-inverted & {
+    right: 0;
+    left: auto;
+  }
+
   // Locales icon + text link
   &_locales {
     border-left: 1px solid;
     margin-right: 1.5em;
     margin-left: 14px;
 
+    .rtl & {
+      border-left: none;
+      border-right: 1px solid;
+    }
+
     .svg-icon {
       margin: 0 7px 0 30px !important;
+
+      .rtl & {
+        margin: 0 30px 0 7px !important;
+      }
     }
   }
 }
@@ -54,4 +74,8 @@
   border-width: 0 2px 2px 0; // Make right angle for arrow
   transform: rotate(45deg); // Rotate to downwards position
   display: inline-block;
+
+  .rtl & {
+    margin-right: 10px;
+  }
 }
\ No newline at end of file