Febbweiss/pdf-reader
1
0
Fork 0
mirror of https://github.com/Febbweiss/pdf-reader.git synced 2026-03-04 22:25:38 +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; display: none;
} }
.pageInput {
width: 15%;
}
.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); } .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
@@ -75,13 +79,12 @@
</table> </table>
</div> </div>
<div class="column box"> <div class="column box">
<div class="is-size-3"> <div class="is-size-3">
<span> <span>
{{pdfName}} {{pdfName}}
</span> </span>
<progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress> <progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
</div> </div>
<div class="column is-narrow is-centered">
<ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf> <ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf>
</div> </div>
</div> </div>

52
partials/viewer.html
View File

@@ -1,13 +1,41 @@
<nav ng-class="getNavStyle(scroll)"> <div ng-if="pdfName">
<button class="button fa fa-caret-left" ng-click="goPrevious()"></button> <div class="is-pulled-left">
<button class="button fa fa-caret-right" ng-click="goNext()"></button> <a href="{{pdfUrl}}" class="field button fa fa-download"></a>
</div>
<button class="button fa fa-search-plus" ng-click="zoomIn()"></button> <nav ng-class="getNavStyle(scroll)" class="is-pulled-right" >
<button class="button fa fa-file-o" ng-click="fit()"></button>
<button class="button fa fa-search-minus" ng-click="zoomOut()"></button> <div class="field">
<div class="field-body">
<button class="button fa fa-repeat" ng-click="rotate()"></button> <div class="field is-grouped-right">
</nav> <p class="control">
<div class="notification is-primary is-danger {{errorStatus}}"> <button class="button is-normal fa fa-caret-left" ng-click="goPrevious()"></button>
{{error}} <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> </div>