From 563e4c4aa546ebfaea8f07164e5a2d82b33ca08d Mon Sep 17 00:00:00 2001
From: Brandon Hilkert <brandonhilkert@gmail.com>
Date: Thu, 3 Jan 2013 11:23:20 -0500
Subject: [PATCH] Update beacon to be more noticable.

---
 web/assets/javascripts/dashboard.js    |  8 ++-
 web/assets/stylesheets/application.css | 92 +++++++++++++++++++++++---
 web/views/dashboard.slim               |  2 +
 3 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/web/assets/javascripts/dashboard.js b/web/assets/javascripts/dashboard.js
index b67e2247..57ddb7f8 100644
--- a/web/assets/javascripts/dashboard.js
+++ b/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) {
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
index 6f97ddce..1732d90d 100755
--- a/web/assets/stylesheets/application.css
+++ b/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 {
-  -webkit-animation: beacon-pulse 1s ease-out;
-  -moz-animation: beacon-pulse 1s ease-out;
-  animation: beacon-pulse 1s ease-out;
+.beacon .dot.pulse {
+  -webkit-animation: beacon-dot-pulse 1s ease-out;
+  -moz-animation: beacon-dot-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;
 }
diff --git a/web/views/dashboard.slim b/web/views/dashboard.slim
index 0f8124e3..40ac1bd9 100644
--- a/web/views/dashboard.slim
+++ b/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