change todos counter position & format ( for large counts )

3 files changed, 6 insertions, 1 deletions

diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index fa85f9a6c86..a853c3aeb1f 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -2,7 +2,7 @@
 (function() {
   $(document).on('todo:toggle', function(e, count) {
     var $todoPendingCount = $('.todos-pending-count');
-    $todoPendingCount.text(gl.text.addDelimiter(count));
+    $todoPendingCount.text(gl.text.highCountTrim(count));
     $todoPendingCount.toggleClass('hidden', count === 0);
   });
 })();
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index f755d212b3c..579d322e3fb 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -14,6 +14,9 @@ require('vendor/latinise');
     gl.text.addDelimiter = function(text) {
       return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text;
     };
+    gl.text.highCountTrim = function(count) {
+      return count > 99 ? '99+' : count;
+    };
     gl.text.randomString = function() {
       return Math.random().toString(36).substring(7);
     };
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 551a66fbf3a..3258692ae2b 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -6,6 +6,8 @@
 .navbar-nav {
   li {
     .badge.todos-pending-count {
+      position: inherit;
+      top: -6px;
       margin-top: -5px;
       font-weight: normal;
       background: $todo-alert-blue;