From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 4 Apr 2019 12:30:14 +0000 (+0200)
Subject: wip #2657 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e4a4499a61ef53546e14335b5db6cb4f05356a42;p=fluidbook-html5.git

wip #2657 @3
---

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 041f2efc..d00d0941 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -11,35 +11,46 @@ function FluidbookMobileFirst(fluidbook) {
 FluidbookMobileFirst.prototype = {
     init: function () {
         $("html").addClass('mobilefirst');
+        $("#scroll").append($('#shadow'));
+        $("#shadow .side").remove();
         this.fluidbook.datas.soundTheme = '';
     },
 
     beforeTransition: function (page) {
         var dimensions = this.fluidbook.loader.getPageDimensions(page);
+        $('#pages .mf-nav').css('opacity', 0);
+        var max = Math.max(dimensions.height, $("#currentDoublePage").outerHeight());
         $("#nextDoublePage .page, #nextDoublePage").css({
             height: dimensions.height,
             maxHeight: dimensions.height
         });
 
+        $("#pages,#fluidbook").css({height: max, maxHeight: max});
+
         TweenLite.to("#scroll", this.fluidbook.pagetransitions.getTransitionDuration(page), {scrollTo: 0});
     },
 
     afterTransition: function (page) {
         $('#pages .mf-nav').remove();
         $("#pages").append(this.getFooterNavigation(page));
+
+        setTimeout(function () {
+            $('#pages .mf-nav').css('opacity', 1);
+        }, 10);
+
         this.fluidbook.resize.resize();
-        var $this=this;
-        setTimeout(function(){
+        var $this = this;
+        setTimeout(function () {
             this.fluidbook.resize.resize();
-        },1000);
+        }, 1000);
     },
 
     resize: function () {
         var bh = $("#currentDoublePage").outerHeight();
         $('#pages .mf-nav').css('top', bh);
-        var h = bh+$("#pages .mf-nav").outerHeight();
+        $("#links,#searchHighlights,#shadow").css({height: bh});
 
-        $("#links,#searchHighlights").css({height:bh});
+        var h = bh + $("#pages .mf-nav").outerHeight();
         $("#pages,#fluidbook").css({height: h});
         $("#pages").css('maxHeight', h);
     },
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index cc867e5f..9dce2ddf 100644
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -88,15 +88,18 @@ FluidbookTouch.prototype = {
         hmf.add(new Hammer.Pan({threshold: 0}));
         hmf.on('panmove', function (event) {
             console.log('panmove');
-            $this.drag(event);
-            event.preventDefault();
+            if ($this.drag(event)) {
+                event.preventDefault();
+            }
         });
         hmf.on('panend', function (event) {
             console.log('panend');
-            $this.drag(event, true);
+            var prevent = $this.drag(event, true);
             $this.startX = $this.startY = -1;
             $this.panX = $this.panY = 0;
-            event.preventDefault();
+            if (prevent) {
+                event.preventDefault();
+            }
         });
     },
 
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index 8aac51fc..acb337ec 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -1,6 +1,15 @@
-#shadow {
-  .mobilefirst & {
-    display: none;
+.mobilefirst {
+  #shadow {
+    box-shadow: rgba(0, 0, 0, @shadow-opacity) 0 0 10px;
+
+    .shadow.bottom {
+      height: 80px;
+      bottom: -80px;
+      background-size: unit(@book-page-width - 10, px) 80px;
+      background-position: 50% 100%;
+      background-repeat: no-repeat;
+      opacity: @shadow-opacity*0.25;
+    }
   }
 }
 
@@ -13,6 +22,9 @@
   color: @page-number-color;
   font-size: unit(20*@css-scale, px);
   font-weight: 600;
+  transition: opacity 0.25s;
+  opacity: 0;
+
   @media @small {
     @s: 1.25;
     font-size: unit(20*@s*@css-scale, px);