Scarriffle/fuesse-sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Admin-Spielertabelle: Spalten richtig ausgerichtet + scrollbar

Browse Source 
- Chips in inneren <div> statt display:flex direkt auf <td> (sonst fallen die Zellen
  aus dem Spaltenraster -> alles rutschte in die IP-Spalte, Gerät/Browser leer)
- Tabelle horizontal scrollbar (overflow-x) auf schmalen Screens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-06 19:03:03 +02:00
parent 5018ab753a
commit ddcc6ad657
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/admin.html
View File

@@ -33,7 +33,9 @@
section.tab { display:none; } section.tab { display:none; }
section.tab.active { display:block; } section.tab.active { display:block; }
#players-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; } table { width:100%; border-collapse:collapse; font-size:14px; }
#players-wrap table { min-width:820px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; } th { color:var(--muted); font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:4px; } .chips { display:flex; flex-wrap:wrap; gap:4px; }

3
public/js/admin.js
View File

@@ -66,12 +66,11 @@ async function loadPlayers() {
const rows = players.map((p) => { const rows = players.map((p) => {
const banned = bans.has(String(p.name).toLowerCase()); const banned = bans.has(String(p.name).toLowerCase());
const chips = (arr) => (arr || []).map((x) => `<span class="chip"></span>`).join('');
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = tr.innerHTML =
`<td><b class="pname"></b>${banned ? ' <span class="chip" style="color:#ff9bb2">gebannt</span>' : ''}</td>` + `<td><b class="pname"></b>${banned ? ' <span class="chip" style="color:#ff9bb2">gebannt</span>' : ''}</td>` +
`<td>${p.bestScore}</td><td>${p.games}</td><td>${fmt(p.lastAt)}</td>` + `<td>${p.bestScore}</td><td>${p.games}</td><td>${fmt(p.lastAt)}</td>` +
`<td class="ips chips"></td><td class="locs chips"></td><td class="devs chips"></td><td class="brs chips"></td>` + `<td><div class="ips chips"></div></td><td><div class="locs chips"></div></td><td><div class="devs chips"></div></td><td><div class="brs chips"></div></td>` +
`<td><button class="${banned ? '' : 'danger'} act">${banned ? 'Entbannen' : 'Bannen'}</button></td>`; `<td><button class="${banned ? '' : 'danger'} act">${banned ? 'Entbannen' : 'Bannen'}</button></td>`;
tr.querySelector('.pname').textContent = p.name; // XSS-safe tr.querySelector('.pname').textContent = p.name; // XSS-safe
const fill = (sel, arr) => { const c = tr.querySelector(sel); (arr || []).forEach((x) => { const s = document.createElement('span'); s.className = 'chip'; s.textContent = x; c.appendChild(s); }); }; const fill = (sel, arr) => { const c = tr.querySelector(sel); (arr || []).forEach((x) => { const s = document.createElement('span'); s.className = 'chip'; s.textContent = x; c.appendChild(s); }); };