moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add notification counter

Browse Source
This commit is contained in:
moanos [he/him] 2024-08-03 08:21:45 +02:00
parent 9119c1bd3d
commit dda421e557
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -144,7 +144,7 @@ select, .button {
height: 40px;
}
a:hover, .button_darken:hover {
.button_darken:hover {
background-color: var(--highlight-one);
color: var(--highlight-one-text);
}
@ -415,6 +415,25 @@ select, .button {
max-height: 250px;
}
.btn-notification {
display: inline-block;
position: relative;
padding: 0;
}
/* Make the badge float in the top right corner of the button */
.button__badge {
background-color: #fa3e3e;
border-radius: 2px;
color: white;
padding: 1px 3px;
font-size: 10px;
position: absolute; /* Position the badge within the relatively positioned button */
top: 0;
right: 0;
}
.adoption-card-report-link, .notification-card-mark-read {
margin-left: auto;
font-size: 2rem;

10
src/fellchensammlung/templates/fellchensammlung/header.html
View File

@ -18,7 +18,15 @@
<div class="profile-card">
{% include "fellchensammlung/forms/change_language.html" %}
{% if user.is_authenticated %}
<a class="btn2" href="{{ user.get_notifications_url }}"><i class="fa fa-bell" aria-hidden="true"></i></a>
<div class="btn2 button_darken btn-notification">
<a href="{{ user.get_notifications_url }}">
<i class="fa fa-bell" aria-hidden="true"></i>
</a>
<span class="button__badge">4</span>
</div>
<a class="btn2" href="{{ user.get_absolute_url }}"><i aria-hidden="true" class="fas fa-user"></i></a>
<form class="btn2 button_darken" action="{% url 'logout' %}" method="post">
{% csrf_token %}