Febbweiss/pdf-reader
1
0
Fork 0
mirror of https://github.com/Febbweiss/pdf-reader.git synced 2026-03-04 14:15:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optim: improve PDF reader controls layout

Browse Source
This commit is contained in:
febbweiss
2017-11-15 09:46:25 +00:00
parent bdc100001b
commit b36ff572e2
2 changed files with 50 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -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>

52
partials/viewer.html
View File

@@ -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>