Revamp user profile layout with enhanced styling and improved group and exam display

This commit is contained in:
Ross
2025-11-03 11:58:57 +00:00
parent d93483db26
commit 9cc4ea3cb0
+74 -59
View File
@@ -2,67 +2,82 @@
{% load auth_extras %} {% load auth_extras %}
{% block content %} {% block content %}
<div class="anatomy"> <div class="container py-4">
<h1>Profile</h1> <div class="row">
<div> <div class="col-md-4 mb-3">
Username: <span id="username">{{ user.username }}</span> <div class="card">
</div> <div class="card-body text-center">
<div> <div class="profile-avatar mb-3">
Email: <span id="email">{{ user.email }}</span> <div class="rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center" style="width:96px;height:96px;font-size:32px;">{{ user.first_name|default:user.username|slice:":1"|upper }}</div>
</div> </div>
<div> <h4 class="card-title mb-1">{{ user.get_full_name|default:user.username }}</h4>
Name: <span id="first-name">{{ user.first_name }}<span> <p class="text-muted mb-1">@{{ user.username }}</p>
<span id="last-name">{{ user.last_name }}</span> <p class="mb-0"><a href="mailto:{{ user.email }}">{{ user.email }}</a></p>
</div> </div>
<div> <ul class="list-group list-group-flush">
Grade: {{ user.userprofile.grade }} <li class="list-group-item">Grade: <strong>{{ user.userprofile.grade|default:"N/A" }}</strong></li>
</div> <li class="list-group-item">Registration: <strong>{{ user.userprofile.registration_number|default:"N/A" }}</strong></li>
<div> <li class="list-group-item">Supervisor:
Supervisor: {{ user.userprofile.supervisor }} {% if user.userprofile.supervisor %}
{% if request.user.is_superuser and user.userprofile.supervisor %} {{ user.userprofile.supervisor }}
<a href='{% url "generic:supervisor_detail" user.userprofile.supervisor.pk %}'><i class="bi bi-link"></i></a> {% if request.user.is_superuser %}
{% endif %} <a href="{% url 'generic:supervisor_detail' user.userprofile.supervisor.pk %}" class="ms-2"><i class="bi bi-box-arrow-up-right"></i></a>
<br/> {% endif %}
</div> {% else %}
<div> <span class="text-muted">None</span>
Registration number: {{ user.userprofile.registration_number }} {% endif %}
</div> </li>
<h3>Groups</h3>
<ul>
{% for group in user.user_groups.all %}
<li><a href="{% url 'generic:user_group_detail' group.pk %}">{{group}}</a></li>
{% empty %}
<li>No groups.</li>
{% endfor %}
</ul>
<h3>Exams</h3>
<p>
{% with user.userprofile.get_exams as exam_map %}
{% for exam_type, exams in exam_map.items %}
<h4>{{exam_type}}</h4>
<ul>
{% for exam in exams %}
<li>
<a href="{{exam.get_absolute_url}}">{{exam}}</a>
</li>
{% endfor %}
</ul> </ul>
{% empty %} <div class="card-body">
No exams. <a class="btn btn-outline-primary d-block mb-2" href="{% url 'password_change' %}">Change password</a>
{% endfor %} {% if request.user|has_group:"cid_user_manager" %}
{% endwith %} <a class="btn btn-outline-secondary d-block mb-2" href="{% url 'account_update' user.username %}">Update user details</a>
</p> {% endif %}
<a class="btn btn-primary d-block" href="{% url 'account_profile_update' user.username %}">Edit profile</a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card mb-3">
<div class="card-header">Groups</div>
<div class="card-body">
{% if user.user_groups.all %}
<div class="d-flex flex-wrap gap-2">
{% for group in user.user_groups.all %}
<a class="btn btn-sm btn-outline-secondary" href="{% url 'generic:user_group_detail' group.pk %}">{{ group }}</a>
{% empty %}
<div class="text-muted">No groups.</div>
{% endfor %}
</div>
{% else %}
<div class="text-muted">No groups.</div>
{% endif %}
</div>
</div>
<a id="password-change" href="{% url 'password_change'%}">Change password</a> <div class="card">
<div class="card-header">Exams</div>
{% if request.user|has_group:"cid_user_manager" %} <div class="card-body">
<a href="{% url 'account_update' user.username %}">Update user details</a> {% with user.userprofile.get_exams as exam_map %}
{% endif %} {% if exam_map %}
<a id="update-profile-link" href="{% url 'account_profile_update' user.username %}">Update user profile</a> {% for exam_type, exams in exam_map.items %}
<h5 class="mt-2">{{ exam_type }}</h5>
<ul class="list-group mb-2">
{% for exam in exams %}
<li class="list-group-item py-2">
<a href="{{ exam.get_absolute_url }}">{{ exam }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
{% else %}
<div class="text-muted">No exams.</div>
{% endif %}
{% endwith %}
</div>
</div>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}