123 lines
5.1 KiB
HTML
123 lines
5.1 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}
|
|
{% trans "Notifications" %}
|
|
{% endblock title %}
|
|
|
|
{% block customeCSS %}
|
|
|
|
/* General Layout */
|
|
body {
|
|
background-color: #f8f9fa; /* Light gray background for contrast */
|
|
}
|
|
|
|
/* List Item Styling */
|
|
.list-item {
|
|
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list-item:hover {
|
|
background-color: #f1f3f5;
|
|
transform: translateY(-2px); /* Subtle lift on hover */
|
|
}
|
|
|
|
/* Unread Notification Dot */
|
|
.unread-dot {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* HTMX Loading Indicator */
|
|
.htmx-request #loading-indicator {
|
|
display: block;
|
|
}
|
|
{% endblock %}
|
|
{% block content %}
|
|
<main class="container-fluid p-5">
|
|
<div class="row gx-5">
|
|
<div class="col-lg-8">
|
|
<header class="d-flex justify-content-between align-items-center mb-5 border-bottom pb-4">
|
|
<h1 class="display-5 fw-bolder">{% trans "Inbox" %}</h1>
|
|
<div class="d-flex align-items-center">
|
|
<span class="text-muted d-none d-md-block me-3">
|
|
<span id="unread-count-text" class="fw-bold me-1">{{ total_count}}</span> {% trans "Notifications" %}
|
|
</span>
|
|
<a href="{% url 'mark_all_notifications_as_read' %}"
|
|
class="btn btn-sm btn-outline-secondary rounded-pill fw-bold">
|
|
<i class="fas fa-check-double me-2"></i>{% trans "Mark all read" %}
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
{% if notifications %}
|
|
<div class="list-container" hx-indicator="#loading-indicator">
|
|
{% for notification in notifications %}
|
|
<div class="list-item d-flex align-items-start py-4 border-bottom position-relative">
|
|
{% if not notification.is_read %}
|
|
|
|
<div class="me-4 mt-1">
|
|
<i class="fas fa-info-circle fa-2x text-primary"></i>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="me-4 mt-1">
|
|
<i class="fas fa-info-circle fa-2x text-secondary"></i>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex-grow-1">
|
|
<h5 class="mb-1 text-dark fw-normal">
|
|
{{ notification.message|safe }}
|
|
</h5>
|
|
<p class="text-muted fs-6 mb-0 mt-2">
|
|
<i class="far fa-clock me-1"></i>
|
|
<span class="text-nowrap">{{ notification.created|timesince }} ago</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5 mt-5">
|
|
<i class="fas fa-bell-slash fa-4x text-muted mb-4"></i>
|
|
<h4 class="text-secondary fw-bold">{% trans "No new notifications" %}</h4>
|
|
<p class="text-muted">{% trans "You're all caught up. Check back later for updates." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if page_obj.paginator.num_pages > 1 %}
|
|
<div class="d-flex justify-content-center mt-5">
|
|
{% include 'partials/pagination.html' %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-lg-4 d-none d-lg-block">
|
|
<div class="card border-0 rounded-4 p-4 sticky-top mt-3 bg-gray-200">
|
|
<h4 class="fw-bold mb-3">{% trans "Status" %}</h4>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-circle-check me-2"></i>
|
|
<span>{% trans "Read:" %}<span class="fw-bold ms-1">{{read_count}}</span></span>
|
|
</li>
|
|
<li class="d-flex align-items-center">
|
|
<i class="fas fa-bell text-primary me-2"></i>
|
|
<span>{% trans "Unread:" %} <span class="fw-bold ms-1">{{unread_count}}</span></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="loading-indicator" class="spinner-border text-primary d-none position-fixed bottom-0 end-0 m-3" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
{% endblock %} |