83 lines
4.2 KiB
HTML
83 lines
4.2 KiB
HTML
<li class="nav-item dropdown">
|
|
<div class="notification-count"
|
|
hx-get="{% url 'fetch_notifications' %}"
|
|
hx-trigger="every 20s"
|
|
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>
|