Add a club event-background photo, shown in black & white on event heroes
New Club.event_background, uploaded from the identity page. Individual events have no photo of their own (an established, deliberate scope decision for this build), so this is the one club-wide stand-in for the photo the design canvas's own hero mockups call for -- shown under the same dark gradient the hero already used, filtered to grayscale so it never fights the club's own brand colours. Falls back to the existing plain dark background when nothing's uploaded. Applied to both event hero treatments: M2's own event-detail screen (the "big black thing" this was reported against) and Home's "next up" card. The image and gradient are separate absolutely-positioned layers behind a z-10 content wrapper, not a filter on the card itself, so the grayscale treatment never touches the text/buttons drawn on top of it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
@@ -6,18 +6,28 @@
|
||||
for several". See EventDetailView's own docstring (mobile/views.py) for
|
||||
the judgment calls: no event photos, no Kit/dressing-room fields (the
|
||||
Event model has none), squad response is counts-only (never who answered
|
||||
what).
|
||||
what). The hero's background is the club's own generic event photo
|
||||
(Club.event_background, set on the identity page) shown in black & white
|
||||
under a dark gradient -- individual events have no photo of their own, so
|
||||
this is the one club-wide stand-in -- falling back to a plain dark
|
||||
background when the club hasn't uploaded one.
|
||||
{% endcomment %}
|
||||
|
||||
{% block content %}
|
||||
<div class="-mx-4 -mt-4 flex h-[220px] flex-col justify-end bg-ink p-4 text-white" style="background: linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.55) 60%, rgba(11,18,32,.92) 100%), var(--color-navy)">
|
||||
<a class="mb-auto flex h-11 w-11 items-center justify-center rounded-full bg-white/15" href="{% url "mobile:home" %}" aria-label="{% trans "Back" %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
|
||||
</a>
|
||||
<span class="mb-2 inline-block w-fit rounded bg-club px-2 py-1 font-display text-xs font-extrabold tracking-wide text-white uppercase">
|
||||
{% if event.kind == "game" %}{% if event.is_home_game %}{% trans "Home game" %}{% else %}{% trans "Away game" %}{% endif %}{% else %}{{ event.get_kind_display }}{% endif %}
|
||||
</span>
|
||||
<h1 class="font-display text-4xl leading-[.98] font-extrabold uppercase">{{ event.title }}</h1>
|
||||
<div class="-mx-4 -mt-4 relative flex h-[220px] flex-col overflow-hidden" style="background: var(--color-navy)">
|
||||
{% if club.event_background %}
|
||||
<img class="absolute inset-0 h-full w-full object-cover grayscale" src="{{ club.event_background.url }}" alt="">
|
||||
{% endif %}
|
||||
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.55) 60%, rgba(11,18,32,.92) 100%)"></div>
|
||||
<div class="relative z-10 flex flex-1 flex-col justify-end p-4 text-white">
|
||||
<a class="mb-auto flex h-11 w-11 items-center justify-center rounded-full bg-white/15" href="{% url "mobile:home" %}" aria-label="{% trans "Back" %}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
|
||||
</a>
|
||||
<span class="mb-2 inline-block w-fit rounded bg-club px-2 py-1 font-display text-xs font-extrabold tracking-wide text-white uppercase">
|
||||
{% if event.kind == "game" %}{% if event.is_home_game %}{% trans "Home game" %}{% else %}{% trans "Away game" %}{% endif %}{% else %}{{ event.get_kind_display }}{% endif %}
|
||||
</span>
|
||||
<h1 class="font-display text-4xl leading-[.98] font-extrabold uppercase">{{ event.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card flex flex-col gap-2.5 p-4">
|
||||
|
||||
@@ -35,40 +35,46 @@
|
||||
|
||||
{% if managed_people %}
|
||||
{% if hero_attendance %}
|
||||
<div class="m-card-dark overflow-hidden">
|
||||
<div class="p-4 pb-0">
|
||||
<p class="font-display text-xs font-extrabold text-info uppercase tracking-wide">{% blocktrans with date=hero_attendance.event.start|date:"D d M" %}Next up · {{ date }}{% endblocktrans %}</p>
|
||||
<p class="mt-1 font-display text-2xl leading-none font-extrabold uppercase">{{ hero_attendance.event.title }}</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap gap-4 font-mono text-xs text-on-dark">
|
||||
<span>{% blocktrans with time=hero_attendance.event.start|date:"H:i" %}{{ time }} face-off{% endblocktrans %}</span>
|
||||
{% if hero_attendance.event.gathering %}
|
||||
<span>{% blocktrans with time=hero_attendance.event.gathering|date:"H:i" %}Meet {{ time }}{% endblocktrans %}</span>
|
||||
{% endif %}
|
||||
{% if hero_attendance.event.location %}<span>{{ hero_attendance.event.location.name }}</span>{% endif %}
|
||||
<div class="m-card-dark relative overflow-hidden">
|
||||
{% if club.event_background %}
|
||||
<img class="absolute inset-0 h-full w-full object-cover grayscale" src="{{ club.event_background.url }}" alt="">
|
||||
{% endif %}
|
||||
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.15) 0%, rgba(11,18,32,.75) 55%, rgba(11,18,32,.95) 100%)"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="p-4 pb-0">
|
||||
<p class="font-display text-xs font-extrabold text-info uppercase tracking-wide">{% blocktrans with date=hero_attendance.event.start|date:"D d M" %}Next up · {{ date }}{% endblocktrans %}</p>
|
||||
<p class="mt-1 font-display text-2xl leading-none font-extrabold uppercase">{{ hero_attendance.event.title }}</p>
|
||||
</div>
|
||||
|
||||
{% if rsvp_closed %}
|
||||
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% trans "Replies are closed for this event" %}</p>
|
||||
<span class="pill pill-neutral mt-2">{{ hero_attendance.get_status_display }}</span>
|
||||
{% else %}
|
||||
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} — are you in?{% endblocktrans %}</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
||||
<input type="hidden" name="status" value="present">
|
||||
<button class="btn btn-positive w-full" type="submit">{% trans "In" %}</button>
|
||||
</form>
|
||||
<form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
||||
<input type="hidden" name="status" value="absent">
|
||||
<button class="btn w-full bg-steel text-on-dark" type="submit">{% trans "Out" %}</button>
|
||||
</form>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap gap-4 font-mono text-xs text-on-dark">
|
||||
<span>{% blocktrans with time=hero_attendance.event.start|date:"H:i" %}{{ time }} face-off{% endblocktrans %}</span>
|
||||
{% if hero_attendance.event.gathering %}
|
||||
<span>{% blocktrans with time=hero_attendance.event.gathering|date:"H:i" %}Meet {{ time }}{% endblocktrans %}</span>
|
||||
{% endif %}
|
||||
{% if hero_attendance.event.location %}<span>{{ hero_attendance.event.location.name }}</span>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if rsvp_closed %}
|
||||
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% trans "Replies are closed for this event" %}</p>
|
||||
<span class="pill pill-neutral mt-2">{{ hero_attendance.get_status_display }}</span>
|
||||
{% else %}
|
||||
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} — are you in?{% endblocktrans %}</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
||||
<input type="hidden" name="status" value="present">
|
||||
<button class="btn btn-positive w-full" type="submit">{% trans "In" %}</button>
|
||||
</form>
|
||||
<form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
||||
<input type="hidden" name="status" value="absent">
|
||||
<button class="btn w-full bg-steel text-on-dark" type="submit">{% trans "Out" %}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user