From 720b5d4e25f4f4b3075b5e751bc692122bf094de Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Fri, 29 Sep 2017 19:10:04 +0200 Subject: [PATCH] Done #1679 @6.5 --- js/libs/fluidbook/fluidbook.l10n.js | 9 ++- js/libs/fluidbook/fluidbook.links.js | 6 +- js/libs/fluidbook/fluidbook.menu.js | 4 +- js/libs/fluidbook/fluidbook.nav.js | 7 ++- style/fluidbook.less | 87 ++++++++++++++++++++++------ style/mmenu/mmenu.less | 61 +++++++++++++++---- 6 files changed, 138 insertions(+), 36 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.l10n.js b/js/libs/fluidbook/fluidbook.l10n.js index ea186090..0af39ff1 100644 --- 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 1c6024ed..71aadeac 100644 --- 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 a1d1e5b5..c78fafdf 100644 --- 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 += '
  • ' + name + '' + name + '
    • '; + view += '
  • ' + name + '' + name + '
    • '; } else { - view += '
  • ' + name + '' + name + '
    • '; + view += '
  • ' + name + '' + name + '
    • '; } }); view += ''; diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 8fa56405..217a8ec5 100644 --- 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 c2fd35ca..85718847 100644 --- 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 1c087f29..9c4725ea 100644 --- 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 { -- 2.39.5