index.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  23. .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
  24. .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
  25. .rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }
  26. </style>
  27. </head>
  28. <body ng-app="pdfReader">
  29. <div class="columns" ng-controller="PdfListController">
  30. <div class="column">
  31. <div class="columns">
  32. <div class="column">
  33. <span class="is-size-3">Documents</span>
  34. </div>
  35. <div class="column is-narrow is-centered">
  36. <div class="field">
  37. <div class="control has-icons-left">
  38. <input class="input" type="text" placeholder="Search a document" ng-model="searchManual">
  39. <span class="icon is-small is-left">
  40. <i class="fa fa-search"></i>
  41. </span>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <table class="table is-striped is-fullwidth">
  47. <tbody>
  48. <tr dir-paginate="pdf in pdfs | filter:searchManual | orderBy:'title' | itemsPerPage:10">
  49. <td>{{pdf.title}}</td>
  50. <td><a href="#" ng-click="view(pdf)" class="button is-primary is-small"><i class="fa fa-eye"></i></a></td>
  51. </tr>
  52. </tbody>
  53. <tfoot>
  54. <td>
  55. <dir-pagination-controls
  56. max-size="7"
  57. direction-links="true"
  58. boundary-links="true"
  59. template-url="partials/pagination.html"
  60. >
  61. </dir-pagination-controls>
  62. </td>
  63. </tfoot>
  64. </table>
  65. </div>
  66. <div class="column box">
  67. <div class="is-size-3">
  68. <span>
  69. {{pdfName}}
  70. </span>
  71. <progress class="progress is-small is-primary {{loading}}" value="{{progress}}" max="100">{{progress}}%</progress>
  72. </div>
  73. <div class="column is-narrow is-centered">
  74. <ng-pdf template-url="partials/viewer.html" scale="page-fit"></ng-pdf>
  75. </div>
  76. </div>
  77. </body>
  78. </html>