mandalore/gateway-gamers.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile: fold hidden stats into visible columns on small screens

Browse Source 
W-L-T and ITC Rank appear as sub-text under the player name; Win% appears
under ITC Points. Desktop layout is unchanged. Skeleton loader also gets
matching placeholder lines on mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mandalore
2026-06-27 23:35:57 -05:00
co-authored by Claude Sonnet 4.6
parent e64513e51a
commit 1f7757dec6
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+9 -5
View File
@@ -259,8 +259,9 @@ function render(state) {
tr.innerHTML = tr.innerHTML =
`<td class="font-mono text-base-content/60">${i === 0 ? `<strong class="text-base-content">1</strong>` : (i + 1)}</td>` + `<td class="font-mono text-base-content/60">${i === 0 ? `<strong class="text-base-content">1</strong>` : (i + 1)}</td>` +
`<td><span class="font-semibold">${esc(name)}</span>` + `<td><span class="font-semibold">${esc(name)}</span>` +
`${u.nickname && fullName(u) ? `<span class="block text-xs text-base-content/40">"${esc(u.nickname)}"</span>` : ""}</td>` + `${u.nickname && fullName(u) ? `<span class="block text-xs text-base-content/40">"${esc(u.nickname)}"</span>` : ""}` +
`<td class="text-right font-mono font-bold">${fmtPts(r.ITCPoints)}</td>` + `<span class="block text-xs opacity-40 sm:hidden"><span class="text-success">${r.wins || 0}</span>–<span class="text-error">${r.losses || 0}</span>–${r.ties || 0} · ITC #${r.placing ?? "—"}</span>` +
`</td>` +
(() => { (() => {
const uid = r.userId || r.user?.id; const uid = r.userId || r.user?.id;
const d = uid && careerData[uid]; const d = uid && careerData[uid];
@@ -272,7 +273,10 @@ function render(state) {
? `<span class="block text-xs opacity-20">…</span>` ? `<span class="block text-xs opacity-20">…</span>`
: (d.w + d.l + d.t) === 0 ? '' : (d.w + d.l + d.t) === 0 ? ''
: `<span class="block text-xs opacity-40">${fmtWpct(d.w, d.l, d.t)} career</span>`; : `<span class="block text-xs opacity-40">${fmtWpct(d.w, d.l, d.t)} career</span>`;
return `<td class="text-right font-mono hidden sm:table-cell">` + const mobilePct = `<span class="block text-xs opacity-40 sm:hidden">${fmtWpct(r.wins, r.losses, r.ties)} win rate</span>`;
return `<td class="text-right font-mono font-bold">${fmtPts(r.ITCPoints)}` +
mobilePct + `</td>` +
`<td class="text-right font-mono hidden sm:table-cell">` +
`<span class="text-success">${r.wins || 0}</span>–<span class="text-error">${r.losses || 0}</span>–${r.ties || 0}` + `<span class="text-success">${r.wins || 0}</span>–<span class="text-error">${r.losses || 0}</span>–${r.ties || 0}` +
careerSub + `</td>` + careerSub + `</td>` +
`<td class="text-right font-mono hidden sm:table-cell">${fmtWpct(r.wins, r.losses, r.ties)}` + `<td class="text-right font-mono hidden sm:table-cell">${fmtWpct(r.wins, r.losses, r.ties)}` +
@@ -341,8 +345,8 @@ function showSkeleton() {
const tr = document.createElement("tr"); const tr = document.createElement("tr");
tr.innerHTML = tr.innerHTML =
`<td><div class="skeleton h-4 w-5"></div></td>` + `<td><div class="skeleton h-4 w-5"></div></td>` +
`<td><div class="skeleton h-4 w-3/5"></div></td>` + `<td><div class="skeleton h-4 w-3/5"></div><div class="skeleton h-3 w-2/5 mt-1 sm:hidden"></div></td>` +
`<td><div class="skeleton h-4 w-12 ml-auto"></div></td>` + `<td><div class="skeleton h-4 w-12 ml-auto"></div><div class="skeleton h-3 w-10 mt-1 ml-auto sm:hidden"></div></td>` +
`<td class="hidden sm:table-cell"><div class="skeleton h-4 w-14 ml-auto"></div></td>` + `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-14 ml-auto"></div></td>` +
`<td class="hidden sm:table-cell"><div class="skeleton h-4 w-12 ml-auto"></div></td>` + `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-12 ml-auto"></div></td>` +
`<td class="hidden sm:table-cell"><div class="skeleton h-4 w-10 ml-auto"></div></td>`; `<td class="hidden sm:table-cell"><div class="skeleton h-4 w-10 ml-auto"></div></td>`;