From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 20 Jul 2017 13:48:58 +0000 (+0200)
Subject: WIP #1585 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d56b4d1b8ca93407c65480c00291435ed26d7ed8;p=fluidbook-html5.git

WIP #1585 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 9a10d2b7..26835faf 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -8,7 +8,10 @@ FluidbookMenu.prototype = {
         this.index = new FluidbookIndex(this.fluidbook);
         var $this = this;
 
-        $(document).on('click', ".mview .back", function () {
+        // Note: iOS won't catch click events unless the element has a cursor:pointer style
+        // This was added for #viewOverlay in the CSS
+        // More details: https://stackoverflow.com/a/16006333
+        $(document).on('click', ".mview .back, #viewOverlay", function () {
             var currentHash = window.location.hash;
             window.location.hash = '/page/' + $this.fluidbook.currentPage;
             if (window.location.hash == currentHash) {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ed549d74..dfb9d03a 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -870,7 +870,7 @@ html.ios body.portrait #interface {
 	width: 100%;
 	height: 100%;
 	z-index: 21;
-	cursor: default;
+	cursor: pointer; // Needed or click events don't work on iOS (see: https://stackoverflow.com/a/16006333)
 	.overlayBackground();
 }
 
@@ -988,6 +988,7 @@ html.ios body.portrait #interface {
 				width: 60px;
 				height: 60px;
 				padding: 22px;
+				line-height: 1;
 				background-color: @menu-button-background;
 				z-index: 1;
 			}