index.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Documents</title>
  7. <link rel="stylesheet" href="bower_components/bulma/css/bulma.css">
  8. <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  9. <script src="bower_components/pdfjs-dist/build/pdf.js"></script>
  10. <script src="bower_components/pdfjs-dist/build/pdf.worker.js"></script>
  11. <script src="bower_components/angular/angular.min.js"></script>
  12. <script src="bower_components/angular-pdf/dist/angular-pdf.min.js"></script>
  13. <script src="bower_components/angularUtils-pagination/dirPagination.js"></script>
  14. <script src="js/pdf-reader.js"></script>
  15. <style type="text/css">
  16. nav {
  17. margin-bottom: 1.5em;
  18. }
  19. .none {
  20. display: none;
  21. }
  22. .pageInput {
  23. width: 15%;
  24. }
  25. .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  26. .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
  27. .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
  28. .rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }
  29. </style>
  30. </head>
  31. <body ng-app="pdfReader">
  32. <div class="columns" ng-controller="PdfListController">
  33. <div class="column">
  34. <div class="columns">
  35. <div class="column">
  36. <span class="is-size-3">Documents</span>
  37. </div>
  38. <div class="column is-narrow is-centered">
  39. <div class="field">
  40. <div class="control has-icons-left">
  41. <input class="input" type="text" placeholder="Search a document" ng-model="searchManual">
  42. <span class="icon is-small is-left">
  43. <i class="fa fa-search"></i>
  44. </span>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <table class="table is-striped is-fullwidth">
  50. <tbody>
  51. <tr dir-paginate="pdf in pdfs | filter:searchManual | orderBy:'title' | itemsPerPage:10">
  52. <td>{{pdf.title}}</td>
  53. <td><a href="#" ng-click="view(pdf)" class="button is-primary is-small"><i class="fa fa-eye"></i></a></td>
  54. </tr>
  55. </tbody>
  56. <tfoot>
  57. <td>
  58. <dir-pagination-controls
  59. max-size="7"
  60. direction-links="true"
  61. boundary-links="true"
  62. template-url="partials/pagination.html"
  63. >
  64. </dir-pagination-controls>
  65. </td>
  66. </tfoot>
  67. </table>
  68. </div>
  69. <div class="column box">
  70. <div class="is-size-3">
  71. <span>
  72. {{pdfName}}
  73. </span>
  74. <progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
  75. </div>
  76. <ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf>
  77. </div>
  78. </div>
  79. </body>
  80. </html>