aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2018-07-19 20:29:38 +0200
committerpacien2018-07-19 20:29:38 +0200
commit19163b68d3ad0cf47d01e7e640a50f515b31f187 (patch)
tree7168f87602abe641330933fb06be1675dd8bb76c
parent69c38a75cc0dd212026f21c1ecf356c4bb835c5a (diff)
downloadbeamer-viewer-19163b68d3ad0cf47d01e7e640a50f515b31f187.tar.gz
Add offline capability indicator and links
-rw-r--r--index.html54
-rw-r--r--pointless/viewer/init.js3
-rw-r--r--pointless/viewer/viewer.css41
3 files changed, 80 insertions, 18 deletions
diff --git a/index.html b/index.html
index b402c8a..90f9aad 100644
--- a/index.html
+++ b/index.html
@@ -18,25 +18,43 @@
18 <canvas id="screen" class="centered"></canvas> 18 <canvas id="screen" class="centered"></canvas>
19 19
20 <div id="welcomeScreen" class="centered"> 20 <div id="welcomeScreen" class="centered">
21 <h1>Pointless Viewer</h1> 21 <header>
22 22 <h1>Pointless Viewer</h1>
23 <p>This viewer accepts double-width PDF presentations of the following shape:</p> 23 <span id="offlineCapable">(available offline)</span>
24 <table> 24 </header>
25 <tr> 25
26 <td>SLIDES</td> 26 <div>
27 <td>NOTES</td> 27 <p>This viewer accepts double-width PDF presentations of the following shape:</p>
28 </tr> 28 <table>
29 </table> 29 <tr>
30 30 <td>SLIDES</td>
31 <p> 31 <td>NOTES</td>
32 (L<sup>A</sup>T<sub>E</sub>X-Beamer users may use 32 </tr>
33 <code>\setbeameroption{show notes on second screen=right}</code>) 33 </table>
34 </p> 34
35 35 <p>
36 <p>Please select a PDF presentation file to open.</p> 36 (L<sup>A</sup>T<sub>E</sub>X-Beamer users may use
37 <input id="fileInput" type="file" multiple="false"/> 37 <code>\setbeameroption{show notes on second screen=right}</code>)
38 </p>
39
40 <p>
41 Please select a PDF file to load.
42 Slides will be opened in a new window.
43 </p>
44
45 <input id="fileInput" type="file" multiple="false"/>
46 </div>
47
48 <div>
49 <ul>
50 <li><a href="https://pacien.org">&copy; 2018 Pacien</a></li>
51 <li><a href="https://github.com/pacien/pointless-viewer/issues">Bug tracker</a></li>
52 <li><a href="https://cgit.pacien.net/public/apps/pointless-viewer/">Source repository</a></li>
53 <li><a href="https://mozilla.github.io/pdf.js/">Powered by PDF.js</a></li>
54 </ul>
55 </div>
38 </div> 56 </div>
39 57
40 <div id="timer" class="notification"></div> 58 <div id="timer" class="notification"></div>
41 <div id="message" class="notification"></div> 59 <div id="message" class="notification"></div>
42 60
diff --git a/pointless/viewer/init.js b/pointless/viewer/init.js
index 9ba881c..dddbf17 100644
--- a/pointless/viewer/init.js
+++ b/pointless/viewer/init.js
@@ -23,6 +23,9 @@ function isController() {
23function initCache() { 23function initCache() {
24 if (!navigator.serviceWorker) return; 24 if (!navigator.serviceWorker) return;
25 navigator.serviceWorker.register("appcache.js"); 25 navigator.serviceWorker.register("appcache.js");
26
27 var offlineCapableIndicator = document.getElementById("offlineCapable");
28 offlineCapableIndicator.style.visibility = "visible";
26} 29}
27 30
28function init() { 31function init() {
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index 57d95f4..d5b766b 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -13,10 +13,33 @@ html, body {
13 height: 100%; 13 height: 100%;
14} 14}
15 15
16a {
17 color: white;
18}
19
20header > h1 {
21 display: inline-block;
22 margin-bottom: 0;
23 margin-right: 0.5rem;
24
25}
26
27header span {
28 font-size: 1.25rem;
29}
30
31#offlineCapable {
32 visibility: hidden;
33}
34
16#welcomeScreen { 35#welcomeScreen {
17 display: none; 36 display: none;
18} 37}
19 38
39#welcomeScreen > div {
40 margin-bottom: 4rem;
41}
42
20#welcomeScreen table { 43#welcomeScreen table {
21 width: 100%; 44 width: 100%;
22 border-collapse: collapse; 45 border-collapse: collapse;
@@ -29,6 +52,24 @@ html, body {
29 height: 8rem; 52 height: 8rem;
30} 53}
31 54
55#welcomeScreen ul {
56 list-style-type: none;
57 margin: 0;
58 padding: 0;
59}
60
61#welcomeScreen li {
62 display: inline;
63}
64
65#welcomeScreen li + li::before {
66 content: " • ";
67}
68
69#fileInput {
70 width: 100%;
71}
72
32.centered { 73.centered {
33 position: absolute; 74 position: absolute;
34 top: 50%; 75 top: 50%;