From a20f814265cb9fea8f2c613a3d8c93b3e6525df0 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Wed, 27 Jul 2016 17:21:47 +0200 Subject: [PATCH] Refactor the mobile viewer example This mostly removes B2G-specific code and adds the styles from the B2G components. --- examples/mobile-viewer/README.md | 11 ++++++ examples/mobile-viewer/viewer.css | 20 +++++++++- examples/mobile-viewer/viewer.html | 60 ++++++++++++------------------ examples/mobile-viewer/viewer.js | 60 ++++++++++-------------------- 4 files changed, 72 insertions(+), 79 deletions(-) create mode 100644 examples/mobile-viewer/README.md diff --git a/examples/mobile-viewer/README.md b/examples/mobile-viewer/README.md new file mode 100644 index 000000000..767f915d4 --- /dev/null +++ b/examples/mobile-viewer/README.md @@ -0,0 +1,11 @@ +## Overview + +Example to demonstrate PDF.js library usage with a viewer optimized for mobile usage. + +## Getting started + +Build PDF.js using `gulp dist` and run `gulp server` to start a web server. +You can then work with the mobile viewer at +http://localhost:8888/examples/mobile-viewer/viewer.html. + +Refer to `viewer.js` for the source code of the mobile viewer. diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css index 2d494e91f..bd0b7790c 100644 --- a/examples/mobile-viewer/viewer.css +++ b/examples/mobile-viewer/viewer.css @@ -1,4 +1,4 @@ -/* Copyright 2012 Mozilla Foundation +/* Copyright 2016 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -25,6 +25,23 @@ html { font-size: 10px; } +header { + background-color: #f4f4f4; +} + +header h1 { + border-bottom: 1px solid #d8d8d8; + color: #858585; + font-size: 23px; + font-style: italic; + font-weight: normal; + overflow: hidden; + padding: 10px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} + body { background: url(images/document_bg.png); color: #fff; @@ -57,7 +74,6 @@ footer { box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75); } - .toolbarButton { display: block; padding: 0; diff --git a/examples/mobile-viewer/viewer.html b/examples/mobile-viewer/viewer.html index 7baa1f7f4..9c2eee125 100644 --- a/examples/mobile-viewer/viewer.html +++ b/examples/mobile-viewer/viewer.html @@ -1,6 +1,6 @@ - - - + + - - - - - - - - -
- -

- - -
- - - - - - - -
-
+
+

+
@@ -66,23 +44,33 @@ limitations under the License.
-