Add offline capability indicator and links

2 files changed, 44 insertions, 0 deletions

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() {
 function initCache() {
   if (!navigator.serviceWorker) return;
   navigator.serviceWorker.register("appcache.js");
+  
+  var offlineCapableIndicator = document.getElementById("offlineCapable");
+  offlineCapableIndicator.style.visibility = "visible";
 }
 
 function 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 {
   height: 100%;
 }
 
+a {
+  color: white;
+}
+
+header > h1 {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+
+}
+
+header span {
+  font-size: 1.25rem;
+}
+
+#offlineCapable {
+  visibility: hidden;
+}
+
 #welcomeScreen {
   display: none;
 }
 
+#welcomeScreen > div {
+  margin-bottom: 4rem;
+}
+
 #welcomeScreen table {
   width: 100%;
   border-collapse: collapse;
@@ -29,6 +52,24 @@ html, body {
   height: 8rem;
 }
 
+#welcomeScreen ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#welcomeScreen li {
+  display: inline;
+}
+
+#welcomeScreen li + li::before {
+  content: " • ";
+}
+
+#fileInput {
+  width: 100%;
+}
+
 .centered {
   position: absolute;
   top: 50%;