From ca3bac0ec83d953fc3299b49d1819e7ecd8e3730 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 4 Oct 2017 19:57:21 +0200 Subject: [PATCH] #1719 --- images/interface.svg | 16 +++++++ js/libs/fluidbook/fluidbook.nav.js | 15 +++++-- style/fluidbook.less | 72 +++++++++--------------------- 3 files changed, 49 insertions(+), 54 deletions(-) diff --git a/images/interface.svg b/images/interface.svg index 8539c7d8..12be91ad 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -12,4 +12,20 @@ + + + + + + + + diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index e6591d9d..dba2e237 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -446,7 +446,7 @@ FluidbookNav.prototype = { if (navType == 'horizontalNav') { navExtraImage = this.fluidbook.datas.navExtraImage; - link = ''; + link = ''; } else if (navType == 'menu') { navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image @@ -546,7 +546,7 @@ FluidbookNav.prototype = { // Toggle icon on fullscreen change (also handles exiting via ESC key) if (screenfull.enabled) { - screenfull.on('change', function() { + screenfull.on('change', function () { // Slight delay to stop icon state flickering during fullscreen transition setTimeout(function () { $('.icon-fullscreen').toggleClass('active'); @@ -817,8 +817,15 @@ FluidbookNav.prototype = { } this._inited['interface'] = true; - var res = this.getLink('interface-previous', '#', 'previous', '', '', '', false); - res += this.getLink('interface-next', '#', 'next', '', '', '', false); + var res = ''; + if ($('html').hasClass('ltr')) { + res += this.getLink('interface-previous', '#', 'previous', '', '', '', true); + res += this.getLink('interface-next', '#', 'next', '', '', '', true); + } else { + res += this.getLink('interface-previous', '#', 'next', '', '', '', true); + res += this.getLink('interface-next', '#', 'previous', '', '', '', true); + } + $('#interface').append(res); $(document).on('click', '#next', goNextPage); $(document).on('click', '#previous', goPreviousPage); diff --git a/style/fluidbook.less b/style/fluidbook.less index 67993bc3..1abc5121 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -624,21 +624,16 @@ body, html { } #next, #previous { - background: #f00; - width: 40px; - height: 100px; + width: 53px; + height: 107px; + background-size: 53px 107px; position: absolute; top: 310px; display: block; opacity: 1; z-index: 21; - background-size: 40px 100px; - - .sharp & { - width: 53px; - height: 107px; - background-size: 53px 107px; - } + color: @arrows-color; + background-color: @arrows-background; } #next, #previous, #down, #splash { @@ -664,7 +659,6 @@ body, html { } .rtl #previous, .ltr #next { - background-image: url("../data/images/interface-sharp-next.svg"); border-top-left-radius: 1px; border-bottom-left-radius: 1px; right: 0px; @@ -672,7 +666,6 @@ body, html { } .rtl #next, .ltr #previous { - background-image: url("../data/images/interface-sharp-previous.svg"); border-top-right-radius: 1px; border-bottom-right-radius: 1px; left: 0px; @@ -701,26 +694,6 @@ body, html { } } -.no-svg { - &.rtl #next, &.ltr #previous { - background-image: url("../data/images/interface-previous.png"); - } - - &.rtl #previous, &.ltr #next { - background-image: url("../data/images/interface-next.png"); - } - - &.sharp { - &.rtl #next, &.ltr #previous { - background-image: url("../data/images/interface-sharp-previous.png"); - } - - &.rtl #previous, &.ltr #next { - background-image: url("../data/images/interface-sharp-next.png"); - } - } -} - /* Header */ header { position: relative; @@ -1345,14 +1318,14 @@ form input[type="text"], form input[type="email"] { .number { text-align: center; display: block; - margin: 0; + margin: 0; padding: 5px 0 0 0; max-width: 100px; position: relative; z-index: 1; - font-size: 14px; - font-weight: bold; - line-height: 1; + font-size: 14px; + font-weight: bold; + line-height: 1; } &.right { left: 100px; @@ -1409,6 +1382,7 @@ ul.chapters.shareList a.level0 .svg-icon { left: 0; background-color: transparent; } + #helpView { background-color: rgba(0, 0, 0, 0.7); position: absolute; @@ -1446,15 +1420,15 @@ ul.chapters.shareList a.level0 .svg-icon { display: inline-block; white-space: nowrap; padding: 0 0.5em; - border-color: #fff; - border-style: solid; - border-width: 0 0 0 1px; // Left border + border-color: #fff; + border-style: solid; + border-width: 0 0 0 1px; // Left border - // When in RTL default or LTR with menu inverted, the labels need to be on the other side of the line - .rtl.menu-default &, .ltr.menu-inverted & { - border-width: 0 1px 0 0; // Right border - transform: translateX(-100%); // Flip position back to where it would be if it was based on a left border line - } + // When in RTL default or LTR with menu inverted, the labels need to be on the other side of the line + .rtl.menu-default &, .ltr.menu-inverted & { + border-width: 0 1px 0 0; // Right border + transform: translateX(-100%); // Flip position back to where it would be if it was based on a left border line + } } .icon span { @@ -1800,7 +1774,6 @@ ul.chapters { padding-right: 80px; } - .right .puce { margin: -2px 0 0 0; } @@ -2321,7 +2294,7 @@ body > input { } /* SVG Sprite */ -[class^="interface-"], [class*=" interface-"] { +[class^="interface-"], [class*=" interface-"], [class^="nav-"], [class*=" nav-"], [class^="share-"], [class*=" share-"] { display: inline-block; fill: currentColor; } @@ -2330,22 +2303,21 @@ body > input { .icon-fullscreen { // Full screen exit icon hidden by default - .interface-fullscreen-exit { + .nav-fullscreen-exit { display: none; } // Switch icons &.active { - .interface-fullscreen-exit { + .nav-fullscreen-exit { display: inline-block; } - .interface-fullscreen { + .nav-fullscreen { display: none; } } } - /* Webfonts*/ @font-face { -- 2.39.5