fix #3057 @10

diff --git a/images/help/help-touch-scroll.svg b/images/help/help-touch-scroll.svg
index 73c4ceceae769ee9db457dd666dccdf10909dbde..8e6e3125b6e50e9634ccf2df45fc3bae7daf4880 100644 (file)
--- a/images/help/help-touch-scroll.svg
+++ b/images/help/help-touch-scroll.svg
@@ -1,24 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-     y="0px"
-     viewBox="0 0 101.9 84.2" style="enable-background:new 0 0 101.9 84.2;" xml:space="preserve">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 126 84.2" style="enable-background:new 0 0 126 84.2;" xml:space="preserve">
 <style type="text/css">
        .st0{fill:#FFFFFF;}
        .st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
-       .st2{opacity:0.5;fill:#FFFFFF;}
+       .st2{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
 </style>
-    <path class="st0" d="M48.4,68.2c6.2,1,8.1,1.1,12.7,2.5c4.6,1.3,18.1,13.4,18.1,13.4s11.7,1.1,17.4-5.7c5.7-6.8,5.2-15.7,5.2-15.7
-       S92,55.4,86.4,47c-5.6-8.4-13.5-24.1-16.2-25.3c-2.7-1.2-2.6,0-4.6-0.2c-1.9-0.2-5.4-2.3-7.1-2.6c-1.7-0.2-4.5,2.7-5.9,2.6
-       c-1.5-0.1-6.8-2.2-8.8,0c-2,2.2-2.1,2.6-2.8,2.6c-0.7,0-2.5-1.1-4-2.4c-1.5-1.2-10.6-6.3-13.7-8.1c-3.1-1.8-9-6.9-11.4-5.2
-       c-3.4,2.4-2,5.5-0.9,6.4c1.2,0.9,10.9,7.7,15.3,12.5c4.4,4.7,9.5,8.9,15.1,18.1c1.1,1.8,0.8,3.8,0.3,3.5c-0.6-0.3-5-2.8-5.4-3.6
-       c-0.5-0.8-1.7-5.3-2.4-6.4c-0.7-1.1-3.4-4.9-7.5-4.4c-4.2,0.5-1.5,3.4-0.7,5.5c0.8,2.1,2.5,13.1,4.5,15c2,1.8,8.4,6.2,10.1,8.1
-       C41.9,64.9,44.1,67.5,48.4,68.2z"/>
-    <g>
-       <path class="st1"
-          d="M1.5,10.7c0-5.1,4.1-9.2,9.2-9.2c5.1,0,9.2,4.1,9.2,9.2c0,5.1-4.1,9.2-9.2,9.2C5.6,20,1.5,15.8,1.5,10.7z"/>
-        <path class="st0" d="M8.8,33.5l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9c1.1-1.1,2.1-0.9,3.9,0l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0
-               c1.1,1.1,1.1,2.8,0,3.9l-6.9,5.3c0,0-1,0.9-1.9,0.9C9.8,34.3,8.8,33.5,8.8,33.5z"/>
-        <path class="st2" d="M8.8,45.3l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9C3,35,4,35.2,5.7,36.1l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0
-               c1.1,1.1,1.1,2.8,0,3.9l-6.9,5.3c0,0-1,0.9-1.9,0.9C9.8,46.1,8.8,45.3,8.8,45.3z"/>
+<path class="st0" d="M60.5,68.2c6.2,1,8.1,1.1,12.7,2.5c4.6,1.3,18.1,13.4,18.1,13.4s11.7,1.1,17.4-5.7c5.7-6.8,5.2-15.7,5.2-15.7
+       s-9.8-7.3-15.4-15.7c-5.6-8.4-13.5-24.1-16.2-25.3c-2.7-1.2-2.6,0-4.6-0.2c-1.9-0.2-5.4-2.3-7.1-2.6c-1.7-0.2-4.5,2.7-5.9,2.6
+       c-1.5-0.1-6.8-2.2-8.8,0s-2.1,2.6-2.8,2.6s-2.5-1.1-4-2.4c-1.5-1.2-10.6-6.3-13.7-8.1s-9-6.9-11.4-5.2c-3.4,2.4-2,5.5-0.9,6.4
+       c1.2,0.9,10.9,7.7,15.3,12.5c4.4,4.7,9.5,8.9,15.1,18.1c1.1,1.8,0.8,3.8,0.3,3.5c-0.6-0.3-5-2.8-5.4-3.6c-0.5-0.8-1.7-5.3-2.4-6.4
+       c-0.7-1.1-3.4-4.9-7.5-4.4c-4.2,0.5-1.5,3.4-0.7,5.5s2.5,13.1,4.5,15c2,1.8,8.4,6.2,10.1,8.1C54,64.9,56.1,67.5,60.5,68.2z"/>
+<g>
+       <path class="st1" d="M13.5,10.7c0-5.1,4.1-9.2,9.2-9.2s9.2,4.1,9.2,9.2s-4.1,9.2-9.2,9.2C17.6,20,13.5,15.8,13.5,10.7z"/>
+       <path class="st0" d="M20.8,33.5l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9s2.1-0.9,3.9,0l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0s1.1,2.8,0,3.9
+               l-6.9,5.3c0,0-1,0.9-1.9,0.9C21.8,34.3,20.8,33.5,20.8,33.5z"/>
+       <path class="st2" d="M20.8,45.3l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9c1.2-1,2.2-0.8,3.9,0.1l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0
+               s1.1,2.8,0,3.9l-6.9,5.3c0,0-1,0.9-1.9,0.9C21.8,46.1,20.8,45.3,20.8,45.3z"/>
 </g>
-</svg>
\ No newline at end of file
+</svg>

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 105a5ccd7ade7d745a3cd8dfcc2f9a0fe2021b84..a763211f1e51b7221974848615bd12058d5442cd 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -5,41 +5,63 @@ function FluidbookHelp(fluidbook) {
     this.overlay = $("#helpViewOverlay");
     this.initEvents();
     this.interfaceTop;
+    this.ww = 0;
+    this.ns = 0;
+    this.ignoreResize = false;
 }
 
 FluidbookHelp.prototype = {
-    init: function () {
+    init: function (force) {
+        if (force === undefined) {
+            force = false;
+        }
+        var ww = this.fluidbook.resize.ww;
+
+        var skip = true;
+        if (this.view.html() === '') {
+            skip = false;
+        }
+        if (this.ww !== ww && this.fluidbook.l10n.rtl) {
+            skip = false;
+        }
+        if (this.ns !== this.fluidbook.resize.navScale) {
+            skip = false;
+        }
+        if (force) {
+            skip = false;
+        }
+
+        this.ww = ww;
+        this.ns = this.fluidbook.resize.navScale;
+
+        if (skip) {
+            return;
+        }
+
         var $this = this;
         var help = '';
 
         // Image centrale
         var ext = 'svg';
 
-        var width = 400;
-        var height = 200;
-        var zoom = 2;
-
+        var touchzoom = 2;
+        var mousezoom = 1;
 
+        help = '<div id="help-illustrations">';
         if (this.fluidbook.mobilefirst.enabled) {
             var name = 'fingers';
             var text = this.fluidbook.l10n.__("scroll down to read the page content");
-            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('images/help/help-touch-scroll.svg', width * zoom, height * zoom);
+            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('images/help/help-touch-scroll.svg', 300 * touchzoom, 200 * touchzoom);
             help += '<p>' + text + '</p>';
             help += '</div>';
-
-
         } else {
             var name = 'fingers';
             var text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");
-            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom);
+            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', 400 * touchzoom, 200 * touchzoom);
             help += '<p>' + text + '</p>';
             help += '</div>';
         }
 
-
-        var width = 100;
-        var height = 200;
-        var zoom = 1;
         name = 'mouse';
         if (this.fluidbook.mobilefirst.enabled) {
             text = this.fluidbook.l10n.__('scroll down to read the page content');
@@ -47,10 +69,16 @@ FluidbookHelp.prototype = {
             text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '<br />' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out');
         }
 
-        help += '<div class="illustration mouse">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom);
+        help += '<div class="illustration mouse">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', 100 * mousezoom, 200 * mousezoom);
         help += '<p>' + text + '</p>';
         help += '</div>';
 
+        if (this.fluidbook.mobilefirst.enabled) {
+            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('images/help/help-touch-swipe.svg', 300 * touchzoom, 200 * touchzoom);
+            help += '<p>' + this.fluidbook.l10n.__('swipe to change the page') + '</p>';
+            help += '</div>';
+        }
+        help += '</div>';
 
         // Icons
         help += '<div id="icons">';
@@ -64,7 +92,6 @@ FluidbookHelp.prototype = {
         var initialHeight = 20 * navScale; // Buffer in line height away from icons
         var hStep = 25 * navScale; // The step height - the difference in height between the icon label lines
         var h = initialHeight + ($(tooltipSelector).length - 1) * hStep;
-        var ww = $(window).width();
 
         $(tooltips).each(function () {
             var text = $(this).data('tooltip');
@@ -115,10 +142,12 @@ FluidbookHelp.prototype = {
 
         help += '<div class="interface">';
         if (this.fluidbook.interface.arrowsEnabled()) {
+            help += '<div class="help-arrows">';
             help += '<div class="next">' + next + '</div>';
             help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';
             help += '<div class="previous">' + previous + '</div>';
             help += '<div class="first">' + this.fluidbook.l10n.__('frontpage') + '</div>';
+            help += '</div>';
         }
         if ($("#slider").length > 0) {
             help += '<div class="slider"><span>' + this.fluidbook.l10n.__('drag handle to switch page') + '</span></div>';
@@ -131,7 +160,6 @@ FluidbookHelp.prototype = {
         }
 
         this.view.html(help);
-        //resize();
     },
     initEvents: function () {
         var $this = this;
@@ -153,13 +181,19 @@ FluidbookHelp.prototype = {
             $this.hide();
             return false;
         });
+
+        $(this.fluidbook).on('fluidbook.resize', function () {
+            if (!$this.ignoreResize) {
+                $this.hide();
+            }
+        })
     },
     isVisible: function () {
         return this.view.is(":visible");
     },
     show: function (time) {
         this.clearTimeout();
-        if (time == undefined) {
+        if (time === undefined) {
             time = 0;
         }
 
@@ -171,20 +205,31 @@ FluidbookHelp.prototype = {
 
         var $this = this;
 
-        this.init(); // Re-run init because layout and options might have changed since last run
-        resize();
         this.overlay.show();
-        this.view.show();
+        this.view.css('opacity',0).show();
+        this.view.find('.interface').show();
 
-        $("body,#previous,#next").addClass('help');
-        this.fluidbook.showAllButtons();
+        $("#help-illustrations").css('opacity', '0');
 
-        if (time != 0) {
+        if (time !== 0) {
             this.autoTimeout = setTimeout(function () {
                 $this.hide();
             }, time * 1000);
         }
 
+        this.init(true);
+
+        setTimeout(function () {
+            $this.resize();
+            $("body,#previous,#next").addClass('help');
+            this.fluidbook.showAllButtons();
+            $this.view.css('opacity',1);
+        }, 50);
+        setTimeout(function () {
+            $this.resize();
+            $("#help-illustrations").css('opacity', '1');
+        }, 100);
+
         return false;
     },
     hide: function () {
@@ -211,14 +256,19 @@ FluidbookHelp.prototype = {
             this.show();
         }
     },
-    resize: function (ww, hh, interfaceScale, navScale) {
+    resize: function () {
+
+        this.view.find('#help-illustrations').css({
+            transform: ''
+        });
+
+        var hh = this.fluidbook.resize.hh;
+        var navScale = this.fluidbook.resize.navScale;
+        var interfaceScale = this.fluidbook.resize.interfaceScale;
 
         // Repopulate and reposition help overlay elements.
         // Mostly important for the RTL languages where icon label position must be recalculated/
-        // ToDo: Replace this sledgehammer approach with something more elegant
-        this.init();
-
-        // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly...
+        this.init(false);
 
         var $this = this;
         var dir = this.fluidbook.l10n.dir;
@@ -226,7 +276,6 @@ FluidbookHelp.prototype = {
         var nextTop;
         var firstTop;
 
-
         if (this.fluidbook.interface.arrowsEnabled()) {
             var arrow = $('#interface #next').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous
             // The arrow element contains both arrows in a single image
@@ -251,6 +300,47 @@ FluidbookHelp.prototype = {
             this.view.find('.next, .last').css(nextPosition);
         }
 
+        if (this.fluidbook.bookmarks.enabled) {
+            var inverted = this.fluidbook.datas.invertMenuPosition;
+            var side = ((this.fluidbook.l10n.dir === 'ltr' && inverted) || (this.fluidbook.l10n.dir === 'rtl' && !inverted)) ? 'left' : 'right';
+            if (this.fluidbook.mobilefirst.enabled) {
+                side = 'right';
+            }
+            var baseElement = $('#links .bookmark.' + side + ':visible');
+            if (baseElement.length > 0) {
+                // Get the offset and dimensions of the element, taking into account the scaling
+                var box = baseElement[0].getBoundingClientRect();
+                var circleExtra = 25 * this.fluidbook.resize.interfaceScale; // How much bigger the circle should be around the bookmark icon
+
+                // The bookmark icon sits inside a circle that is slightly bigger so in order to make the icon sit exactly
+                // on the corner of the page, we must offset the difference added by the larger wrapping circle.
+                var circleOffset = circleExtra / 2;
+
+                $(".bookmark-help .bookmark").css({
+                    width: Math.round(box.width),
+                    height: Math.round(box.height),
+                    margin: Math.round(circleOffset), // Centre inside circle
+                });
+
+                $(".bookmark-help .bookmark-help-icon").css({
+                    width: Math.round(box.width + circleExtra),
+                    height: Math.round(box.height + circleExtra)
+                });
+
+                var css = {top: Math.round(box.top - circleOffset)};
+                if (side === 'left') {
+                    css.transformOrigin = 'left top';
+                    css.flexDirection = 'row';
+                    css.left = Math.round(box.left - circleOffset);
+                } else {
+                    css.right = Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset);
+                    css.transformOrigin = 'right top';
+                    css.flexDirection = 'row-reverse'; // Reverse order of elements for right hand page
+                }
+                $(".bookmark-help").css(css);
+            }
+        }
+
         // Slider label
         if ($("#slider").length > 0) {
             var positionSliderLabel = function () {
@@ -271,18 +361,25 @@ FluidbookHelp.prototype = {
             transform: 'scale(' + navScale + ')'
         });
 
+        var s = Math.max(0.9, Math.min(1.5, interfaceScale));
+
         $("#helpView #icons").css({
-            fontSize: (14 / navScale) * interfaceScale
+            fontSize: (14 / navScale) * s
         });
 
-        this.view.find('.illustration').css({
-            transform: 'translate(-50%, -50%) scale(' + interfaceScale + ')'
+        var is = Math.min(s, (hh * 0.7) / $("#help-illustrations").outerHeight());
+
+        this.view.find('#help-illustrations').css({
+            transform: 'translate(-50%, 0) scale(' + is + ')'
         });
 
         $("#helpView .interface").find('> div').transform({
-            scale: [interfaceScale, interfaceScale]
+            scale: [s, s]
         })
 
+        var top = (hh - $("#help-illustrations").outerHeight()) / 2;
+        $("#help-illustrations").css('top', top);
+
     },
     clearTimeout: function () {
         clearTimeout(this.autoTimeout);
@@ -290,105 +387,68 @@ FluidbookHelp.prototype = {
 
     displayAtStartup: function () {
         if (this.fluidbook.datas.helpStartup) {
-            this.show(parseInt(this.fluidbook.datas.helpStartupTime));
+            var $this = this;
+            var time = parseInt(this.fluidbook.datas.helpStartupTime);
+            this.ignoreResize = true;
+            setTimeout(function () {
+                $this.ignoreResize = false;
+            }, (time+1) * 1000);
+            this.show(time);
             if (this.fluidbook.pad.enabled) {
                 this.fluidbook.pad.displayInterface();
             }
         } else {
             this.fluidbook.hideUnnecessaryButtons();
         }
-    },
+    }
+    ,
 
     bookmarkLabel: function () {
 
+        if (!this.fluidbook.bookmarks.enabled) {
+            return;
+        }
         // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is
         // not already used by the icon labels. Since the menu can be either on the left or right, this needs to be taken
         // into account. On the first and last pages of the Fluidbook we don't have a left or right page so it might not
         // be possible to always display the bookmark icon in this case...
 
-        var dir = this.fluidbook.l10n.dir,
-            inverted = this.fluidbook.datas.invertMenuPosition,
-            side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'left' : 'right',
-            baseElement = $('#links .bookmark.' + side), // Original element used to provide position and sizing for overlay
-            html = '';
+        var dir = this.fluidbook.l10n.dir;
+        var inverted = this.fluidbook.datas.invertMenuPosition;
+        var side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'left' : 'right';
+        if (this.fluidbook.mobilefirst.enabled) {
+            side = 'right';
+        }
+        var baseElement = $('#links .bookmark.' + side); // Original element used to provide position and sizing for overlay
+        var html = '';
 
 
         // If bookmark icon isn't present on the side we want, it means that we're on
         // the first/last page and that side is missing so we can't display the help
         if (baseElement.length === 0) {
+            console.log('nobookmark', side, baseElement);
             return '';
         }
 
-        // Get the offset and dimensions of the element, taking into account the scaling
-        var box = baseElement[0].getBoundingClientRect(),
-            circleExtra = 20 * this.fluidbook.resize.interfaceScale, // How much bigger the circle should be around the bookmark icon
-            lineLength = 30; // Length of the line to the label text
-
-        // The bookmark icon sits inside a circle that is slightly bigger so in order to make the icon sit exactly
-        // on the corner of the page, we must offset the difference added by the larger wrapping circle.
-        var circleOffset = circleExtra / 2;
 
         // Build a HTML string via jQuery with all the styling
         // Bookmark icon:
-        var iconHolder = $('<div class="bookmark ' + side + '" data-enabled="enabled" />').css({
-            width: Math.round(box.width),
-            height: Math.round(box.height),
-            margin: Math.round(circleOffset), // Centre inside circle
-        });
+        var iconHolder = $('<div class="bookmark ' + side + '" data-enabled="enabled" />');
         iconHolder.html(getSpriteIcon('bookmark-corner'));
         var icon = $(iconHolder).get(0).outerHTML;
 
         // Circle around the icon - slightly bigger
-        html += $('<div>' + icon + '</div>').css({
-            width: Math.round(box.width + circleExtra),
-            height: Math.round(box.height + circleExtra),
-            borderRadius: '50%',
-            border: '1px solid'
-        })[0].outerHTML;
+        html += $('<div class="bookmark-help-icon">' + icon + '</div>')[0].outerHTML;
 
         // Line to text
-        html += $('<div/>').css({
-            width: lineLength,
-            height: 0,
-            borderBottom: '1px solid',
-        })[0].outerHTML;
+        html += $('<div class="bookmark-help-line"/>')[0].outerHTML;
 
         // Help text label
-        html += $('<div>' + this.fluidbook.l10n.__('add / remove bookmark') + '</div>').css({
-            whiteSpace: 'nowrap',
-            padding: '0 0.5em' // Ensure spacing around text regardless which side the line is on
-        })[0].outerHTML;
-
-
-        // Wrapper with positioning and layout switched depending on the side
-        var wrapperCSS = { // Shared properties
-                display: 'flex',
-                alignItems: 'center',
-                position: 'absolute',
-                top: Math.round(box.top - circleOffset)
-            },
-            wrapperLayout;
-
-        if (side === 'left') {
-            wrapperLayout = {
-                left: Math.round(box.left - circleOffset),
-                transformOrigin: 'left top',
-                flexDirection: 'row' // Flexbox direction controls order of elements (icon, line, label)
-            };
-        } else {
-            wrapperLayout = {
-                right: Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset),
-                transformOrigin: 'right top',
-                flexDirection: 'row-reverse' // Reverse order of elements for right hand page
-            }
-        }
-
-        var wrapper = $('<div class="bookmark-help">' + html + '</div>')
-            .css(
-                $.extend(wrapperCSS, wrapperLayout) // Merge all properties
-            )[0].outerHTML
+        html += $('<div class="bookmark-help-label">' + this.fluidbook.l10n.__('add / remove bookmark') + '</div>')[0].outerHTML;
+        var wrapper = $('<div class="bookmark-help">' + html + '</div>')[0].outerHTML
 
         return wrapper;
     }
-};
+}
+;
 

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index d76ea253145df2375fdf21b9963097a72a86c2fe..7c42272f074179a0a8519ca2560d126e04fd3fa0 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -270,8 +270,8 @@ Fluidbook.prototype = {
         if (!this.mobilefirst.enabled) {
             this.slider = new FluidbookSlider(this);
         }
+
         this.help = new FluidbookHelp(this);
-        this.help.displayAtStartup();
 
         // Trigger a resize
         resize();
@@ -282,6 +282,11 @@ Fluidbook.prototype = {
 
         // Initial address handling
         this.changeAddress();
+
+        var $this = this;
+        setTimeout(function () {
+            $this.help.displayAtStartup();
+        }, 1500);
     },
 
     loadPlugins: function () {
@@ -501,14 +506,12 @@ Fluidbook.prototype = {
             });
         }
         return;
-    }
-    ,
+    },
 
 
     reloadCurrentPage: function () {
         this.pageTransition(this.currentPage);
-    }
-    ,
+    },
 
     readingPage: function (side) {
         if (!this.displayOnePage) {
@@ -631,12 +634,12 @@ Fluidbook.prototype = {
         }
         return $(pageSide).data('page');
     },
-    getPageNumberOfSide: function (side,strict) {
+    getPageNumberOfSide: function (side, strict) {
         if (undefined === strict) {
             strict = false;
         }
 
-        var physical = this.getPhysicalPageNumberOfSide(side,strict);
+        var physical = this.getPhysicalPageNumberOfSide(side, strict);
         if (!physical || physical === 1) {
             return '';
         }

diff --git a/style/help.less b/style/help.less
index 9faafe3c98e631a7a84b0ad19456c6a17c79d030..f5309428c2526a69218b607b92eb18d7d9d1bdeb 100644 (file)
--- a/style/help.less
+++ b/style/help.less
@@ -20,36 +20,67 @@
   display: none;
   color: #ffffff;
   overflow: hidden;
+  transition: opacity 150ms;
+  opacity: 0;
 
-  .illustration {
-    .no-using-touch &.touch {
-      display: none;
+  .bookmark-help {
+    display: flex;
+    align-items: center;
+    position: absolute;
+
+    .bookmark-help-icon {
+      border: 1px solid #fff;
+      border-radius: 50% 50%;
     }
 
-    .no-using-mouse &.mouse {
-      display: none;
+    .bookmark-help-label {
+      width: 50%;
+      text-align: right;
+      padding: 0 0.5em;
     }
 
+    .bookmark-help-line {
+      width: 30px;
+      height: 0;
+      border-bottom: 1px solid #fff;
+    }
+  }
+
+  #help-illustrations {
     position: absolute;
-    top: 50%;
+    top: 0;
     left: 50%;
-    //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done
     text-align: center;
     font-size: 20px;
+    transition: opacity 150ms;
+    opacity: 0;
 
-    img {
-      max-width: 100%;
-      height: auto;
-    }
+    .illustration {
+      margin: 100px 0;
 
-    p {
-      position: static;
-    }
+      .no-using-touch &.touch {
+        display: none;
+      }
 
-    &.touch {
-      top: 25%;
-    }
+      .no-using-mouse &.mouse {
+        display: none;
+      }
+
+      //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
 
+      p {
+        position: static;
+      }
+
+      &.touch {
+        top: 25%;
+      }
+    }
   }
 
   #icons {
@@ -180,17 +211,19 @@
   top: -0.5em;
   color: transparent;
 }
-
-#helpView .interface > div {
+#helpView .interface > div.help-arrows{
+  position: static;
+}
+#helpView .interface > div, #helpView .help-arrows > div {
   position: absolute;
   direction: ltr;
 }
 
-.portrait #helpView .interface {
+.portrait #helpView .help-arrows {
   display: none;
 }
 
-.pad.portrait #helpView .interface {
+.pad.portrait #helpView .help-arrows {
   display: block;
 }