Bernard Siebens
59d287e978
mobile/templates/mobile/_avatar.html replaces four copies of the same rounded-full/font-display/initials-slicing markup across event_detail.html, me.html (the account's own header avatar and each "People I manage" row), and news_detail.html's byline -- size/text/background stay parameterized per call site so nothing changes visually. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
12 lines
867 B
HTML
12 lines
867 B
HTML
{% comment %}
|
|
Avatar-initials circle -- the one idiom repeated across every M-screen
|
|
(event_detail's "Your answers" rows, me.html's own header + "People I
|
|
manage" rows, news_detail's byline). Expects ``person`` (anything with
|
|
first_name/last_name) in scope; all other vars are optional and default
|
|
to the most common case (me.html's "People I manage" rows):
|
|
- size_class: the h-*/w-* pair, default "h-10 w-10"
|
|
- text_class: the initials' font size, default "text-sm"
|
|
- bg_class: the circle's background, default "bg-steel"
|
|
{% endcomment %}
|
|
<span class="flex {{ size_class|default:"h-10 w-10" }} shrink-0 items-center justify-center rounded-full {{ bg_class|default:"bg-steel" }} font-display {{ text_class|default:"text-sm" }} font-extrabold text-white">{{ person.first_name|slice:":1" }}{{ person.last_name|slice:":1" }}</span>
|