Skip to content

Commit 15d1874

Browse files
claudefrousselet
claude
authored and
frousselet
committed
feat: modernize accounts detail templates (user, group, profile)
Apply modern design tokens to remaining accounts detail pages. https://claude.ai/code/session_019Pwt94XydnebbkLdZWb7Ns
1 parent 561a939 commit 15d1874

3 files changed

Lines changed: 68 additions & 64 deletions

File tree

‎accounts/templates/accounts/group_detail.html‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
{% block content %}
77
<div class="d-flex justify-content-between align-items-center mb-4">
88
<h2>{{ group.name }}
9-
{% if group.is_system %}<span class="badge bg-info fs-6">{% trans "System" %}</span>{% endif %}
9+
{% if group.is_system %}<span class="badge fs-6" style="background:var(--accent-soft);color:var(--accent);font-size:.82rem;padding:.4em .8em">{% trans "System" %}</span>{% endif %}
1010
</h2>
11-
<div>
11+
<div class="d-flex gap-2">
1212
{% if not group.is_system %}
1313
{% has_perm "system.groups.update" as can_edit %}
1414
{% if can_edit %}
@@ -29,7 +29,7 @@ <h2>{{ group.name }}
2929
{% endif %}
3030

3131
{% if group.description %}
32-
<p class="text-muted mb-4">{{ group.description }}</p>
32+
<p style="color:var(--text-muted)" class="mb-4">{{ group.description }}</p>
3333
{% endif %}
3434

3535
<ul class="nav nav-tabs mb-4" role="tablist">
@@ -72,7 +72,7 @@ <h2>{{ group.name }}
7272
{% if group.is_system %}disabled{% endif %}
7373
class="form-check-input">
7474
{% else %}
75-
<span class="text-muted">—</span>
75+
<span style="color:var(--text-muted)">—</span>
7676
{% endif %}
7777
</td>
7878
{% endfor %}
@@ -94,32 +94,34 @@ <h2>{{ group.name }}
9494
<div class="card">
9595
<div class="card-body">
9696
{% if group_users %}
97-
<table class="table table-sm">
98-
<thead><tr><th>{% trans "Name" %}</th><th>{% trans "Email" %}</th><th></th></tr></thead>
99-
<tbody>
100-
{% for u in group_users %}
101-
<tr>
102-
<td><a href="{% url 'accounts:user-detail' u.pk %}">{{ u.display_name }}</a></td>
103-
<td>{{ u.email }}</td>
104-
<td class="text-end">
105-
{% if not group.is_system %}
106-
{% has_perm "system.groups.update" as can_edit_group %}
107-
{% if can_edit_group %}
108-
<form method="post" action="{% url 'accounts:group-users-update' group.pk %}" class="d-inline">
109-
{% csrf_token %}
110-
<input type="hidden" name="action" value="remove">
111-
<input type="hidden" name="user_id" value="{{ u.pk }}">
112-
<button type="submit" class="btn btn-sm btn-outline-danger">{% trans "Remove" %}</button>
113-
</form>
114-
{% endif %}
115-
{% endif %}
116-
</td>
117-
</tr>
118-
{% endfor %}
119-
</tbody>
120-
</table>
97+
<div class="table-responsive">
98+
<table class="table table-hover mb-0">
99+
<thead><tr><th>{% trans "Name" %}</th><th>{% trans "Email" %}</th><th></th></tr></thead>
100+
<tbody>
101+
{% for u in group_users %}
102+
<tr>
103+
<td><a href="{% url 'accounts:user-detail' u.pk %}" style="color:var(--accent);text-decoration:none;font-weight:500">{{ u.display_name }}</a></td>
104+
<td>{{ u.email }}</td>
105+
<td class="text-end">
106+
{% if not group.is_system %}
107+
{% has_perm "system.groups.update" as can_edit_group %}
108+
{% if can_edit_group %}
109+
<form method="post" action="{% url 'accounts:group-users-update' group.pk %}" class="d-inline">
110+
{% csrf_token %}
111+
<input type="hidden" name="action" value="remove">
112+
<input type="hidden" name="user_id" value="{{ u.pk }}">
113+
<button type="submit" class="btn btn-sm btn-outline-danger">{% trans "Remove" %}</button>
114+
</form>
115+
{% endif %}
116+
{% endif %}
117+
</td>
118+
</tr>
119+
{% endfor %}
120+
</tbody>
121+
</table>
122+
</div>
121123
{% else %}
122-
<p class="text-muted mb-0">{% trans "No users in this group." %}</p>
124+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No users in this group." %}</p>
123125
{% endif %}
124126

125127
{% if not group.is_system %}
@@ -150,7 +152,7 @@ <h2>{{ group.name }}
150152
<div class="tab-pane fade" id="scopes-tab">
151153
<div class="card">
152154
<div class="card-body">
153-
<p class="text-muted mb-3">
155+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-3">
154156
{% trans "If no scope is selected, members of this group have access to all scopes." %}
155157
</p>
156158
<form method="post" action="{% url 'accounts:group-scopes-update' group.pk %}">
@@ -167,7 +169,7 @@ <h2>{{ group.name }}
167169
</div>
168170
{% endfor %}
169171
{% else %}
170-
<p class="text-muted">{% trans "No scopes available." %}</p>
172+
<p style="color:var(--text-muted);font-size:.85rem">{% trans "No scopes available." %}</p>
171173
{% endif %}
172174
{% has_perm "system.groups.update" as can_edit_group %}
173175
{% if can_edit_group %}

‎accounts/templates/accounts/profile.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ <h2>{% trans "My profile" %}</h2>
5252
{% if groups %}
5353
<ul class="list-unstyled mb-0">
5454
{% for group in groups %}
55-
<li><span class="badge bg-secondary">{{ group.name }}</span></li>
55+
<li><span class="badge" style="background:var(--accent-soft);color:var(--accent);font-size:.82rem;padding:.4em .8em">{{ group.name }}</span></li>
5656
{% endfor %}
5757
</ul>
5858
{% else %}
59-
<p class="text-muted mb-0">{% trans "No group assigned." %}</p>
59+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No group assigned." %}</p>
6060
{% endif %}
6161
</div>
6262
</div>
@@ -71,7 +71,7 @@ <h2>{% trans "My profile" %}</h2>
7171
{% endfor %}
7272
</ul>
7373
{% else %}
74-
<p class="text-muted mb-0">{% trans "No permissions." %}</p>
74+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No permissions." %}</p>
7575
{% endif %}
7676
</div>
7777
</div>

‎accounts/templates/accounts/user_detail.html‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{% block content %}
77
<div class="d-flex justify-content-between align-items-center mb-4">
88
<h2>{{ account_user.display_name }}</h2>
9-
<div>
9+
<div class="d-flex gap-2">
1010
{% has_perm "system.users.update" as can_edit %}
1111
{% if can_edit %}
1212
<a href="{% url 'accounts:user-update' account_user.pk %}" class="btn btn-outline-primary">{% trans "Edit" %}</a>
@@ -27,15 +27,15 @@ <h2>{{ account_user.display_name }}</h2>
2727
<div class="card">
2828
<div class="card-body">
2929
<dl class="row mb-0">
30-
<dt class="col-sm-3">{% trans "Email" %}</dt><dd class="col-sm-9">{{ account_user.email }}</dd>
31-
<dt class="col-sm-3">{% trans "First name" %}</dt><dd class="col-sm-9">{{ account_user.first_name }}</dd>
32-
<dt class="col-sm-3">{% trans "Last name" %}</dt><dd class="col-sm-9">{{ account_user.last_name }}</dd>
33-
<dt class="col-sm-3">{% trans "Job title" %}</dt><dd class="col-sm-9">{{ account_user.job_title|default:"-" }}</dd>
34-
<dt class="col-sm-3">{% trans "Department" %}</dt><dd class="col-sm-9">{{ account_user.department|default:"-" }}</dd>
35-
<dt class="col-sm-3">{% trans "Phone" %}</dt><dd class="col-sm-9">{{ account_user.phone|default:"-" }}</dd>
36-
<dt class="col-sm-3">{% trans "Language" %}</dt><dd class="col-sm-9">{{ account_user.get_language_display }}</dd>
37-
<dt class="col-sm-3">{% trans "Timezone" %}</dt><dd class="col-sm-9">{{ account_user.timezone }}</dd>
38-
<dt class="col-sm-3">{% trans "Status" %}</dt>
30+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Email" %}</dt><dd class="col-sm-9">{{ account_user.email }}</dd>
31+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "First name" %}</dt><dd class="col-sm-9">{{ account_user.first_name }}</dd>
32+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Last name" %}</dt><dd class="col-sm-9">{{ account_user.last_name }}</dd>
33+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Job title" %}</dt><dd class="col-sm-9">{{ account_user.job_title|default:"-" }}</dd>
34+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Department" %}</dt><dd class="col-sm-9">{{ account_user.department|default:"-" }}</dd>
35+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Phone" %}</dt><dd class="col-sm-9">{{ account_user.phone|default:"-" }}</dd>
36+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Language" %}</dt><dd class="col-sm-9">{{ account_user.get_language_display }}</dd>
37+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Timezone" %}</dt><dd class="col-sm-9">{{ account_user.timezone }}</dd>
38+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Status" %}</dt>
3939
<dd class="col-sm-9">
4040
{% if account_user.is_active %}
4141
{% if account_user.is_locked %}
@@ -47,8 +47,8 @@ <h2>{{ account_user.display_name }}</h2>
4747
<span class="badge bg-secondary">{% trans "Inactive" %}</span>
4848
{% endif %}
4949
</dd>
50-
<dt class="col-sm-3">{% trans "Last login" %}</dt><dd class="col-sm-9">{{ account_user.last_login|date:"d/m/Y H:i"|default:"-" }}</dd>
51-
<dt class="col-sm-3">{% trans "Created on" %}</dt><dd class="col-sm-9">{{ account_user.created_at|date:"d/m/Y H:i" }}</dd>
50+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Last login" %}</dt><dd class="col-sm-9">{{ account_user.last_login|date:"d/m/Y H:i"|default:"-" }}</dd>
51+
<dt class="col-sm-3" style="color:var(--text-muted);font-size:.82rem">{% trans "Created on" %}</dt><dd class="col-sm-9">{{ account_user.created_at|date:"d/m/Y H:i" }}</dd>
5252
</dl>
5353
</div>
5454
</div>
@@ -61,13 +61,13 @@ <h2>{{ account_user.display_name }}</h2>
6161
<ul class="list-group list-group-flush">
6262
{% for group in groups %}
6363
<li class="list-group-item d-flex justify-content-between align-items-center">
64-
<a href="{% url 'accounts:group-detail' group.pk %}">{{ group.name }}</a>
65-
{% if group.is_system %}<span class="badge bg-info">{% trans "System" %}</span>{% endif %}
64+
<a href="{% url 'accounts:group-detail' group.pk %}" style="color:var(--accent);text-decoration:none;font-weight:500">{{ group.name }}</a>
65+
{% if group.is_system %}<span class="badge" style="background:var(--accent-soft);color:var(--accent);font-size:.82rem;padding:.4em .8em">{% trans "System" %}</span>{% endif %}
6666
</li>
6767
{% endfor %}
6868
</ul>
6969
{% else %}
70-
<p class="text-muted mb-0">{% trans "No group assigned." %}</p>
70+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No group assigned." %}</p>
7171
{% endif %}
7272
</div>
7373
</div>
@@ -83,7 +83,7 @@ <h2>{{ account_user.display_name }}</h2>
8383
{% endfor %}
8484
</ul>
8585
{% else %}
86-
<p class="text-muted mb-0">{% trans "No permissions." %}</p>
86+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No permissions." %}</p>
8787
{% endif %}
8888
</div>
8989
</div>
@@ -93,21 +93,23 @@ <h2>{{ account_user.display_name }}</h2>
9393
<div class="card">
9494
<div class="card-body">
9595
{% if recent_access_logs %}
96-
<table class="table table-sm">
97-
<thead><tr><th>{% trans "Date" %}</th><th>{% trans "Event" %}</th><th>{% trans "IP" %}</th><th>{% trans "Reason" %}</th></tr></thead>
98-
<tbody>
99-
{% for log in recent_access_logs %}
100-
<tr>
101-
<td>{{ log.timestamp|date:"d/m/Y H:i:s" }}</td>
102-
<td>{{ log.get_event_type_display }}</td>
103-
<td>{{ log.ip_address|default:"-" }}</td>
104-
<td>{{ log.get_failure_reason_display|default:"-" }}</td>
105-
</tr>
106-
{% endfor %}
107-
</tbody>
108-
</table>
96+
<div class="table-responsive">
97+
<table class="table table-hover mb-0">
98+
<thead><tr><th>{% trans "Date" %}</th><th>{% trans "Event" %}</th><th>{% trans "IP" %}</th><th>{% trans "Reason" %}</th></tr></thead>
99+
<tbody>
100+
{% for log in recent_access_logs %}
101+
<tr>
102+
<td>{{ log.timestamp|date:"d/m/Y H:i:s" }}</td>
103+
<td>{{ log.get_event_type_display }}</td>
104+
<td>{{ log.ip_address|default:"-" }}</td>
105+
<td>{{ log.get_failure_reason_display|default:"-" }}</td>
106+
</tr>
107+
{% endfor %}
108+
</tbody>
109+
</table>
110+
</div>
109111
{% else %}
110-
<p class="text-muted mb-0">{% trans "No events." %}</p>
112+
<p style="color:var(--text-muted);font-size:.85rem" class="mb-0">{% trans "No events." %}</p>
111113
{% endif %}
112114
</div>
113115
</div>

0 commit comments

Comments
 (0)