wip #1466 @5

diff --git a/_index.html b/_index.html
index 2282f71b6f27a540b53115a65184c1b7a9a03f75..9ef8bde65c326a079066ccb0236621e80365b657 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -24,7 +24,13 @@
 <div id="message"><!-- $message --></div>
 <!--googleon: all-->
 <div id="main">
-       <div id="background"></div>
+       <div id="background">
+
+               <div id="shadow">
+                       <div class="shadow left"></div>
+                       <div class="shadow right"></div>
+               </div>
+       </div>
        <header>
                <nav id="nav"></nav>
                <div id="search"></div>
@@ -35,11 +41,9 @@
 
        <div id="z" class="nozoom">
                <div id="fluidbook">
-                       <div id="shadow">
+                       <div id="edges">
                                <div class="edge left"></div>
                                <div class="edge right"></div>
-                               <div class="shadow left"></div>
-                               <div class="shadow right"></div>
                        </div>
                        <div id="pagesnumbers">
                                <div class="left"></div>

diff --git a/images/arrow-button.png b/images/arrow-button.png
new file mode 100644 (file)
index 0000000..e4ff2f8
Binary files /dev/null and b/images/arrow-button.png differ

diff --git a/images/book-shadow-left.png b/images/book-shadow-left.png
index bd7456c2bcdf8e1f6bb35f13190a321fc409d1fe..7a93d5daa6a34a76a24dbd9fcc47162bf0fba608 100644 (file)
Binary files a/images/book-shadow-left.png and b/images/book-shadow-left.png differ

diff --git a/images/book-shadow-right.png b/images/book-shadow-right.png
index 18ca0584c212f3e8bf83c00d3c938917818f5556..3abd659253651d26feea009527f1b8ac548c6ca3 100644 (file)
Binary files a/images/book-shadow-right.png and b/images/book-shadow-right.png differ

diff --git a/images/shade-thumb-left.png b/images/shade-thumb-left.png
new file mode 100644 (file)
index 0000000..c9be493
Binary files /dev/null and b/images/shade-thumb-left.png differ

diff --git a/images/shade-thumb-right.png b/images/shade-thumb-right.png
new file mode 100644 (file)
index 0000000..c66414f
Binary files /dev/null and b/images/shade-thumb-right.png differ

diff --git a/images/shadeleft-reflet.png b/images/shadeleft-reflet.png
new file mode 100644 (file)
index 0000000..b41f888
Binary files /dev/null and b/images/shadeleft-reflet.png differ

diff --git a/images/shaderight-reflet.png b/images/shaderight-reflet.png
new file mode 100644 (file)
index 0000000..7b5dd6e
Binary files /dev/null and b/images/shaderight-reflet.png differ

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 06ebb9b58fd04054835a76c4d6138b4759382dc6..f05a43cc6665b6bf8cd5c1ba1fe3d7da7f113190 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -538,17 +538,18 @@ Fluidbook.prototype = {
             }
         }
 
+        var s = $("#shadow,#edges");
 
         if (left) {
-            $("#shadow>.left:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".left:hidden").delay(delay).fadeIn(duration);
         } else {
-            $("#shadow>.left:visible").fadeOut(duration);
+            $(s).children(".left:visible").fadeOut(duration);
         }
 
         if (right) {
-            $("#shadow>.right:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".right:hidden").delay(delay).fadeIn(duration);
         } else {
-            $("#shadow>.right:visible").fadeOut(duration);
+            $(s).children(".right:visible").fadeOut(duration);
         }
     },
     showAllButtons: function () {

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 2f5a11535e229590bdc8bc3baba77f885092b4ed..43bd99fc6ab065cc200dc47c4faa1250152cb3ad 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -117,13 +117,13 @@ FluidbookResize.prototype = {
 
         var fw = this.bookScale * fww;
         var fh = this.bookScale * fhh;
-        $("#fluidbook").transform({
+        $("#fluidbook,#shadow").transform({
             scale: [this.bookScale, this.bookScale],
             origin: ['50%', '50%']
         });
         var top = marginTop + (ah - fhh) / 2;
         var left = marginLeft + (aw - fww) / 2;
-        $("#fluidbook").css({
+        $("#fluidbook,#shadow").css({
             top: top,
             left: left,
             width: fww,
@@ -199,7 +199,7 @@ FluidbookResize.prototype = {
         }
 
         this.resizeSplash();
-        
+
         if (this.fluidbook.form) {
             this.fluidbook.form.resize();
         }

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index 3e59c94c9ac8616215bc3b2bf7f4a0c7fafc4cb7..f67d02a7eb4b23193456110bd91416f47c139ca3 100644 (file)
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -180,7 +180,7 @@ FluidbookZoom.prototype = {
             $this.triggerEvent(((this.zoom == 1) ? 'out' : 'in') + '.end');
         }
 
-        if (this.desktopScale > 1) {
+        if (this.zoom > 1) {
             $("body").addClass('zoomed');
         } else {
             $("body").removeClass('zoomed');

diff --git a/style/fluidbook.less b/style/fluidbook.less
index f448c2eeaae2feb69a1308ab5afe975b9147d867..be6ca32c5e9bd1ba03bb42441bf5bf33bce55291 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -179,12 +179,16 @@ body, html {
 
 /* Desktop devices */
 
-.desktop #links {
-       cursor: zoom-in;
-}
+.desktop {
+       #links {
+               cursor: zoom-in;
 
-.desktop.zoomed #links {
-       cursor: zoom-out;
+       }
+       .zoomed {
+               #links {
+                       cursor: zoom-out;
+               }
+       }
 }
 
 #links .link {
@@ -338,41 +342,18 @@ body, html {
        }
 }
 
-// Fix for #1489
-
-.chrome.desktop {
-
-       .doublePage {
-               overflow: visible;
-       }
-
-       #pages {
-               -moz-perspective: 5000px;
-               -webkit-perspective: 5000px;
-               -o-perspective: 5000px;
-               -ms-perspective: 5000px;
-               perspective: 5000px;
-       }
-
-       .page {
-               //-webkit-transform: translateZ(0);
-               //-o-transform: translateZ(0);
-               //-ms-transform: translateZ(0);
-               //transform: translateZ(0);
-               //-moz-transform: translateZ(0);
-       }
-}
-
 /* Shadow */
 
-@shadow-height: 180px;
-@shadow-offset: 40px;
+@shadow-height: 160px;
+@shadow-offset: 0px;
 #shadow {
        position: absolute;
        top: 0px;
        left: 0px;
        width: unit(@book-page-width*2, px);
        height: unit(@book-page-height, px);
+       pointer-events: none;
+       mix-blend-mode: multiply;
        /* !!!!!!!!!!! non !!!!!!!!!!!!!!!!!
        -webkit-transform: translateZ(0);
         -moz-transform: translateZ(0);
@@ -398,12 +379,19 @@ body, html {
                        }
                }
        }
+}
 
-       > .edge {
+#edges {
+       position: absolute;
+       top: 0px;
+       left: 0px;
+       width: unit(@book-page-width*2, px);
+       height: unit(@book-page-height, px);
+       pointer-events: none;
 
+       > .edge {
                position: absolute;
                top: 0;
-
                &.right {
                        @right-edge-width: 48px;
                        @right-edge-bottom-offset: 45px;
@@ -2153,3 +2141,4 @@ body > input {
        font-weight: 600;
        font-style: normal;
 }
+