Add badge to notification icon

This commit is contained in:
rubenwardy 2020-07-10 23:46:36 +01:00
parent c80ff2e709
commit b483d5413f
2 changed files with 22 additions and 3 deletions

@ -28,6 +28,20 @@ h3 {
letter-spacing: .05em 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 { p, .content li {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important; -webkit-font-smoothing: antialiased !important;

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title> <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/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="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16"> <link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
<link rel="icon" href="/favicon-128.png" sizes="128x128"> <link rel="icon" href="/favicon-128.png" sizes="128x128">
@ -60,8 +60,13 @@
</form> </form>
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('notifications.list_all') }}"> <li class="nav-item"><a class="nav-link notification-icon" href="{{ url_for('notifications.list_all') }}">
<i class="fas fa-bell" {% if current_user.notifications %} style="color: yellow;"{% endif %}></i> {% 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> </a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('packages.create_edit') }}"> <li class="nav-item"><a class="nav-link" href="{{ url_for('packages.create_edit') }}">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>