Frank/Escapepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Turn admin lobby chat panel into a tab

Browse Source 
The lobby chat was a standalone card sitting above the per-player log
tabs. Folds it into the same tab bar as the first (default-active)
tab instead, so the session log view has one consistent tab strip.
The tab-switching script now toggles by an .admin-tab-panel class
instead of assuming every panel's id starts with "player-", since
that's no longer true.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Frank
2026-08-10 16:48:06 +02:00
co-authored by Claude Sonnet 5
parent 2bfc2aca1a
commit a9cb0fa57f
2 changed files with 75 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin-session-tabs.js
+1 -1
View File
@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
const activate = (id) => {
document.querySelectorAll('[id^="player-"]').forEach(el => el.style.display = 'none');
document.querySelectorAll('.admin-tab-panel').forEach(el => el.style.display = 'none');
const target = document.getElementById(id);
if (target) {
target.style.display = 'block';
templates/game/admin/sessions/view.html.twig
+74 -56
View File
@@ -10,9 +10,58 @@
<h1 style="margin: 0 0 0.25rem; font-size: 1.5rem; color: #0f172a;">{{ session.game.name }} — Session #{{ session.id }}</h1>
<p style="margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem;">{{ session.status.value }} · {{ session.players|length }} player(s) · Created {{ session.created|date('Y-m-d H:i') }}</p>
<div style="background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.07); padding: 1.25rem; margin-bottom: 1.5rem;">
<h2 style="margin: 0 0 1rem; font-size: 1.1rem; color: #0f172a;">Pregame lobby chat</h2>
{# Tab buttons #}
<div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
<button
data-tab-target="lobby-chat-tab"
id="tab-lobby-chat"
style="
flex-shrink: 0;
white-space: nowrap;
padding: 0.6rem 1.25rem;
border: 1px solid #3b82f6;
border-bottom: 1px solid #fff;
background: #fff;
color: #1e40af;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
border-radius: 6px 6px 0 0;
margin-bottom: -1px;
"
>Lobby Chat</button>
{% for playerLog in playersLogs %}
<button
data-tab-target="player-{{ loop.index }}"
id="tab-{{ loop.index }}"
style="
flex-shrink: 0;
white-space: nowrap;
padding: 0.6rem 1.25rem;
border: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
font-size: 0.9rem;
font-weight: 400;
cursor: pointer;
border-radius: 6px 6px 0 0;
margin-bottom: -1px;
"
>{{ playerLog.username }}</button>
{% endfor %}
</div>
{# Tab content #}
<div id="lobby-chat-tab" class="admin-tab-panel" style="
display: block;
background: #fff;
border: 1px solid #e2e8f0;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,.07);
">
{% if lobbyMessages is empty %}
<p style="margin: 0; color: #94a3b8;">No lobby chat messages for this session.</p>
{% else %}
@@ -28,59 +77,28 @@
{% endif %}
</div>
{% if playersLogs is empty %}
<div style="background: #fff; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; box-shadow: 0 1px 3px rgba(0,0,0,.07);">
No players in this session.
{% for playerLog in playersLogs %}
<div id="player-{{ loop.index }}" class="admin-tab-panel" style="
display: none;
background: #fff;
border: 1px solid #e2e8f0;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,.07);
">
<pre style="
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
</div>
{% else %}
{# Tab buttons #}
<div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
{% for playerLog in playersLogs %}
<button
data-tab-target="player-{{ loop.index }}"
id="tab-{{ loop.index }}"
style="
flex-shrink: 0;
white-space: nowrap;
padding: 0.6rem 1.25rem;
border: 1px solid {{ loop.first ? '#3b82f6' : '#e2e8f0' }};
border-bottom: {{ loop.first ? '1px solid #fff' : '1px solid #e2e8f0' }};
background: {{ loop.first ? '#fff' : '#f8fafc' }};
color: {{ loop.first ? '#1e40af' : '#64748b' }};
font-size: 0.9rem;
font-weight: {{ loop.first ? '600' : '400' }};
cursor: pointer;
border-radius: 6px 6px 0 0;
margin-bottom: -1px;
"
>{{ playerLog.username }}</button>
{% endfor %}
</div>
{# Tab content #}
{% for playerLog in playersLogs %}
<div id="player-{{ loop.index }}" style="
display: {{ loop.first ? 'block' : 'none' }};
background: #fff;
border: 1px solid #e2e8f0;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,.07);
">
<pre style="
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
</div>
{% endfor %}
{% endif %}
{% endfor %}
{% endblock %}