kotovalexarian-likes-github/mperham--sidekiq
1
0
Fork 0
mirror of https://github.com/mperham/sidekiq.git synced 2022-11-09 13:52:34 -05:00
Code Releases Activity

Update beacon to be more noticable.

Browse source
This commit is contained in:
Brandon Hilkert 2013-01-03 11:23:20 -05:00
parent ddf96ec7a4
commit 563e4c4aa5
3 changed files with 90 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/assets/javascripts/dashboard.js
View file

@ -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) {

92
web/assets/stylesheets/application.css
View file

@ -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;
}

2
web/views/dashboard.slim
View file

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