Implement a disconnected indicator

Fixes #451

3 files changed, 25 insertions, 0 deletions

diff --git a/client/components/main/header.jade b/client/components/main/header.jade
index 711e272c..bd0af880 100644
--- a/client/components/main/header.jade
+++ b/client/components/main/header.jade
@@ -45,3 +45,12 @@ template(name="header")
         else
           a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
             img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
+
+  if appIsOffline
+    +offlineWarning
+
+template(name="offlineWarning")
+  .offline-warning
+    p
+      i.fa.fa-warning
+      | {{_ 'app-is-offline'}}
diff --git a/client/components/main/header.js b/client/components/main/header.js
index 73024aa9..0337c72b 100644
--- a/client/components/main/header.js
+++ b/client/components/main/header.js
@@ -6,6 +6,10 @@ Template.header.helpers({
   hideLogo() {
     return Utils.isMiniScreen() && Session.get('currentBoard');
   },
+
+  appIsOffline() {
+    return !Meteor.status().connected;
+  },
 });
 
 Template.header.events({
diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index 0b2ad860..0e35d38a 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -196,3 +196,15 @@
 
       li
         height: 28px
+
+.offline-warning
+  width: 100%
+  text-align: center
+  padding: 0
+  margin: 0
+  background: #F8ECBD
+  clear: both
+
+  p
+    margin: 7px
+    padding: 0