add dual page flip buttons

5 files changed, 79 insertions, 16 deletions

diff --git a/reader.css b/reader.css
index 7eaa496..9dd83a1 100644
--- a/reader.css
+++ b/reader.css
@@ -63,15 +63,38 @@
 #left,
 #right {
   position: absolute;
-  top: 48px;
-  bottom: 48px;
+  top: 0px;
+  bottom: 0px;
   width: 64px;
   z-index: 10;
   cursor: pointer;
+  opacity: 0.2;
+  display: flex;
+  flex-direction: column;
+}
+#left .top,
+#right .top,
+#left .bottom,
+#right .bottom {
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0.2;
+}
+#left .top,
+#right .top {
+  height: 25%;
+}
+#left .bottom,
+#right .bottom {
+  height: 75%;
+}
+#left .separator,
+#right .separator {
+  margin: 0 24px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: #555;
+  justify-self: center;
 }
 #left {
   left: 0;
diff --git a/reader.css.map b/reader.css.map
index 4a2694c..0f3bab9 100644
--- a/reader.css.map
+++ b/reader.css.map
@@ -1 +1 @@
-{"version":3,"sources":["reader.less"],"names":[],"mappings":"AAAA,QAAgC;EAC/B;IACC,aAAA;;;AAIF,QAA+B;EAC9B;IACC,aAAA;;;AAIF;EACC,YAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;;AAGD;EACC,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;EACA,gBAAA;;AAGD,OAAO;EACN,gBAAA;;AAGD,OAAO,UAAW;AAClB,OAAO,cAAe;EACrB,yBAAA;;AAGD,OAAO,aAAc;EACpB,SAAA;;AAGD,OAAO,cAAe;EACrB,YAAA;;AAGD,OAAO,UAAW;EACjB,eAAA;EACA,WAAA;EACA,YAAA;;AAGD,OAAO,SAAS,IAAI,gBAAiB,IAAG;EACvC,cAAA;;AAGD,OAAO,SAAU;EAChB,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;;AAGD;AAAO;EACN,kBAAA;EACA,SAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;;AAGD;EACC,OAAA;;AAGD;EACC,QAAA;;AAGD;EACC,UAAA;;AAGD;EACC,yBAAA;;AAGD;EACC,sBAAA;;AAGD,IAAI,KACH;AADD,IAAI,KACM;EACR,gBAAA","file":"reader.css"}
\ No newline at end of file
+{"version":3,"sources":["reader.less"],"names":[],"mappings":"AAAA,QAAgC;EAC/B;IACC,aAAA;;;AAIF,QAA+B;EAC9B;IACC,aAAA;;;AAIF;EACC,YAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;;AAGD;EACC,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;EACA,gBAAA;;AAGD,OAAO;EACN,gBAAA;;AAGD,OAAO,UAAW;AAClB,OAAO,cAAe;EACrB,yBAAA;;AAGD,OAAO,aAAc;EACpB,SAAA;;AAGD,OAAO,cAAe;EACrB,YAAA;;AAGD,OAAO,UAAW;EACjB,eAAA;EACA,WAAA;EACA,YAAA;;AAGD,OAAO,SAAS,IAAI,gBAAiB,IAAG;EACvC,cAAA;;AAGD,OAAO,SAAU;EAChB,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;;AAGA;AAAO;EACP,kBAAA;EACA,QAAA;EACA,WAAA;EACA,WAAA;EACA,WAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;;AATA,KAWC;AAXM,MAWN;AAXD,KAWO;AAXA,MAWA;EACL,aAAA;EACA,mBAAA;EACA,uBAAA;;AAdF,KAiBC;AAjBM,MAiBN;EACC,WAAA;;AAlBF,KAqBC;AArBM,MAqBN;EACC,WAAA;;AAtBF,KAyBC;AAzBM,MAyBN;EACC,cAAA;EACA,uBAAA;EACA,qBAAA;EACA,sBAAA;EACA,oBAAA;;AAIH;EACC,OAAA;;AAGD;EACC,QAAA;;AAGD;EACC,UAAA;;AAGD;EACC,yBAAA;;AAGD;EACC,sBAAA;;AAGD,IAAI,KACH;AADD,IAAI,KACM;EACR,gBAAA","file":"reader.css"}
\ No newline at end of file
diff --git a/reader.html b/reader.html
index 0020265..29bd8e9 100755
--- a/reader.html
+++ b/reader.html
@@ -77,8 +77,27 @@
 	<div id="splash" class="splash text-muted" data-bind="visible: !fileName(), html: errorMessage"></div>
 	<div id="loading" class="splash text-muted" data-bind="visible: isLoading()"><img src="img/spinning-circles.svg"></div>
 
-	<div id="left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></div>
-	<div id="right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
+	<div id="left">
+		<div class="top">
+			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+		</div>
+		<div class="separator">
+		</div>
+		<div class="bottom">
+			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+		</div>
+	</div>
+
+	<div id="right">
+		<div class="top">
+			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+		</div>
+		<div class="separator">
+		</div>
+		<div class="bottom">
+			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+		</div>
+	</div>
 
 	<div id="reader" data-bind="css: { 'fit-width': fitToWidth, 'fit-size': fitSize, 'flip-columns': flipColumns, 'single-column': singleColumn }">
 		<img class="left-page" data-bind="attr: { src: getLeftPage }">
diff --git a/reader.js b/reader.js
index d7f46a2..5472eb3 100755
--- a/reader.js
+++ b/reader.js
@@ -578,7 +578,7 @@ $(document).ready(function () {
 		model.flipColumns(e.target.checked);
 	});
 
-	$("#left").on("click", (e) => {
+	$("#left .top, #right .top").on("click", (e) => {
 		e.stopPropagation();
 
 		let page = model.currentPage();
@@ -593,7 +593,7 @@ $(document).ready(function () {
 
 	});
 
-	$("#right").on("click", (e) => {
+	$("#left .bottom, #right .bottom").on("click", (e) => {
 		e.stopPropagation();
 
 		let page = model.currentPage();
@@ -645,11 +645,11 @@ $(document).ready(function () {
 
 		switch (e.which) {
 			case 37:
-				$("#left").click();
+				$("#left .top").click();
 				break;
 			case 32:
 			case 39:
-				$("#right").click();
+				$("#left .bottom").click();
 				break;
 		}
 	});
diff --git a/reader.less b/reader.less
index 7d73f31..2394213 100644
--- a/reader.less
+++ b/reader.less
@@ -71,17 +71,38 @@
 	height: auto;
 }
 
-#left, #right {
+ #left, #right {
 	position: absolute;
-	top: 48px;
-	bottom: 48px;
+	top: 0px;
+	bottom: 0px;
 	width: 64px;
 	z-index: 10;
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	opacity: 0.2;
+	display: flex;
+	flex-direction: column;
+
+	 .top, .bottom {
+		 display: flex;
+		 align-items: center;
+		 justify-content: center;
+	 }
+
+	 .top {
+		 height : 25%;
+	 }
+
+	 .bottom {
+		 height : 75%;
+	 }
+
+	 .separator {
+		 margin : 0 24px;
+		 border-top-style: solid;
+		 border-top-width: 1px;
+		 border-top-color: #555;
+		 justify-self: center;
+	 }
 }
 
 #left {