wip #1762 @4

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index bed1937acab9e987d4ece06f5b1835ca921522eb..02f245e5316a84bd59dc850c3af7c0b1622a200c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -442,17 +442,13 @@ FluidbookNav.prototype = {
                 }
 
                 if (navType == 'horizontalNav') {
-
                     if (this.fluidbook.datas.navExtraImage != '' && this.fluidbook.datas.navExtraLink != '') {
                         navExtraImage = this.fluidbook.datas.navExtraImage;
                         link = '<a id="' + elementID + '" data-tooltip="' + this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '"' + navLinkTarget + '><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
-
                     } else if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.afterSearchDisplayForHTML && this.fluidbook.datas.themeEnableAfterSearch && navType == 'horizontalNav') {
                         // Use the "afterSearch" image and links set in the theme and link editor
-                        $nav.find('ul').append('<li id="' + elementID + '"><div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div></li>');
+                        $nav.after('<div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></li>');
                     }
-
-
                 } else if (navType == 'menu' && (this.fluidbook.datas.navExtraImage != '' || this.fluidbook.datas.navExtraImageMobile != '') && this.fluidbook.datas.navExtraLink != '') {
                     navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
                     link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '"' + navLinkTarget + '><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 83aaccdd75b32e41d262f560d51143fe8c038139..d13e475ffc6c6d778b2da72002533af0aebddda1 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -229,6 +229,7 @@ FluidbookResize.prototype = {
 
         this.resizeSplash();
 
+
         if (this.fluidbook.form) {
             this.fluidbook.form.resize();
         }
@@ -251,11 +252,28 @@ FluidbookResize.prototype = {
         $(this.fluidbook).trigger('fluidbook.resize', {ww: this.ww, hh: this.hh, orientation: this.orientation, fluidbookrect: $("#fluidbook").get(0).getBoundingClientRect()});
     },
     resizeNav: function (interfaceScale) {
+        var $this = this;
         var topNext = (this.hh - (100 * interfaceScale)) / 2;
         $("#next,#previous").css({
             top: topNext
         });
         $("#next,#previous").show();
+
+        if ($("#afterSearch:visible").length == 1) {
+            setTimeout(function () {
+                $this.resizeAfterSearch();
+            }, 10);
+            this.resizeAfterSearch();
+        }
+    },
+
+    resizeAfterSearch: function () {
+        var rect = $("#horizontalNav").get(0).getBoundingClientRect();
+        if ((this.fluidbook.l10n.ltr && !this.fluidbook.datas.invertMenuPosition) || (this.fluidbook.l10n.rtl && this.fluidbook.datas.invertMenuPosition)) {
+            $("#afterSearch").css({left: rect.left + rect.width, right: 'auto'});
+        } else {
+            $("#afterSearch").css({right: this.ww - rect.right + rect.width, left: 'auto'});
+        }
     },
 
     checkLogoVisibility: function () {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index ec87918ed0077cda0f7482d4c2e13c67871f4b71..3982cab0f1c4c0bd7b3118f0a36a07be75fb8931 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -704,29 +704,7 @@ header {
        white-space: nowrap;
 }
 
-#afterSearch {
-       position: relative;
-       margin: 0 17px;
-
-       .c {
-               position: relative;
-               top: 0px;
-               left: 0px;
-               z-index: 9;
-               display: block;
-       }
 
-       .links {
-               position: absolute;
-               top: 0px;
-               left: 0px;
-               z-index: 10;
-
-               .link {
-                       position: absolute;
-               }
-       }
-}
 
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 8cdfcf48053fa74295d10e1728c6393574e5020c..3482259e78d69c024f7c9e4f878e6ce752939522 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -108,3 +108,31 @@
                margin-right: 10px;
        }
 }
+
+#afterSearch {
+       position: absolute;
+       margin: 0 17px;
+
+       .c {
+               position: relative;
+               top: 0px;
+               left: 0px;
+               z-index: 9;
+               display: block;
+       }
+
+       .links {
+               position: absolute;
+               top: 0px;
+               left: 0px;
+               z-index: 10;
+
+               .link {
+                       position: absolute;
+               }
+       }
+
+       @media all and (max-width: @menu-breakpoint) {
+               display: none;
+       }
+}
\ No newline at end of file