From dda421e557ce5d83699cca95b44225764a17a3a9 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sat, 3 Aug 2024 08:21:45 +0200
Subject: [PATCH] feat: Add notification counter

---
 .../static/fellchensammlung/css/styles.css    | 21 ++++++++++++++++++-
 .../templates/fellchensammlung/header.html    | 10 ++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index 3eaaf47..88f6722 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -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;
diff --git a/src/fellchensammlung/templates/fellchensammlung/header.html b/src/fellchensammlung/templates/fellchensammlung/header.html
index 06682f7..1149101 100644
--- a/src/fellchensammlung/templates/fellchensammlung/header.html
+++ b/src/fellchensammlung/templates/fellchensammlung/header.html
@@ -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 %}