dashboard: more annoying notifications

circle/dashboard/static/dashboard/dashboard.css

@@ -634,3 +634,22 @@ textarea[name="list-new-namelist"] {
 .table thead>tr>th {
   border-bottom: 1px;
 }
+
+.badge-pulse {
+  -webkit-animation-name: 'pulse_animation';
+  -webkit-animation-duration: 1000ms;
+  -webkit-transform-origin: 70% 70%;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+@-webkit-keyframes pulse_animation {
+  0% { -webkit-transform: scale(1); }
+  30% { -webkit-transform: scale(1); }
+  40% { -webkit-transform: scale(1.18); }
+  50% { -webkit-transform: scale(1); }
+  60% { -webkit-transform: scale(1); }
+  70% { -webkit-transform: scale(1.08); }
+  80% { -webkit-transform: scale(1); }
+  100% { -webkit-transform: scale(1); }
+}

circle/dashboard/static/dashboard/dashboard.js

@@ -276,7 +276,8 @@ $(function () {
   });
 
   $("#notification-button a").click(function() {
-      $('.notification-messages').load("/dashboard/notifications/");
+    $('.notification-messages').load("/dashboard/notifications/");
+    $('#notification-button a span[class*="badge-pulse"]').remove();  
   });
 });
 

circle/dashboard/templates/base.html

@@ -40,7 +40,7 @@
           <ul class="nav navbar-nav pull-right">
             <li class="dropdown" id="notification-button">                            
               <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;" class="dropdown-toggle" data-toggle="dropdown">
-                {% trans "Notifications" %}{% if NEW_NOTIFICATIONS_COUNT > 0 %} <span class="badge">{{ NEW_NOTIFICATIONS_COUNT }}</span>{% endif %}
+                {% trans "Notifications" %}{% if NEW_NOTIFICATIONS_COUNT > 0 %} <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>{% endif %}
               </a>                                                                    
               <ul class="dropdown-menu notification-messages">                        
                   <li>{% trans "Loading..." %}</li>