[web] add connection indicator

1 files changed, 27 insertions, 3 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index aa9abc76..55fc59d0 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,5 +1,7 @@
 @import (reference) '../../node_modules/bootstrap/less/variables.less';
 @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
+@import (reference) "../../node_modules/bootstrap/less/mixins/labels.less";
+@import (reference) "../../node_modules/bootstrap/less/labels.less";
 
 @menu-height: 85px;
 
@@ -7,7 +9,7 @@ header {
     padding-top: 6px;
     background-color: white;
     @separator-color: lighten(grey, 15%);
-    menu {
+    > div {
         display: block;
         margin: 0;
         padding: 0;
@@ -45,7 +47,6 @@ header {
     }
 }
 
-
 .menu-entry {
     text-align: left;
     height: (@menu-height - @menu-legend-height)/3;
@@ -63,7 +64,6 @@ header {
     }
 }
 
-
 .menu-legend {
     height: @menu-legend-height;
     text-align: center;
@@ -130,3 +130,27 @@ header {
         }
     }
 }
+
+.connection-indicator {
+    .label();
+    float: right;
+    margin: 5px;
+    opacity: 1;
+    transition: all 1s linear;
+
+    &.init, &.fetching {
+        background-color: @label-info-bg;
+    }
+    &.established {
+        background-color: @label-success-bg;
+        opacity: 0;
+    }
+    &.error {
+        background-color: @label-danger-bg;
+        transition: all 0.2s linear;
+    }
+    &.offline {
+        background-color: @label-warning-bg;
+        opacity: 1;
+    }
+}