add brackets to unread, page and feed items counter via CSS

Unified the page-counters before. This makes processing of counters in javascript way more easier. The minimum required browser versions for the needed CSS3 selectors are IE9, Firefox 3.5 and Chrome 5. Confirmed working with IE9, Firefox 24.6, Chrome 36, Mobile Safari on iOS6. An unintended side effect of CSS brackets is that theme designers are able to implement there idea of brackets.
2014-09-16 15:14:49 +02:00 · 2014-09-16 15:14:49 +02:00 · 8424b9bfb1
commit 8424b9bfb1
parent fa5bda49db
25 changed files with 163 additions and 34 deletions
--- a/assets/css/app.css
+++ b/assets/css/app.css
@ -317,6 +317,19 @@ a.btn-red:hover,
    background: #357ae8;
 }

+/* counter brackets */
+span#nav-counter:not(:empty):before, span#page-counter:not(:empty):before {
+    content: " (";
+}
+
+span[id^="items-count-"]:before {
+    content: "(";
+}
+
+span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after, span[id^="items-count-"]:after {
+    content: ")";
+}
+
 /* header */
 header {
    margin-bottom: 50px;
--- a/assets/js/all.min.js
+++ b/assets/js/all.min.js
@ -1,14 +1,14 @@
 var Miniflux={};Miniflux.App=function(){return{BlinkIcon:function(){var d=document.querySelectorAll(".loading-icon");[].forEach.call(d,function(b){b.classList.toggle("loading-icon-blink")})},Run:function(){Miniflux.Event.ListenKeyboardEvents();Miniflux.Event.ListenMouseEvents()}}}();
 Miniflux.Feed=function(){function d(a){if(a=document.getElementById("loading-feed-"+a))a.appendChild(document.createTextNode("\u2600")),a.classList.add("loading-icon-blink");f||(f=setInterval(Miniflux.App.BlinkIcon,500))}function b(){for(var b=document.getElementsByTagName("a"),c=0,d=b.length;c<d;c++){var e=b[c].getAttribute("data-feed-id");e&&a.push(parseInt(e))}}var a=[],c=[],f;return{Update:function(a,b){d(a);var c=new XMLHttpRequest;c.onload=function(){var e=document.getElementById("loading-feed-"+
-a);e&&(e.innerHTML="");if(e=document.getElementById("last-checked-feed-"+a))e.innerHTML=e.getAttribute("data-after-update");try{var h=JSON.parse(this.responseText);if(h.result){var n=h.items_count,c=document.getElementById("items-count-"+a);c&&(c.innerHTML="("+n.items_unread+"/"+n.items_total+")")}b&&b(h)}catch(d){}};c.open("POST","?action=refresh-feed&feed_id="+a,!0);c.send()},UpdateAll:function(){b();var d=setInterval(function(){for(;0<a.length&&5>c.length;){var b=a.shift();c.push(b);Miniflux.Feed.Update(b,
+a);e&&(e.innerHTML="");if(e=document.getElementById("last-checked-feed-"+a))e.innerHTML=e.getAttribute("data-after-update");try{var k=JSON.parse(this.responseText);if(k.result){var p=k.items_count,c=document.getElementById("items-count-"+a);c&&(c.innerHTML="("+p.items_unread+"/"+p.items_total+")")}b&&b(k)}catch(d){}};c.open("POST","?action=refresh-feed&feed_id="+a,!0);c.send()},UpdateAll:function(){b();var d=setInterval(function(){for(;0<a.length&&5>c.length;){var b=a.shift();c.push(b);Miniflux.Feed.Update(b,
 function(b){b=c.indexOf(b.feed_id);0<=b&&c.splice(b,1);0==a.length&&0==c.length&&(clearInterval(d),clearInterval(f),window.location.href="?action=unread")})}},100)}}}();
 Miniflux.Item=function(){function d(e){var a=document.getElementById("item-"+e);a||(a=document.getElementById("current-item"),a.getAttribute("data-item-id")!=e&&(a=!1));return a}function b(e){if(e&&e.getAttribute("data-reverse-label")){var a=e.innerHTML;e.innerHTML=e.getAttribute("data-reverse-label");e.setAttribute("data-reverse-label",a)}}function a(e){e=document.getElementById("bookmark-"+e);b(e)}function c(e){e=document.getElementById("status-"+e);b(e)}function f(e){"mouse"!=Miniflux.Event.lastEventType&&
-Miniflux.Nav.SelectNextItem();e.parentNode.removeChild(e);var a=document.getElementById("page-counter");if(a){e=e.getAttribute("data-item-page");var b=parseInt(a.textContent,10)-1,c=document.getElementsByTagName("article");if(0===b||0===c.length)window.location=location.href;a.textContent=b;switch(e){case "unread":document.title="Miniflux ("+b+")";document.getElementById("nav-counter").textContent="("+b+")";break;case "feed-items":document.title="("+b+") "+a.parentNode.firstChild.nodeValue;break;
-default:document.title=a.parentNode.textContent}}}function g(e){var a=new XMLHttpRequest;a.onload=function(){if(Miniflux.Nav.IsListing()){var a=d(e);if(a)if(a.getAttribute("data-hide"))f(a);else{a.setAttribute("data-item-status","read");c(e);if(a=document.getElementById("show-"+e)){a.className="read";var b=document.createElement("span");b.id="read-icon-"+e;b.appendChild(document.createTextNode("\u2714 "));a.parentNode.insertBefore(b,a)}(a=document.getElementById("status-"+e))&&a.setAttribute("data-action",
-"mark-unread")}}};a.open("POST","?action=mark-item-read&id="+e,!0);a.send()}function l(a){var b=new XMLHttpRequest;b.onload=function(){if(Miniflux.Nav.IsListing()){var b=d(a);if(b)if(b.getAttribute("data-hide"))f(b);else{b.setAttribute("data-item-status","unread");c(a);if(b=document.getElementById("show-"+a))b.className="";(b=document.getElementById("read-icon-"+a))&&b.parentNode.removeChild(b);(b=document.getElementById("status-"+a))&&b.setAttribute("data-action","mark-read")}}};b.open("POST","?action=mark-item-unread&id="+
-a,!0);b.send()}function m(e,b){var c=e.getAttribute("data-item-id"),d=new XMLHttpRequest;d.onload=function(){try{if(JSON.parse(this.responseText).result)if(e.setAttribute("data-item-bookmark",b),b)if(Miniflux.Nav.IsListing()){if(f=document.getElementById("show-"+c)){var d=document.createElement("span");d.id="bookmark-icon-"+c;d.appendChild(document.createTextNode("\u2605 "));f.parentNode.insertBefore(d,f)}a(c)}else{var f=document.getElementById("bookmark-"+c);f&&(f.innerHTML="\u2605")}else if(Miniflux.Nav.IsListing()){var k=
-document.getElementById("bookmark-icon-"+c);k&&k.parentNode.removeChild(k);a(c)}else{var p=document.getElementById("bookmark-"+c);p&&(p.innerHTML="\u2606")}}catch(g){}};d.open("POST","?action=bookmark&id="+c+"&value="+b,!0);d.send()}return{Get:d,MarkAsRead:g,MarkAsUnread:l,MarkAsRemoved:function(a){var b=new XMLHttpRequest;b.onload=function(){Miniflux.Nav.IsListing()&&f(d(a))};b.open("POST","?action=mark-item-removed&id="+a,!0);b.send()},SwitchBookmark:function(a){"1"==a.getAttribute("data-item-bookmark")?
-m(a,0):m(a,1)},SwitchStatus:function(a){var b=a.getAttribute("data-item-id");a=a.getAttribute("data-item-status");"read"==a?l(b):"unread"==a&&g(b)},Show:function(a){(a=document.getElementById("show-"+a))&&a.click()},OpenOriginal:function(a){var b=document.getElementById("original-"+a);b&&("unread"==d(a).getAttribute("data-item-status")&&g(a),b.removeAttribute("data-action"),b.click())},DownloadContent:function(){var a=document.getElementById("download-item");if(a){var b=a.getAttribute("data-item-id"),
+Miniflux.Nav.SelectNextItem();e.parentNode.removeChild(e);var a=document.getElementById("page-counter");if(a){e=e.getAttribute("data-item-page");var b=parseInt(a.textContent,10)-1,c=document.getElementsByTagName("article");if(0===b||0===c.length)window.location=location.href;a.textContent=b;switch(e){case "unread":document.title="Miniflux ("+b+")";document.getElementById("nav-counter").textContent=b;break;case "feed-items":document.title="("+b+") "+a.parentNode.firstChild.nodeValue;break;default:document.title=
+a.parentNode.firstChild.nodeValue+" ("+b+")"}}}function g(e){var a=new XMLHttpRequest;a.onload=function(){if(Miniflux.Nav.IsListing()){var a=d(e);if(a)if(a.getAttribute("data-hide"))f(a);else{a.setAttribute("data-item-status","read");c(e);if(a=document.getElementById("show-"+e)){a.className="read";var b=document.createElement("span");b.id="read-icon-"+e;b.appendChild(document.createTextNode("\u2714 "));a.parentNode.insertBefore(b,a)}(a=document.getElementById("status-"+e))&&a.setAttribute("data-action",
+"mark-unread")}}};a.open("POST","?action=mark-item-read&id="+e,!0);a.send()}function m(a){var b=new XMLHttpRequest;b.onload=function(){if(Miniflux.Nav.IsListing()){var b=d(a);if(b)if(b.getAttribute("data-hide"))f(b);else{b.setAttribute("data-item-status","unread");c(a);if(b=document.getElementById("show-"+a))b.className="";(b=document.getElementById("read-icon-"+a))&&b.parentNode.removeChild(b);(b=document.getElementById("status-"+a))&&b.setAttribute("data-action","mark-read")}}};b.open("POST","?action=mark-item-unread&id="+
+a,!0);b.send()}function n(b,c){var d=b.getAttribute("data-item-id"),h=new XMLHttpRequest;h.onload=function(){try{if(JSON.parse(this.responseText).result)if(b.setAttribute("data-item-bookmark",c),c)if(Miniflux.Nav.IsListing()){if(f=document.getElementById("show-"+d)){var h=document.createElement("span");h.id="bookmark-icon-"+d;h.appendChild(document.createTextNode("\u2605 "));f.parentNode.insertBefore(h,f)}a(d)}else{var f=document.getElementById("bookmark-"+d);f&&(f.innerHTML="\u2605")}else if(Miniflux.Nav.IsListing()){var l=
+document.getElementById("bookmark-icon-"+d);l&&l.parentNode.removeChild(l);a(d)}else{var q=document.getElementById("bookmark-"+d);q&&(q.innerHTML="\u2606")}}catch(g){}};h.open("POST","?action=bookmark&id="+d+"&value="+c,!0);h.send()}return{Get:d,MarkAsRead:g,MarkAsUnread:m,MarkAsRemoved:function(a){var b=new XMLHttpRequest;b.onload=function(){Miniflux.Nav.IsListing()&&f(d(a))};b.open("POST","?action=mark-item-removed&id="+a,!0);b.send()},SwitchBookmark:function(a){"1"==a.getAttribute("data-item-bookmark")?
+n(a,0):n(a,1)},SwitchStatus:function(a){var b=a.getAttribute("data-item-id");a=a.getAttribute("data-item-status");"read"==a?m(b):"unread"==a&&g(b)},Show:function(a){(a=document.getElementById("show-"+a))&&a.click()},OpenOriginal:function(a){var b=document.getElementById("original-"+a);b&&("unread"==d(a).getAttribute("data-item-status")&&g(a),b.removeAttribute("data-action"),b.click())},DownloadContent:function(){var a=document.getElementById("download-item");if(a){var b=a.getAttribute("data-item-id"),
 c=a.getAttribute("data-before-message"),d=document.createElement("span");d.appendChild(document.createTextNode("\u2600"));d.className="loading-icon";a.innerHTML="";a.className="downloading";a.appendChild(d);a.appendChild(document.createTextNode(" "+c));var f=setInterval(Miniflux.App.BlinkIcon,250),g=new XMLHttpRequest;g.onload=function(){var b=JSON.parse(g.responseText);clearInterval(f);if(b.result){var c=document.getElementById("item-content");c&&(c.innerHTML=b.content);a&&(b=a.getAttribute("data-after-message"),
 a.innerHTML="",a.appendChild(document.createTextNode(" "+b)))}else a&&(b=a.getAttribute("data-failure-message"),a.innerHTML="",a.appendChild(document.createTextNode(" "+b)))};g.open("POST","?action=download-item&id="+b,!0);g.send()}},MarkListingAsRead:function(a){for(var b=document.getElementsByTagName("article"),c=[],d=0,f=b.length;d<f;d++)c.push(b[d].getAttribute("data-item-id"));b=new XMLHttpRequest;b.onload=function(){window.location.href=a};b.open("POST","?action=mark-items-as-read",!0);b.send(JSON.stringify(c))}}}();
 Miniflux.Event=function(){var d=[];return{lastEventType:"",ListenMouseEvents:function(){document.onclick=function(b){var a=b.target.getAttribute("data-action");if(a)switch(Miniflux.Event.lastEventType="mouse",a){case "refresh-all":b.preventDefault();Miniflux.Feed.UpdateAll();break;case "refresh-feed":b.preventDefault();Miniflux.Feed.Update(b.target.getAttribute("data-feed-id"));break;case "mark-read":b.preventDefault();Miniflux.Item.MarkAsRead(b.target.getAttribute("data-item-id"));break;case "mark-unread":b.preventDefault();
--- a/assets/js/item.js
+++ b/assets/js/item.js
@ -153,13 +153,13 @@ Miniflux.Item = (function() {
            switch (source) {
                case "unread":
                    document.title = "Miniflux (" + counter + ")";
-                    document.getElementById("nav-counter").textContent = "(" + counter + ")";
+                    document.getElementById("nav-counter").textContent = counter;
                    break;
                case "feed-items":
                    document.title = "(" + counter + ") " + pageCounter.parentNode.firstChild.nodeValue;
                    break;
                default:
-                    document.title = pageCounter.parentNode.textContent;
+                    document.title = pageCounter.parentNode.firstChild.nodeValue + " (" + counter + ")";
            }
        }
    }
--- a/locales/cs_CZ/translations.php
+++ b/locales/cs_CZ/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Po %d dni',
    'After %d days' => 'Po %d dnech',
    'unread' => 'nepřečtené',
+    'Unread' => 'Nepřečtené',
    'bookmark' => 'přidat do záložek',
    'remove bookmark' => 'odstranit záložku',
    'bookmarks' => 'záložky',
@ -119,7 +120,6 @@ return array(
    'About' => 'O aplikaci',
    'Miniflux version:' => 'Verze Miniflux:',
    'Nothing to read' => 'Nic ke čtení',
-    'unread items' => 'nepřečtené články',
    'mark all as read' => 'označit vše jako přečtené',
    'original link' => 'původní odkaz',
    'mark as read' => 'označit jako přečtené',
@ -128,7 +128,6 @@ return array(
    'History' => 'Historie',
    'flush all items' => 'zahodit všechny články',
    'Item not found' => 'Článek nenalezen',
-    'Unread items' => 'Nepřečtené články',
    'Next' => 'Další',
    'Previous' => 'Předchozí',
    'Sign in' => 'Přihlásit',
--- a/locales/de_DE/translations.php
+++ b/locales/de_DE/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Nach %d Tag',
    'After %d days' => 'Nach %d Tagen',
    'unread' => 'ungelesen',
+    'Unread' => 'Ungelesen',
    'bookmark' => 'lesezeichen',
    'remove bookmark' => 'lesezeichen entfernen',
    'bookmarks' => 'lesezeichen',
@ -119,7 +120,6 @@ return array(
    'About' => 'Über',
    'Miniflux version:' => 'Miniflux-Version:',
    'Nothing to read' => 'Nichts zu lesen',
-    'unread items' => 'ungelesene einträge',
    'mark all as read' => 'alle als gelesen markieren',
    'original link' => 'original-link',
    'mark as read' => 'als gelesen markieren',
@ -128,7 +128,6 @@ return array(
    'History' => 'Verlauf',
    'flush all items' => 'alle einträge entfernen',
    'Item not found' => 'Eintrag nicht gefunden',
-    'Unread items' => 'Ungelesene Einträge',
    'Next' => 'Nächster',
    'Previous' => 'Vorheriger',
    'Sign in' => 'Anmelden',
--- a/locales/es_ES/translations.php
+++ b/locales/es_ES/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Después de %d día',
    'After %d days' => 'Después de %d días',
    'unread' => 'no leídos',
+    'Unread' => 'No leídos',
    'bookmark' => 'añadir a marcadores',
    'remove bookmark' => 'borrar marcador',
    'bookmarks' => 'marcadores',
@ -119,7 +120,6 @@ return array(
    'About' => 'Acerca',
    'Miniflux version:' => 'Versión de Miniflux:',
    'Nothing to read' => 'No hay nada que leer',
-    'unread items' => 'ítems no leídos',
    'mark all as read' => 'marcar todo como leído',
    'original link' => 'enlace original',
    'mark as read' => 'marcar como leído',
@ -128,7 +128,6 @@ return array(
    'History' => 'Historial',
    'flush all items' => 'borrar todos los ítems',
    'Item not found' => 'No se encuentra el ítem',
-    'Unread items' => 'Ítems no leídos',
    'Next' => 'Siguiente',
    'Previous' => 'Anterior',
    'Sign in' => 'Iniciar sesión',
--- a/locales/fr_FR/translations.php
+++ b/locales/fr_FR/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Après %d jour',
    'After %d days' => 'Après %d jours',
    'unread' => 'non lus',
+    'Unread' => 'Non lus',
    'bookmark' => 'ajouter aux favoris',
    'remove bookmark' => 'supprimer des favoris',
    'bookmarks' => 'favoris',
@ -119,7 +120,6 @@ return array(
    'About' => 'A propos',
    'Miniflux version:' => 'Version de Miniflux :',
    'Nothing to read' => 'Rien à lire',
-    'unread items' => 'éléments non lus',
    'mark all as read' => 'tout marquer comme lu',
    'original link' => 'lien original',
    'mark as read' => 'marquer comme lu',
@ -128,7 +128,6 @@ return array(
    'History' => 'Historique',
    'flush all items' => 'supprimer tous les éléments',
    'Item not found' => 'Élément introuvable',
-    'Unread items' => 'Éléments non lus',
    'Next' => 'Suivant',
    'Previous' => 'Précédent',
    'Sign in' => 'Connexion',
--- a/locales/it_IT/translations.php
+++ b/locales/it_IT/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Dopo %d giorno',
    'After %d days' => 'Dopo %d giorni',
    'unread' => 'non letti',
+    'Unread' => 'Non letti',
    'bookmark' => 'bookmark',
    'remove bookmark' => 'cancella bookmark',
    'bookmarks' => 'bookmark',
@ -119,7 +120,6 @@ return array(
    'About' => 'Informazioni sul software',
    'Miniflux version:' => 'Versione Miniflux:',
    'Nothing to read' => 'Niente da leggere',
-    'unread items' => 'articoli non letti',
    'mark all as read' => 'segna tutti come già letti',
    'original link' => 'link originale',
    'mark as read' => 'segna come già letto',
@ -128,7 +128,6 @@ return array(
    'History' => 'Cronologia',
    'flush all items' => 'cancella tutti gli articoli',
    'Item not found' => 'Articolo non trovato',
-    'Unread items' => 'Articoli non letti',
    'Next' => 'Successivo',
    'Previous' => 'Precedente',
    'Sign in' => 'Accedi',
--- a/locales/pt_BR/translations.php
+++ b/locales/pt_BR/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => 'Depois %d dias',
    'After %d days' => 'Depois %d dias',
    'unread' => 'não lido',
+    'Unread' => 'Não lido',
    'bookmark' => 'lesezeichen',
    'remove bookmark' => 'lesezeichen löschen',
    'bookmarks' => 'bookmarks',
@ -119,7 +120,6 @@ return array(
    'About' => 'Sobre',
    'Miniflux version:' => 'Miniflux versão:',
    'Nothing to read' => 'Nada para ler',
-    'unread items' => 'Item não lido',
    'mark all as read' => 'Marcar tudo como lido',
    'original link' => ' Link original',
    'mark as read' => 'Marcar como lido',
@ -128,7 +128,6 @@ return array(
    'History' => 'Histórico',
    'flush all items' => 'Remover todos itens',
    'Item not found' => 'Item não encontrado',
-    'Unread items' => 'Itens não lido',
    'Next' => 'Proximo',
    'Previous' => 'Anterior',
    'Sign in' => 'Assinar em',
--- a/locales/zh_CN/translations.php
+++ b/locales/zh_CN/translations.php
@ -86,6 +86,7 @@ return array(
    'After %d day' => '%d 天之后',
    'After %d days' => '%d 天之后',
    'unread' => '未读',
+    'Unread' => '未读',
    'bookmark' => '收藏',
    'remove bookmark' => '取消收藏',
    'bookmarks' => '收藏',
@ -119,7 +120,6 @@ return array(
    'About' => '关于',
    'Miniflux version:' => 'Miniflux 版本:',
    'Nothing to read' => '没有未读条目',
-    'unread items' => '个未读条目',
    'mark all as read' => '全部标记为已读',
    'original link' => '来源链接',
    'mark as read' => '标记为已读',
@ -128,7 +128,6 @@ return array(
    'History' => '历史',
    'flush all items' => '清空所有项目',
    'Item not found' => '找不到项目',
-    'Unread items' => '未读条目',
    'Next' => '下一个',
    'Previous' => '前一个',
    'Sign in' => '登陆',
--- a/templates/bookmarks.php
+++ b/templates/bookmarks.php
@ -3,7 +3,7 @@
 <?php else: ?>

    <div class="page-header">
-        <h2><?= t('Bookmarks') ?> (<span id="page-counter"><?= $nb_items ?></span>)</h2>
+        <h2><?= t('Bookmarks') ?><span id="page-counter"><?= isset($nb_items) ? $nb_items : '' ?></span></h2>
    </div>

    <?php if ($nothing_to_read): ?>
--- a/templates/feed_items.php
+++ b/templates/feed_items.php
@ -5,7 +5,7 @@
 <?php else: ?>

    <div class="page-header">
-        <h2><?= Helper\escape($feed['title']) ?> (<span id="page-counter"><?= $nb_items ?></span>)</h2>
+        <h2><?= Helper\escape($feed['title']) ?><span id="page-counter"><?= isset($nb_items) ? $nb_items : '' ?></span></h2>
        <ul>
            <li>
                <a href="?action=feed-items&amp;feed_id=<?= $feed['id'] ?>&amp;order=updated&amp;direction=<?= $direction == 'asc' ? 'desc' : 'asc' ?>"><?= tne('sort by date<span class="hide-mobile"> (%s)</span>', $direction == 'desc' ? t('older first') : t('most recent first')) ?></a>
--- a/templates/feeds.php
+++ b/templates/feeds.php
@ -28,7 +28,7 @@
                    <span id="loading-feed-<?= $feed['id'] ?>" class="loading-icon"></span>
                <?php endif ?>

-                <span id="items-count-<?= $feed['id'] ?>">(<?= $feed['items_unread'] .'/' . $feed['items_total'] ?>)</span>
+                <span id="items-count-<?= $feed['id'] ?>"><?= $feed['items_unread'] .'/' . $feed['items_total'] ?></span>

                <a href="?action=feed-items&amp;feed_id=<?= $feed['id'] ?>" title="<?= t('Show only this subscription') ?>"><?= Helper\escape($feed['title']) ?></a>

--- a/templates/history.php
+++ b/templates/history.php
@ -3,7 +3,7 @@
 <?php else: ?>

    <div class="page-header">
-        <h2><?= t('History') ?> (<span id="page-counter"><?= $nb_items ?></span>)</h2>
+        <h2><?= t('History') ?><span id="page-counter"><?= isset($nb_items) ? $nb_items : '' ?></span></h2>
        <ul>
            <li><a href="?action=confirm-flush-history"><?= t('flush all items') ?></a></li>
        </ul>
--- a/templates/layout.php
+++ b/templates/layout.php
@ -23,7 +23,7 @@
                <a class="logo" href="?"><?= tne('mini<span>flux</span>') ?></a>
                <ul>
                    <li <?= isset($menu) && $menu === 'unread' ? 'class="active"' : '' ?>>
-                        <a href="?action=unread"><?= t('unread') ?> <span id="nav-counter"><?= isset($nb_unread_items) ? '('.$nb_unread_items.')' : '' ?></span></a>
+                        <a href="?action=unread"><?= t('unread') ?><span id="nav-counter"><?= isset($nb_unread_items) && $nb_unread_items > 0 ? $nb_unread_items : '' ?></span></a>
                    </li>
                    <li class="<?= isset($menu) && $menu === 'bookmarks' ? 'active hide-mobile' : 'hide-mobile' ?>">
                        <a href="?action=bookmarks"><?= t('bookmarks') ?></a>
--- a/templates/unread_items.php
+++ b/templates/unread_items.php
@ -3,7 +3,7 @@
 <?php else: ?>

    <div class="page-header">
-        <h2><span id="page-counter"><?= isset($nb_items) ? $nb_items : '' ?></span> <?= t('unread items') ?></h2>
+        <h2><?= t('Unread') ?><span id="page-counter"><?= isset($nb_items) ? $nb_items : '' ?></span></h2>
        <ul>
            <li>
                <a href="?action=unread&amp;order=updated&amp;direction=<?= $direction == 'asc' ? 'desc' : 'asc' ?>"><?= tne('sort by date<span class="hide-mobile"> (%s)</span>', $direction == 'desc' ? t('older first') : t('most recent first')) ?></a>
--- a/themes/bootstrap-light/css/app.css
+++ b/themes/bootstrap-light/css/app.css
@ -5078,6 +5078,20 @@ header > nav > ul li:nth-child(5) a:before {
 header > nav > ul li:nth-child(6) a:before {
  content: "\e017";
 }
+span#nav-counter:not(:empty):before,
+span#page-counter:not(:empty):before {
+  content: " (";
+}
+span#nav-counter:not(:empty):after,
+span#page-counter:not(:empty):after {
+  content: ")";
+}
+span[id^="items-count-"]:before {
+  content: "(";
+}
+span[id^="items-count-"]:after {
+  content: ")";
+}
 .logo {
  min-width: 100px;
  min-height: 45px;
--- a/themes/bootstrap-light/less/miniflux-base.less
+++ b/themes/bootstrap-light/less/miniflux-base.less
@ -41,6 +41,32 @@ header > nav > ul li:nth-child(4) a:before {content:"\e012";} // Subscriptions
 header > nav > ul li:nth-child(5) a:before {content:"\1f527";} // Préférences
 header > nav > ul li:nth-child(6) a:before {content:"\e017";} // Logout

+// Counter
+span {
+    &#nav-counter,
+    &#page-counter {
+        &:not(:empty) {
+            &:before {
+                content: " @{icon-bracket-open}";
+            }
+        
+            &:after {
+                content: "@{icon-bracket-close}";
+            }
+        }
+    }
+    
+    &[id^="items-count-"] {
+        &:before {
+            content: "@{icon-bracket-open}";
+        }
+        
+        &:after {
+            content: "@{icon-bracket-close}";
+        }
+    }
+}
+
 // Logo
 .logo {
 	min-width: 100px;
--- a/themes/bootstrap-light/less/variables.less
+++ b/themes/bootstrap-light/less/variables.less
@ -60,7 +60,8 @@

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
-
+@icon-bracket-open:       "(";
+@icon-bracket-close:       ")";

 // Components
 // -------------------------
--- a/themes/bootswatch-cyborg/css/app.css
+++ b/themes/bootswatch-cyborg/css/app.css
@ -5078,6 +5078,20 @@ header > nav > ul li:nth-child(5) a:before {
 header > nav > ul li:nth-child(6) a:before {
  content: "\e017";
 }
+span#nav-counter:not(:empty):before,
+span#page-counter:not(:empty):before {
+  content: " (";
+}
+span#nav-counter:not(:empty):after,
+span#page-counter:not(:empty):after {
+  content: ")";
+}
+span[id^="items-count-"]:before {
+  content: "(";
+}
+span[id^="items-count-"]:after {
+  content: ")";
+}
 .logo {
  min-width: 100px;
  min-height: 45px;
--- a/themes/bootswatch-cyborg/less/miniflux-base.less
+++ b/themes/bootswatch-cyborg/less/miniflux-base.less
@ -41,6 +41,32 @@ header > nav > ul li:nth-child(4) a:before {content:"\e012";} // Subscriptions
 header > nav > ul li:nth-child(5) a:before {content:"\1f527";} // Préférences
 header > nav > ul li:nth-child(6) a:before {content:"\e017";} // Logout

+// Counter
+span {
+    &#nav-counter,
+    &#page-counter {
+        &:not(:empty) {
+            &:before {
+                content: " @{icon-bracket-open}";
+            }
+        
+            &:after {
+                content: "@{icon-bracket-close}";
+            }
+        }
+    }
+    
+    &[id^="items-count-"] {
+        &:before {
+            content: "@{icon-bracket-open}";
+        }
+        
+        &:after {
+            content: "@{icon-bracket-close}";
+        }
+    }
+}
+
 // Logo
 .logo {
 	min-width: 100px;
--- a/themes/bootswatch-cyborg/less/variables.less
+++ b/themes/bootswatch-cyborg/less/variables.less
@ -60,7 +60,8 @@

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
-
+@icon-bracket-open:       "(";
+@icon-bracket-close:       ")";

 // Components
 // -------------------------
--- a/themes/hello/css/app.css
+++ b/themes/hello/css/app.css
@ -212,6 +212,15 @@ header {
    header .logo span {
      color: #b3e6cc; }

+span#nav-counter:not(:empty):before, span#page-counter:not(:empty):before {
+  content: " ("; }
+span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after {
+  content: ")"; }
+span[id^="items-count-"]:before {
+  content: "("; }
+span[id^="items-count-"]:after {
+  content: ")"; }
+
 section.page {
  right: 0;
  width: 81.69839%;
--- a/themes/hello/scss/_common.scss
+++ b/themes/hello/scss/_common.scss
@ -31,3 +31,7 @@ $alert-sucess: #72c5a1;

 // Logo 
 $logo-basecolor: #339966;
+
+// Icons
+$icon-bracket-open: "(";
+$icon-bracket-close: ")";
--- a/themes/hello/scss/_core.scss
+++ b/themes/hello/scss/_core.scss
@ -119,6 +119,34 @@ header {
 		}
 	}
 }
+
+// Counter
+span {
+    &#nav-counter,
+    &#page-counter {
+        &:not(:empty) {
+            &:before {
+                content: " " + $icon-bracket-open;
+            }
+        
+            &:after {
+                content: $icon-bracket-close;
+            }
+        }
+    }
+    
+    &[id^="items-count-"] {
+        &:before {
+            content: $icon-bracket-open;
+        }
+        
+        &:after {
+            content: $icon-bracket-close;
+        }
+    }
+}
+
+
 // Main container
 section {
 	&.page {