WIP #1699 @1.5

diff --git a/_index.html b/_index.html
index 61b7ba8b083b0cb88f6ce3e2bd95877de9b2efa4..d55d4782cf95facedb117e98a01954af396a53e6 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -33,6 +33,7 @@
        </header>
        <div id="interface"></div>
        <div id="helpView"></div>
+       <div id="helpViewOverlay"></div>
 
        <div id="z" class="nozoom">
                <div id="fluidbook">

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index f648a7fc559d85a00595e1c9e380894c7d11550c..f4343d73e278490a96261b893036ec4dd4bf4ee9 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -2,6 +2,7 @@ function FluidbookHelp(fluidbook) {
        this.autoTimeout;\r
        this.fluidbook = fluidbook;\r
        this.view = $("#helpView");\r
+       this.overlay = $("#helpViewOverlay");\r
        this.initEvents();\r
        this.interfaceTop;\r
 }\r
@@ -117,7 +118,7 @@ FluidbookHelp.prototype = {
                });\r
 \r
                // Click handler on main helpView div to hide it\r
-               $this.view.click(function(e) {\r
+               $this.overlay.click(function(e) {\r
             e.stopImmediatePropagation();\r
             e.stopPropagation();\r
             e.preventDefault();\r
@@ -146,6 +147,7 @@ FluidbookHelp.prototype = {
                var $this = this;\r
 \r
                resize(); // Main resize function that later calls local resize() here...\r
+               this.overlay.show();\r
                this.view.show();\r
 \r
                $("body,#previous,#next").addClass('help');\r
@@ -163,6 +165,7 @@ FluidbookHelp.prototype = {
                this.clearTimeout();\r
                var $this = this;\r
                if (this.isVisible()) {\r
+                       this.overlay.hide();\r
                        this.view.hide();\r
                        $("body,#previous,#next").removeClass('help');\r
                        this.fluidbook.hideUnnecessaryButtons();\r
@@ -196,7 +199,7 @@ FluidbookHelp.prototype = {
 \r
 \r
                this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale;\r
-               this.view.find(".interface > div").css({\r
+               this.view.find(".interface > div").not('.slider').css({\r
                        top: this.interfaceTop\r
                });\r
 \r
@@ -205,7 +208,6 @@ FluidbookHelp.prototype = {
                        var sliderHelp = $this.view.find('.slider');\r
                        var sliderCursor = $('#slidercursor .visible');\r
                        sliderHelp.css({\r
-                               top: 'auto',\r
                                bottom: hh - sliderCursor.offset().top,\r
                                left: sliderCursor.offset().left + (sliderCursor.width() / 2)\r
                        });\r

diff --git a/style/fluidbook.less b/style/fluidbook.less
index d294a7a15620718ff3645a6fe8514dfcb8d754aa..3b4aa680232a15970fe4549ab595afff1927f0c4 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -433,11 +433,6 @@ body, html {
                -o-transition: all @zoomtransition ease-out;
                transition: all @zoomtransition ease-out;
        }
-
-       // Add a slight blur below the help overlay
-       .help & {
-               filter: blur(7px);
-       }
 }
 
 #cache {
@@ -1231,6 +1226,16 @@ ul.chapters.shareList a.level0 .svg-icon {
 }
 
 /* Help */
+#helpViewOverlay {
+       display: none;
+       z-index: 30;
+       position: absolute;
+       top: 0;
+       right: 0;
+       bottom: 0;
+       left: 0;
+       background-color: transparent;
+}
 #helpView {
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;