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

Match the identity page's tab switcher to the calendar's bigger pill style

Browse Source 
Moved into the filter strip, right-aligned like every other page's own
Calendar/List or Week/Month/Season toggle, and switched from the
bespoke .preview-tab/.preview-tab-active classes (now unused, removed)
to the same raw bg-steel pill markup event_list.html already uses.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-21 08:58:38 +02:00
parent 3ff882d705
commit 5b155fe4d4
4 changed files with 21 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
management/templates/management/club_settings.html
View File

@@ -32,13 +32,20 @@
<button class="btn btn-primary gap-2" type="submit" form="club-settings-form" data-identity-only>{% lucide "save" size=16 %} {% trans "Save changes" %}</button>
{% endblock actions %}
{% block panel %}
<div class="mb-1 flex w-fit overflow-hidden rounded-md border border-line">
<button type="button" class="preview-tab preview-tab-active" data-page-tab="identity">{% trans "Identity" %}</button>
<button type="button" class="preview-tab" data-page-tab="email">{% trans "Email" %}</button>
<button type="button" class="preview-tab" data-page-tab="pdf">{% trans "PDF" %}</button>
</div>
{% block filter_strip %}
<div class="flex flex-wrap items-center gap-3 border-b border-line bg-white px-7 py-3">
<div class="flex-1"></div>
{# Calendar/List segmented toggle -- event_list.html's own pattern (in turn member_list.html's Members/Guardians/Both). #}
<div class="flex items-center gap-1 rounded-full bg-steel p-1">
<button type="button" data-page-tab="identity" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase bg-white text-ink">{% lucide "building-2" size=13 %} {% trans "Identity" %}</button>
<button type="button" data-page-tab="email" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase text-on-dark hover:text-white">{% lucide "mail" size=13 %} {% trans "Email" %}</button>
<button type="button" data-page-tab="pdf" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase text-on-dark hover:text-white">{% lucide "file-text" size=13 %} {% trans "PDF" %}</button>
</div>
</div>
{% endblock filter_strip %}
{% block panel %}
<div data-page-panel="identity">
<div class="grid grid-cols-1 gap-5 xl:grid-cols-[1.2fr_1fr]">
<form id="club-settings-form" method="post" enctype="multipart/form-data" class="flex flex-col gap-5">
@@ -295,7 +302,12 @@
// hides on the other two rather than sitting there doing nothing.
document.querySelectorAll("[data-page-tab]").forEach((tab) => {
tab.addEventListener("click", () => {
document.querySelectorAll("[data-page-tab]").forEach((other) => other.classList.toggle("preview-tab-active", other === tab));
document.querySelectorAll("[data-page-tab]").forEach((other) => {
const active = other === tab;
other.classList.toggle("bg-white", active);
other.classList.toggle("text-ink", active);
other.classList.toggle("text-on-dark", !active);
});
document.querySelectorAll("[data-page-panel]").forEach((panel) => {
const active = panel.dataset.pagePanel === tab.dataset.pageTab;
panel.classList.toggle("hidden", !active);

2
management/tests.py
View File

@@ -4729,7 +4729,7 @@ class ClubSettingsPreviewTests(ManagementTestBase):
def test_the_page_tabs_and_colour_swatches_render(self):
response = self.club_get("club_settings")
self.assertContains(response, "preview-tab-active")
self.assertContains(response, "rounded-full bg-steel p-1")
self.assertContains(response, 'id="primary_color_swatch"')
self.assertContains(response, 'id="secondary_color_swatch"')