Let the club logo fill more of its ring, match it in the control panel

Drops the inner padding on the logo image so it fills the circle right
up to the ring, rather than floating small in the middle of it -- most
visible on logos with generous internal whitespace (e.g. some SVGs).

The control panel's club-detail page now frames the logo the same way.
It doesn't get the page-wide --color-primary override the club's own
site uses (the panel must never dress itself up as the club), so the
ring colour is set as a locally-scoped custom property on just this
element instead.
This commit is contained in:
2026-07-27 11:15:08 +02:00
parent a86c35cbe7
commit febde41214
4 changed files with 4550 additions and 3 deletions

View File

@@ -3,7 +3,18 @@
{% block logo %}
{% if club.logo %}
<img class="h-16 w-16 object-contain" src="{{ club.logo.url }}" alt="{{ club.name }}">
{% comment %}
The ring is the club's own primary colour, same as on the club's own subdomain --
but the control panel never injects a page-wide --color-primary override (it must
not dress itself up as the club), so it's set here as a locally-scoped custom
property instead: it only reaches this element and its children, not the rest of
the panel's buttons and badges.
{% endcomment %}
<div class="avatar">
<div class="w-16 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100" {% if club.primary_color %}style="--color-primary: {{ club.primary_color }};"{% endif %}>
<img class="club-logo object-contain" src="{{ club.logo.url }}" alt="{{ club.name }}">
</div>
</div>
{% else %}
<div class="avatar avatar-placeholder">
<div class="w-16 text-xl rounded-full bg-neutral text-neutral-content">

View File

@@ -961,6 +961,19 @@ class ClubDetailMetricsTests(ControlPanelTestBase):
self.assertContains(response, "cannot take a signup")
def test_a_club_logo_gets_a_primary_coloured_ring(self):
# The control panel never injects a page-wide --color-primary override (that would
# dress the whole panel up as the club), so the ring colour is scoped locally to
# this element instead — assert the club's own colour reaches it regardless.
self.club.logo = "clubs/ajax-united/crest.png"
self.club.primary_color = "#1e40af"
self.club.save()
response = self.client.get(reverse("controlpanel:club_detail", args=[self.club.pk]))
self.assertContains(response, "ring-primary")
self.assertContains(response, "--color-primary: #1e40af")
class NewMemberTests(TestCase):
def setUp(self):