From b36ff572e2cb5465a5ed4dbddfa71f4824b0dc14 Mon Sep 17 00:00:00 2001
From: febbweiss <fabrice.ecaille@gmail.com>
Date: Wed, 15 Nov 2017 09:46:25 +0000
Subject: [PATCH] Optim: improve PDF reader controls layout

---
 index.html           | 17 +++++++++------
 partials/viewer.html | 52 ++++++++++++++++++++++++++++++++++----------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index f6f3d77..2a7398e 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,10 @@
 				display: none;
 			}
 			
+			.pageInput {
+				width: 15%;
+			}
+			
 			.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
 			.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
 			.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
@@ -75,13 +79,12 @@
 				</table>
 			</div>
 			<div class="column box">
-					<div class="is-size-3">
-						<span>
-							{{pdfName}}
-						</span>
-						<progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
-						</div>
-					<div class="column is-narrow is-centered">
+				<div class="is-size-3">
+					<span>
+						{{pdfName}}
+					</span>
+					<progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
+				</div>
 				<ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf>
 			</div>
 		</div>	
diff --git a/partials/viewer.html b/partials/viewer.html
index 673c441..a2cb42f 100644
--- a/partials/viewer.html
+++ b/partials/viewer.html
@@ -1,13 +1,41 @@
-<nav ng-class="getNavStyle(scroll)">
-  <button class="button fa fa-caret-left" ng-click="goPrevious()"></button>
-  <button class="button fa fa-caret-right" ng-click="goNext()"></button>
-
-  <button class="button fa fa-search-plus" ng-click="zoomIn()"></button>
-  <button class="button fa fa-file-o" ng-click="fit()"></button>
-  <button class="button fa fa-search-minus" ng-click="zoomOut()"></button>
-
-  <button class="button fa fa-repeat" ng-click="rotate()"></button>
-</nav>
-<div class="notification is-primary is-danger {{errorStatus}}">
-  {{error}}
+<div ng-if="pdfName">
+  <div class="is-pulled-left">
+    <a href="{{pdfUrl}}" class="field button fa fa-download"></a>
+  </div>
+  <nav ng-class="getNavStyle(scroll)" class="is-pulled-right" >
+    
+      <div class="field">
+        <div class="field-body">
+          <div class="field is-grouped-right">
+            <p class="control">
+              <button class="button is-normal fa fa-caret-left" ng-click="goPrevious()"></button>
+              <button class="button is-normal fa fa-caret-right" ng-click="goNext()"></button>
+            </p>
+          </div>
+          
+          <div class="field is-horizontal has-addon pageInput">
+            <p class="control">
+              <input class="input" type="text" min=1 ng-model="pageNum">
+            </p>
+            <p class="control">
+              <a class="button is-static">
+                {{pageCount}}
+              </a>
+            </p>
+          </div>
+          
+          <div class="field is-grouped-right">
+            <p class="control">
+              <button class="button is-normal fa fa-search-plus" ng-click="zoomIn()"></button>
+              <button class="button is-normal fa fa-file-o" ng-click="fit()"></button>
+              <button class="button is-normal fa fa-search-minus" ng-click="zoomOut()"></button>
+              <button class="button is-normal fa fa-repeat" ng-click="rotate()"></button>
+            </p>
+          </div>
+        </div>
+      </div>
+  </nav>
+  <div class="notification is-primary is-danger {{errorStatus}}">
+    {{error}}
+  </div>
 </div>
\ No newline at end of file