Add a live D9-style preview to the Club identity page

Two columns (form left, preview right, matching D9) with a mini mock of this
app's own sidebar + a sample button -- primary_color/secondary_color are
what those actually control (base.html's --tenant-* properties), so the
preview reflects a real surface rather than D9's aspirational App/Website/
Email tabs. Colour swatch pickers sync with the existing hex text fields in
both directions, and a contrast-ratio row mirrors Club._content_color_for's
exact WCAG math client-side, so the ✓/⚠ shown is the real number the server
computes on save.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
2026-08-20 09:00:13 +02:00
parent 8baf3f7b3d
commit fc3901fb5a
5 changed files with 363 additions and 50 deletions

View File

@@ -4458,6 +4458,32 @@ class SponsorManagementTests(ManagementTestBase):
self.assertNotContains(self.club_get("home"), "Sponsors")
class ClubSettingsPreviewTests(ManagementTestBase):
"""The D9-alike live preview on the Club identity page -- see
management/templates/management/club_settings.html."""
def setUp(self):
self.client.force_login(self.admin_user)
def test_the_preview_frame_and_colour_swatches_render(self):
response = self.club_get("club_settings")
self.assertContains(response, "preview-sidebar")
self.assertContains(response, 'id="primary_color_swatch"')
self.assertContains(response, 'id="secondary_color_swatch"')
def test_saving_still_updates_the_club(self):
response = self.club_post(
"club_settings",
{"name": "Ajax United", "legal_name": "", "contact_email": "", "primary_color": "#123456", "secondary_color": "#654321"},
)
self.assertRedirects(response, reverse("management:club_settings"))
self.club.refresh_from_db()
self.assertEqual(self.club.primary_color, "#123456")
self.assertEqual(self.club.secondary_color, "#654321")
class BillingEndingBannerTests(ManagementTestBase):
"""The club dashboard's "billing is about to stop" warning -- see
management.views.HomeView and management/templates/management/home.html.