diff --git a/circle/dashboard/static/dashboard/dashboard.css b/circle/dashboard/static/dashboard/dashboard.css index 7ab0cd4..030b4e3 100644 --- a/circle/dashboard/static/dashboard/dashboard.css +++ b/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); } +} diff --git a/circle/dashboard/static/dashboard/dashboard.js b/circle/dashboard/static/dashboard/dashboard.js index 2745802..f745747 100644 --- a/circle/dashboard/static/dashboard/dashboard.js +++ b/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(); }); }); diff --git a/circle/dashboard/templates/base.html b/circle/dashboard/templates/base.html index 8fc1629..070a197 100644 --- a/circle/dashboard/templates/base.html +++ b/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>