50 lines
3.4 KiB
HTML
50 lines
3.4 KiB
HTML
<li class="nav-item dropdown">
|
|
<div class="notification-count" hx-get="{% url 'fetch_notifications' %}" hx-trigger="every 10s" hx-swap="innerHTML" hx-select=".notification-count">
|
|
{% if notifications_ %}
|
|
<span class="badge bg-danger rounded-pill " id="notification-counter" style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">{{ notifications_.count }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<a class="nav-link" href="{% url 'fetch_notifications' %}" hx-get="{% url 'fetch_notifications' %}" hx-swap="innerHTML" hx-target=".card-body" hx-select=".card-body" style="min-width: 2.25rem" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="outside"><span class="d-block" style="height:20px;width:20px;"><span data-feather="bell" style="height:20px;width:20px;"></span></span></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret" id="navbarDropdownNotfication" aria-labelledby="navbarDropdownNotfication">
|
|
<div class="card position-relative border-0">
|
|
<div class="card-header p-2">
|
|
<div class="d-flex justify-content-between">
|
|
<h5 class="text-body-emphasis mb-0">Notifications</h5>
|
|
<button class="btn btn-link p-0 fs-9 fw-normal" type="button">Mark all as read</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="scrollbar-overlay" style="height: 27rem;">
|
|
{% for notification in notifications_ %}
|
|
<div class="px-2 px-sm-3 py-3 notification-card position-relative read border-bottom">
|
|
<div class="d-flex align-items-center justify-content-between position-relative">
|
|
<div class="d-flex">
|
|
<div class="flex-1 me-sm-3">
|
|
<h4 class="fs-9 text-body-emphasis">System</h4>
|
|
<p class="fs-9 text-body-highlight mb-2 mb-sm-3 fw-normal">
|
|
<span class="me-1 fs-10">💬</span>{{notification.message|safe}}<span class="ms-2 text-body-quaternary text-opacity-75 fw-bold fs-10">10m</span>
|
|
</p>
|
|
<p class="text-body-secondary fs-9 mb-0">
|
|
<span class="me-1 fas fa-clock"></span><span class="fw-bold">10:41 AM</span>{{notification.created}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown notification-dropdown">
|
|
<button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
|
|
<div class="dropdown-menu py-2">
|
|
<a class="dropdown-item" href="{% url 'mark_notification_as_read' notification.id %}">Mark as read</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="card-footer p-0 border-top border-translucent border-0">
|
|
<div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85"><a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|