From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 3 Oct 2017 09:23:07 +0000 (+0200)
Subject: Merge branch 'master' into burgermenu
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fa10187ad96e9b1820675af86c036d7907c9dfdf;p=fluidbook-html5.git

Merge branch 'master' into burgermenu
---

fa10187ad96e9b1820675af86c036d7907c9dfdf
diff --cc _index.html
index d55d4782,9084017d..8f70248e
--- a/_index.html
+++ b/_index.html
@@@ -24,10 -24,17 +24,18 @@@
  <div id="message"><!-- $message --></div>
  <!--googleon: all-->
  <div id="main">
- 	<div id="background"></div>
+ 	<div id="background">
+ 
+ 		<div id="shadow">
+ 			<div class="shadow bottom left"></div>
+ 			<div class="shadow bottom right"></div>
+ 			<div class="shadow side left"></div>
+ 			<div class="shadow side right"></div>
+ 		</div>
+ 	</div>
  	<header>
 -		<nav id="nav"></nav>
 +		<nav id="horizontalNav"></nav>
 +		<nav id="menu"></nav>
  		<div id="search"></div>
  		<a id="logo" href="#"></a>
  	</header>
diff --cc js/libs/fluidbook/fluidbook.zoom.js
index 64833d64,ec7783e9..1e755137
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@@ -160,12 -160,9 +160,12 @@@ FluidbookZoom.prototype = 
              animation.origin = ['50%', '50%'];
          }
  
-         var hiddenElements = $("header,footer,#interface,#links a.bookmark");
+         var hiddenElements = $("header,footer,#interface,#links a.bookmark,#shadow");
  
          if (this.zoom != 1) {
 +
 +            this.fluidbook.help.hide(); // Hide the help view if it's showing
 +
              if (!$('header').hasClass('hidden')) {
                  $(hiddenElements).addClass('hidden');
                  this.hideInterfaceTimeout = setTimeout(function () {
diff --cc style/fluidbook.less
index 85718847,cdb902df..e3d401f5
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@@ -344,14 -415,88 +415,88 @@@ body, html 
  	position: absolute;
  	top: 0px;
  	left: 0px;
- }
+ 	width: unit(@book-page-width*2, px);
+ 	height: unit(@book-page-height, px);
+ 	pointer-events: none;
  
- .portrait #shadow > div.right {
- 	display: none;
+ 	.portrait & {
+ 		display: none;
+ 	}
+ 
+ 	@edge-scale: 1;
+ 
+ 	> .edge {
+ 		position: absolute;
+ 		top: 0;
+ 		height: 100%;
+ 
+ 		> div {
+ 			background-size: 100% 100%;
+ 			position: absolute;
+ 			background-repeat: no-repeat;
+ 		}
+ 
+ 		.top {
+ 			top: 0;
+ 			height: unit(12*@edge-scale, px);
+ 		}
+ 
+ 		.bottom {
+ 			bottom: 0;
+ 			height: unit(22*@edge-scale, px);
+ 		}
+ 
+ 		.middle {
+ 			top: unit(12*@edge-scale, px);
+ 			bottom: unit(22*@edge-scale, px);
+ 		}
+ 
+ 		&.left {
+ 			left: unit(-17*@edge-scale, px);
+ 			width: unit(17*@edge-scale, px);
+ 
+ 			div {
+ 				width: unit(17*@edge-scale, px);
+ 			}
+ 
+ 			.top {
+ 				background-image: url("../images/edges/edge-left-top.png");
+ 			}
+ 
+ 			.bottom {
+ 				background-image: url("../images/edges/edge-left-bottom.png");
+ 			}
+ 
+ 			.middle {
+ 				background-image: url("../images/edges/edge-left-middle.png");
+ 			}
+ 		}
+ 
+ 		&.right {
+ 			right: unit(-11*@edge-scale, px);
+ 			width: unit(11*@edge-scale, px);
+ 
+ 			div {
+ 				width: unit(11*@edge-scale, px);
+ 			}
+ 
+ 			.top {
+ 				background-image: url("../images/edges/edge-right-top.png");
+ 			}
+ 
+ 			.bottom {
+ 				background-image: url("../images/edges/edge-right-bottom.png");
+ 			}
+ 
+ 			.middle {
+ 				background-image: url("../images/edges/edge-right-middle.png");
+ 			}
+ 		}
+ 	}
  }
  
 -/* Nav */
 -#nav #locales {
 +/* Locale Flag icon */
 +.locale-flag {
  	display: inline-block;
  	width: 22px;
  	height: 17px;