Round the app header crest and show initials without a logo
The header crest was management.css's hexagon clip-path mark, and its no-logo fallback rendered an empty coloured hexagon with no initials at all. Both now render as a plain circle, and the fallback shows the club's initials on its own colour -- same source (Club.logo/Club.initials) the PWA install icon already uses, just inline in the header instead of a generated PNG. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
@@ -187,13 +187,25 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Club logo (img) or initials (span) in the app header -- always a plain
|
||||||
|
circle, unlike management.css's own hexagon crest mark. */
|
||||||
.app-crest {
|
.app-crest {
|
||||||
width: 30px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: var(--color-club);
|
border-radius: 999px;
|
||||||
clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-crest-fallback {
|
||||||
|
background: var(--color-club);
|
||||||
|
color: var(--color-club-content);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Role switcher -- design doc "Component" table: full-width segmented pill,
|
/* Role switcher -- design doc "Component" table: full-width segmented pill,
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
{% if club.logo %}
|
{% if club.logo %}
|
||||||
<img class="app-crest" src="{{ club.logo.url }}" alt="">
|
<img class="app-crest" src="{{ club.logo.url }}" alt="">
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="app-crest"></span>
|
<span class="app-crest app-crest-fallback">{{ club.initials }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<span class="min-w-0">
|
<span class="min-w-0">
|
||||||
<span class="block truncate font-display text-[19px] leading-none font-extrabold text-white uppercase">{{ club.name }}</span>
|
<span class="block truncate font-display text-[19px] leading-none font-extrabold text-white uppercase">{{ club.name }}</span>
|
||||||
|
|||||||
@@ -51,6 +51,14 @@ class MobileShellTests(TestCase):
|
|||||||
self.assertContains(response, self.club.name)
|
self.assertContains(response, self.club.name)
|
||||||
self.assertContains(response, 'rel="manifest"')
|
self.assertContains(response, 'rel="manifest"')
|
||||||
|
|
||||||
|
def test_header_crest_falls_back_to_round_initials_without_a_logo(self):
|
||||||
|
self.client.force_login(self.user)
|
||||||
|
|
||||||
|
response = self._get("home")
|
||||||
|
|
||||||
|
self.assertContains(response, 'class="app-crest app-crest-fallback"')
|
||||||
|
self.assertContains(response, self.club.initials)
|
||||||
|
|
||||||
def test_manifest_names_the_club_and_points_at_its_icon(self):
|
def test_manifest_names_the_club_and_points_at_its_icon(self):
|
||||||
response = self._get("manifest")
|
response = self._get("manifest")
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user