From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 4 Oct 2019 16:27:46 +0000 (+0200)
Subject: fix #3096 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c3a37232d080f5a01437c7c2141e8ba0a0a0fb5d;p=fluidbook-html5.git

fix #3096 @0.75
---

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index c22faf2b..334338b3 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -149,7 +149,7 @@ FluidbookMobileFirst.prototype = {
         if (visibility.previous) {
             footer += '<a class="previous" href="#/page/' + (page - 1) + '">' + getSpriteIcon('interface-previous-simple') + __('Previous') + '</a>';
         }
-        footer += '<span>' + page + '/' + this.fluidbook.datas.pages + '</span>';
+        footer += '<div class="pagenumbers">' + page + '/' + this.fluidbook.datas.pages + '</div>';
         if (visibility.next) {
             footer += '<a class="next" href="#/page/' + (page + 1) + '">' + __('Next') + getSpriteIcon('interface-next-simple') + '</a>';
         }
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index c67bebc1..de340012 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -213,11 +213,11 @@
 
   position: absolute;
   left: 0;
+  font-size: unit(16*@css-scale*@mfscale, px);
   width: 100%;
-  height: unit(110*@css-scale*@mfscale, px);
+  height: 5.5em;
   overflow: hidden;
   color: @page-number-color;
-  font-size: unit(20*@css-scale*@mfscale, px);
   font-weight: 600;
   transition: opacity .15s;
 
@@ -226,19 +226,19 @@
   }
 
   @media @small {
-    @s: 1.25;
-    font-size: unit(20*@s*@css-scale*@mfscale, px);
-    padding: unit(30*@s*@css-scale*@mfscale, px) 0;
-    height: unit(110*@s*@css-scale*@mfscale, px);
+    padding: 1.5em 0;
+    height: 5.5em;
   }
 
-  span {
+  .pagenumbers {
     display: block;
     text-align: center;
-    margin-top: 0.9em;
-    @media @small {
-      margin-top: 0.7em;
-    }
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 1.9em;
+    font-size: 1.1em;
   }
 
   a {
@@ -249,13 +249,13 @@
     line-height: 1;
     font-weight: 400;
     position: absolute;
-    top: 1.5em;
+    top: 1.3em;
     height: 2.5em;
-    width: 25%;
+    width: 30%;
     text-align: center;
     padding-top: 0.7em;
     @media @small {
-      width: 40%;
+      width: 35%;
     }
 
     &.next {
@@ -284,7 +284,7 @@
 
     svg {
       position: absolute;
-      top: 0.8em;
+      top: 0.7em;
       height: 1em;
       width: auto;
     }
@@ -297,11 +297,11 @@
     width: 100%;
     height: 100%;
     transition: all .6s;
-    padding: unit(30*@css-scale*@mfscale, px) 0;
+    padding: 1.3em 0;
 
     &.toreveal {
       opacity: 0;
-      top: 30px;
+      top: 3em;
     }
   }