Stack the referee dashboard's season stats full-width instead of 2/3+1/3

The season-at-a-glance numbers become their own full-width KPI row (same
treatment as the existing "games in view" row above), with the chart and
per-referee breakdown as a separate full-width card below, instead of
squeezed into a narrow sidebar next to the chart.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
2026-08-22 17:29:24 +02:00
parent cf1a2f0f5a
commit 8ddae5e63b
2 changed files with 23 additions and 25 deletions

View File

@@ -52,36 +52,32 @@
about who's actually done the refereeing this season, all-time
within it, not just what's still upcoming.
{% endcomment %}
<div class="grid grid-cols-1 gap-3.5 lg:grid-cols-3">
<div class="card p-4.5 lg:col-span-2">
<div class="flex flex-col gap-3.5">
<div class="flex flex-wrap gap-3.5">
<div class="card min-w-0 flex-1 p-4">
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Active referees" %}</div>
<div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_active_referees }}</div>
<div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
</div>
<div class="card min-w-0 flex-1 p-4">
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games refereed" %}</div>
<div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_total_assignments }}</div>
<div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
</div>
<div class="card min-w-0 flex-1 p-4">
<div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Average per referee" %}</div>
<div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_avg_games_per_referee }}</div>
<div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
</div>
</div>
<div class="card p-4.5">
<div class="mb-1 font-display text-base font-extrabold tracking-[.08em] text-ink uppercase">{% trans "Games refereed per referee" %}</div>
<p class="mb-3 text-sm text-muted">{% trans "This season." %}</p>
{% if referee_stats %}
<div class="h-56">
<canvas id="referee-games-chart"></canvas>
</div>
{% else %}
<p class="py-6 text-center text-sm text-muted">{% trans "No referee assignments recorded yet this season." %}</p>
{% endif %}
</div>
<div class="card p-4.5">
<div class="mb-3 font-display text-base font-extrabold tracking-[.08em] text-ink uppercase">{% trans "Season at a glance" %}</div>
<dl>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[13px] text-muted">{% trans "Active referees" %}</dt>
<dd class="font-mono text-sm font-semibold text-ink">{{ kpi_active_referees }}</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[13px] text-muted">{% trans "Games refereed" %}</dt>
<dd class="font-mono text-sm font-semibold text-ink">{{ kpi_total_assignments }}</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[13px] text-muted">{% trans "Average per referee" %}</dt>
<dd class="font-mono text-sm font-semibold text-ink">{{ kpi_avg_games_per_referee }}</dd>
</div>
</dl>
{% if referee_stats %}
<div class="mt-2 max-h-40 overflow-y-auto border-t border-rule">
<div class="mt-3 max-h-40 overflow-y-auto border-t border-rule">
{% for row in referee_stats %}
<div class="flex items-center justify-between gap-3 py-1.5 {% if not forloop.last %}border-b border-rule{% endif %}">
<span class="truncate text-[13px] text-ink">{{ row.member__first_name }} {{ row.member__last_name }}</span>
@@ -89,6 +85,8 @@
</div>
{% endfor %}
</div>
{% else %}
<p class="py-6 text-center text-sm text-muted">{% trans "No referee assignments recorded yet this season." %}</p>
{% endif %}
</div>
</div>