Update beacon to be more noticable.

web/assets/javascripts/dashboard.js

@@ -117,10 +117,14 @@ var updateStatsSummary = function(data) {
 
 var pulseBeacon = function(){
   $beacon = $('.beacon')
-  $beacon.addClass('pulse').delay(1000).queue(function(){
+  $beacon.find('.dot').addClass('pulse').delay(1000).queue(function(){
     $(this).removeClass('pulse');
     $(this).dequeue();
-  })
+  });
+  $beacon.find('.ring').addClass('pulse').delay(1000).queue(function(){
+    $(this).removeClass('pulse');
+    $(this).dequeue();
+  });
 }
 
 Number.prototype.numberWithDelimiter = function(delimiter) {

web/assets/stylesheets/application.css

@@ -269,29 +269,36 @@ img.smallogo {
 }
 
 .beacon {
+  position: relative;
+  height: 20px;
+  display: inline-block;
+}
+
+.beacon .dot {
+  position: absolute;
+  top: 5px;
+  left: 10px;
   width: 10px;
   height: 10px;
   background-color: #80002d;
-  display: inline-block;
   border-radius: 10px;
-  margin-left: 10px;
-  margin-bottom: 5px;
   box-shadow: 0 0 9px #666;
   -moz-box-shadow: 0 0 9px #666;
   -webkit-box-shadow: 0 0 9px #666;
   border: 3px solid transparent;
+  z-index: 10;
 }
 
-.beacon.pulse {
+.beacon .dot.pulse {
-  -webkit-animation: beacon-pulse 1s ease-out;
+  -webkit-animation: beacon-dot-pulse 1s ease-out;
-  -moz-animation: beacon-pulse 1s ease-out;
+  -moz-animation: beacon-dot-pulse 1s ease-out;
-  animation: beacon-pulse 1s ease-out;
+  animation: beacon-dot-pulse 1s ease-out;
   -webkit-animation-iteration-count: 1;
   -moz-animation-iteration-count: 1;
   animation-iteration-count: 1;
 }
 
-@-webkit-keyframes beacon-pulse {
+@-webkit-keyframes beacon-dot-pulse {
   from {
     background-color: #80002d;
     -webkit-box-shadow: 0 0 9px #666;
@@ -312,7 +319,7 @@ img.smallogo {
   }
 }
 
-@-moz-keyframes beacon-pulse {
+@-moz-keyframes beacon-dot-pulse {
   from {
     background-color: #80002d;
     -webkit-box-shadow: 0 0 9px #666;
@@ -333,7 +340,7 @@ img.smallogo {
   }
 }
 
-@keyframes beacon-pulse {
+@keyframes beacon-dot-pulse {
   from {
     background-color: #80002d;
     -webkit-box-shadow: 0 0 9px #666;
@@ -354,6 +361,71 @@ img.smallogo {
   }
 }
 
+.beacon .ring {
+  position: absolute;
+  top: 7px;
+  left: 12px;
+  width: 0;
+  height: 0;
+  border-radius: 3px;
+  border: 3px solid #80002d;
+  z-index: 5;
+}
+
+.beacon .ring.pulse {
+  -webkit-animation: beacon-ring-pulse 1s;
+  -moz-animation: beacon-ring-pulse 1s;
+  animation: beacon-ring-pulse 1s;
+  -webkit-animation-iteration-count: 1;
+  -moz-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+
+@-webkit-keyframes beacon-ring-pulse {
+  0% {
+      opacity: 1;
+      -webkit-transform: scale(0);
+  }
+  100% {
+      opacity: 0;
+      border-radius: 15px;
+      padding: 8px;
+      top: 0;
+      left: 4px;
+      -webkit-transform: scale(1.5);
+  }
+}
+
+@-moz-keyframes beacon-ring-pulse {
+  0% {
+      opacity: 1;
+      -moz-transform: scale(0);
+  }
+  100% {
+      opacity: 0;
+      border-radius: 15px;
+      padding: 8px;
+      top: 2px;
+      left: 7px;
+      -moz-transform: scale(1.6);
+  }
+}
+
+@keyframes beacon-ring-pulse {
+  0% {
+      opacity: 1;
+      transform: scale(0);
+  }
+  100% {
+      opacity: 0;
+      border-radius: 15px;
+      padding: 8px;
+      top: 0;
+      left: 5px;
+      transform: scale(1.5);
+  }
+}
+
 .history-heading {
   padding-right: 15px;
 }

web/views/dashboard.slim

@@ -3,6 +3,8 @@ script type="text/javascript" src="#{{root_path}}javascripts/dashboard.js"
 h3
   | Dashboard
   span.beacon
+    .ring
+    .dot
 
 h5 Real-time
 #realtime