bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the claims page's mismatched control heights, and separate approve/reject

Browse Source 
Two things, found together while looking at the row of controls under each
pending claim.

The child dropdown stood taller than the btn-sm/input-sm around it because
ClaimReviewForm.child hardcoded its own class="select select-bordered w-full"
on the widget. templatetags/field.html's select branch already builds the
full class list itself (base classes + the size modifier), so the widget's
own class rendered as a second, non-merging class="..." attribute right next
to the generated one -- select-sm was in the markup, just shadowed by a
duplicate attribute the browser never applied. No other Select field in the
app hardcodes a class this way, which is why nothing else had the problem.
Fixed by dropping it and passing size="small" through {% form_field %}
instead, the same way every other compact inline select in the app does.

Also pulled Approve and Reject apart with justify-between rather than letting
both sit in one flex-wrap run, so they stay on opposite sides of the row
(and don't end up adjacent on a wrap) rather than one stray click apart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Bernard Siebens
2026-08-11 18:40:52 +02:00
parent cb7f56709b
commit b2657bb15d
4 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
management/templates/management/parent_claim_list.html
View File

@@ -27,18 +27,29 @@
</div>
</div>
<div class="flex flex-wrap items-end gap-2 mt-4">
{% comment %}
size="small" + show_label=False on the dropdown: {% form_field %}
defaults to daisyUI's medium control height, taller than the btn-sm/
input-sm used by everything else in this row -- without it the
dropdown stands out against the buttons either side of it.
justify-between (rather than everything in one flex-wrap run) keeps
Approve and Reject apart even as the row wraps on a narrow screen --
Approve stays pinned left, Reject right, so the two are never one
stray click apart the way adjacent buttons would be.
{% endcomment %}
<div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 mt-4">
{% if claim.has_candidates %}
<form method="post" action="{% url 'management:parent_claim_approve' claim.pk %}" class="flex flex-wrap items-end gap-2">
<form method="post" action="{% url 'management:parent_claim_approve' claim.pk %}" class="flex flex-wrap items-center gap-2">
{% csrf_token %}
<div class="min-w-64">{% form_field claim.review_form.child %}</div>
<div class="min-w-64">{% form_field claim.review_form.child size="small" show_label=False %}</div>
<button class="btn btn-primary btn-sm gap-2" type="submit">{% lucide "check" size=14 %} {% trans "Approve" %}</button>
</form>
{% else %}
<p class="text-sm opacity-70">{% trans "No child without a parent matches this. Check the spelling and the date of birth with them before rejecting." %}</p>
{% endif %}
<form method="post" action="{% url 'management:parent_claim_reject' claim.pk %}" class="flex items-end gap-2">
<form method="post" action="{% url 'management:parent_claim_reject' claim.pk %}" class="flex items-center gap-2">
{% csrf_token %}
<input type="text" name="note" class="input input-bordered input-sm" placeholder="{% trans 'Reason (optional)' %}">
<button class="btn btn-outline btn-error btn-sm gap-2" type="submit">{% lucide "x" size=14 %} {% trans "Reject" %}</button>

16
management/tests.py
View File

@@ -1454,6 +1454,22 @@ class ParentClaimViewTests(ManagementTestBase):
self.assertContains(response, "taylor.doe@example.com")
self.assertContains(response, "Jamie Doe")
def test_the_child_dropdown_matches_the_height_of_the_buttons_beside_it(self):
# Regression: ClaimReviewForm.child used to hardcode its own class=
# attrs, which rendered a second class="..." on the <select> alongside
# the one templatetags/field.html builds (including the size modifier)
# -- the two never merge, so select-sm silently never reached the page
# and the dropdown stood taller than the btn-sm/input-sm around it.
self.submit()
self.client.force_login(self.admin_user)
response = self.club_get("parent_claim_list")
self.assertContains(response, "select-sm")
html = response.content.decode()
select_tag = html[html.index("<select") : html.index(">", html.index("<select"))]
self.assertEqual(select_tag.count('class="'), 1)
def test_approving_links_the_parent_as_a_guardian(self):
self.submit()
claim = ParentClaim.objects.get(club=self.club)

6
members/forms.py
View File

@@ -29,7 +29,11 @@ class ClaimReviewForm(forms.Form):
never quietly re-parent a child who already has one.
"""
child = forms.ModelChoiceField(queryset=None, label=_("Link to"), widget=forms.Select(attrs={"class": "select select-bordered w-full"}))
# No hardcoded "class" here -- templatetags/field.html's own select branch
# already builds the full class list (including the size modifier), and a
# class baked into the widget attrs would render a second, conflicting
# class="..." on the <select> alongside it rather than merging with it.
child = forms.ModelChoiceField(queryset=None, label=_("Link to"), widget=forms.Select())
def __init__(self, *args, candidates=None, **kwargs):
super().__init__(*args, **kwargs)

3
static/css/app.css
View File

@@ -3773,6 +3773,9 @@
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.gap-x-6 {
column-gap: calc(var(--spacing) * 6);
}
.gap-y-2 {
row-gap: calc(var(--spacing) * 2);
}