cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(player-card): avatar spans full card height; name + meta stacked

Browse source 
Both current cards and recent chips now lay out as a 2-column grid:
larger avatar (36px current / 28px recent) on the left occupying both
rows, name on row 1 column 2, meta on row 2 column 2. Removes the
inline "· " prefix from recent-chip meta — it was a separator for the
old single-line layout and reads as visual noise when stacked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 22:01:33 +02:00
parent b5cde8ed85
commit fa9acd3027
No known key found for this signature in database
3 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
l4d2web/l4d2web/static/css/components.css
View file

@ -917,10 +917,14 @@ div.modal.modal-wide {
.player-grid.current { grid-template-columns: repeat(4, 1fr); } .player-grid.current { grid-template-columns: repeat(4, 1fr); }
.player-grid.recent { grid-template-columns: repeat(5, 1fr); } .player-grid.recent { grid-template-columns: repeat(5, 1fr); }
/* Player card layout — avatar on left spans full card height; name + meta
stack on the right, both left-aligned. The avatar size is the height
driver for the whole card. */
.player-card { .player-card {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: var(--space-xs); grid-template-rows: auto auto;
column-gap: var(--space-s);
align-items: center; align-items: center;
padding: var(--space-xs); padding: var(--space-xs);
} }
@ -934,12 +938,14 @@ div.modal.modal-wide {
.player-card .avatar { .player-card .avatar {
border-radius: var(--radius-s); border-radius: var(--radius-s);
object-fit: cover; object-fit: cover;
grid-row: 1 / span 2;
} }
.current-card .avatar { width: 22px; height: 22px; grid-row: 1 / span 2; } .current-card .avatar { width: 36px; height: 36px; }
.recent-chip .avatar { width: 16px; height: 16px; } .recent-chip .avatar { width: 28px; height: 28px; }
.player-card .name { .player-card .name {
grid-column: 2; grid-column: 2;
grid-row: 1;
font-size: 0.9em; font-size: 0.9em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -950,13 +956,14 @@ div.modal.modal-wide {
.player-card .meta { .player-card .meta {
grid-column: 2; grid-column: 2;
grid-row: 2;
color: var(--color-muted); color: var(--color-muted);
font-size: 0.75em; font-size: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.recent-chip .meta { .recent-chip .meta { font-size: 0.8em; }
grid-column: auto;
font-size: 0.8em;
}
.avatar.placeholder { .avatar.placeholder {
display: inline-block; display: inline-block;

2
l4d2web/l4d2web/templates/_live_state.html
View file

@ -63,7 +63,7 @@
{% endif %} {% endif %}
<span class="name" title="{{ display_name }}">{{ display_name }}</span> <span class="name" title="{{ display_name }}">{{ display_name }}</span>
</a> </a>
<span class="meta">· {{ row.last_seen | timeago }}</span> <span class="meta">{{ row.last_seen | timeago }}</span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

2
l4d2web/l4d2web/templates/_recent_players_modal_body.html
View file

@ -15,7 +15,7 @@
{% endif %} {% endif %}
<span class="name" title="{{ display_name }}">{{ display_name }}</span> <span class="name" title="{{ display_name }}">{{ display_name }}</span>
</a> </a>
<span class="meta">· {{ row.last_seen | timeago }}</span> <span class="meta">{{ row.last_seen | timeago }}</span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>