Add badge to notification icon

diff --git a/app/scss/custom.scss b/app/scss/custom.scss
index 5aaf146915549ad4d611462cae4bc37b43bdeb0d..e16a75c010e66d2914c9cd516bfbac26757f20a6 100644 (file)
--- a/app/scss/custom.scss
+++ b/app/scss/custom.scss
@@ -28,6 +28,20 @@ h3 {
        letter-spacing: .05em
 }
 
+.badge-notify {
+       background:yellow; /* #00bc8c;*/
+       color: black;
+       position:relative;
+       top: -12px;
+       left: -10px;
+       margin-right: -10px;
+       font-size:10px;
+}
+
+a:hover .badge-notify {
+       color: black;
+}
+
 p, .content li {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased !important;

diff --git a/app/templates/base.html b/app/templates/base.html
index f3877b787041572ef520143b124e72c06e3d6824..90e49a87778e766a6236154937ff0f4d37652b54 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,7 +7,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
        <link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-       <link rel="stylesheet" type="text/css" href="/static/custom.css?v=11">
+       <link rel="stylesheet" type="text/css" href="/static/custom.css?v=12">
        <link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
        <link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
        <link rel="icon" href="/favicon-128.png" sizes="128x128">
@@ -60,8 +60,13 @@
                                </form>
                                <ul class="navbar-nav ml-auto">
                                        {% if current_user.is_authenticated %}
-                                               <li class="nav-item"><a class="nav-link" href="{{ url_for('notifications.list_all') }}">
-                                                       <i class="fas fa-bell" {% if current_user.notifications %} style="color: yellow;"{% endif %}></i>
+                                               <li class="nav-item"><a class="nav-link notification-icon" href="{{ url_for('notifications.list_all') }}">
+                                                       {% if current_user.notifications %}
+                                                               <i class="fas fa-bell"></i>
+                                                               <span class="badge badge-pill badge-notify" style="font-size:10px;">{{ current_user.notifications | length }}</span>
+                                                       {% else %}
+                                                               <i class="fas fa-bell" ></i>
+                                                       {% endif %}
                                                </a></li>
                                                <li class="nav-item"><a class="nav-link" href="{{ url_for('packages.create_edit') }}">
                                                        <i class="fas fa-plus"></i>