detect span.counter and allow to put styles on the number

src/Bundle/ChillMainBundle/Resources/public/chill/index.js

@@ -25,6 +25,7 @@ import { chill } from './js/chill.js';
 global.chill = chill;
 
 require('./js/date.js');
+require('./js/counter.js');
 
 /// Load fonts
 require('./fonts/OpenSans/OpenSans.scss')

src/Bundle/ChillMainBundle/Resources/public/chill/js/counter.js

@@ -0,0 +1,35 @@
+/**
+ *
+ * This script search for span.counter elements like
+ *   <span class="counter">Il y a 4 notifications</span>
+ * and return
+ *   <span class="counter">Il y a <span>4</span> notifications</span>
+ *
+ */
+const isNum = (v) => !isNaN(v);
+
+const parseCounter = () => {
+    document.querySelectorAll('span.counter')
+        .forEach(el => {
+            let r = [];
+            el.innerText
+                .trim()
+                .split(' ')
+                .forEach(w => {
+                    if (isNum(w)) {
+                        r.push(`<span>${w}</span>`);
+                    } else {
+                        r.push(w);
+                    }
+                })
+            ;
+            el.innerHTML = r.join(' ');
+        })
+    ;
+};
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    parseCounter();
+});
+
+export { parseCounter };

src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss

@@ -82,7 +82,7 @@ div#notification-fold {
 
 // Counter
 div.notification-counter {
-    span {
+    span.counter {
         &:not(:first-child) {
             &::before {
                 content: '/ ';
@@ -90,3 +90,11 @@ div.notification-counter {
         }
     }
 }
+span.counter {
+    & > span {
+        font-weight: bold;
+        background-color: $chill-ll-gray;
+        padding: 0 0.4rem;
+        border-radius: 50%;
+    }
+}

src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig

@@ -73,8 +73,8 @@
             <div class="item-col item-meta">
                 
                 {# TODO twig extension to count comments #}
-                <div class="comment-counter visually-hidden">
-                    <span>4 commentaires</span>
+                <div class="comment-counter">
+                    <span class="counter">4 commentaires</span>
                 </div>
                 
             </div>

src/Bundle/ChillMainBundle/Resources/views/Notification/extension_counter_notifications_for.html.twig

@@ -1,11 +1,11 @@
 <div class="notification-counter">
     {% if counter.total > 0 %}
-        <span>
+        <span class="counter">
             {{ 'notification.counter total notifications'|trans({'total': counter.total }) }}
         </span>
     {% endif %}
     {% if counter.unread > 0 %}
-        <span>
+        <span class="counter">
             {{ 'notification.counter unread notifications'|trans({'unread': counter.unread }) }}
         </span>
     {% endif %}