MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve bracket styling

Browse source
This commit is contained in:
MeowcaTheoRange 2024-03-19 21:49:13 -05:00
parent ba06ec32c0
commit 7b7f6cab6a
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
views/projects/item/fediverse-madness/scripts/game.js
View file

@ -656,17 +656,20 @@ function endGame() {
// el_id_winnerUserFields.innerHTML = winningPlayer.fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, ""); // el_id_winnerUserFields.innerHTML = winningPlayer.fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
el_id_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`; el_id_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`;
el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => { el_id_winnerusers.innerHTML = state.reduce((pv, cs) => {
return pv + `<div class="flexUser">${cs.reduce((pvus, cus) => { return pv + `<div class="flexUser">${cs.reduce((pvus, cus) => {
return pvus + cus.reduce((pvu, cu) => { console.log(cus);
return pvu + `<div class="flexUserUser"> return pvus + `<div class="flexUserGroup"><div class="flexUserUser">
<img src="${cu.avatar}" width="64" height="64" /> <img src="${cus[0].avatar}" width="64" height="64" />
<h3><a href="${cu.url}" target="_blank">${renderNameHTML(escapeHtml(cu.display_name), cu)}</a></h3> <h3><a href="${cus[0].url}" target="_blank">${renderNameHTML(escapeHtml(cus[0].display_name), cus[0])}</a></h3>
<p>@${cu.fqn}</p> <p>@${cus[0].fqn}</p>
</div>` </div>${cus[1] ? `<div class="flexUserUser">
}, "") <img src="${cus[1].avatar}" width="64" height="64" />
}, "")}</div>` <h3><a href="${cus[1].url}" target="_blank">${renderNameHTML(escapeHtml(cus[1].display_name), cus[1])}</a></h3>
<p>@${cus[1].fqn}</p>
</div>` : ""}</div>`
}, "")}</div>` }, "")}</div>`
}, "");
} }
el_id_winnerPlayAgain.addEventListener("click", (x) => { el_id_winnerPlayAgain.addEventListener("click", (x) => {

19
views/projects/item/fediverse-madness/style.css
View file

@ -53,17 +53,17 @@
.flexUsersVert { .flexUsersVert {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: safe center; align-items: stretch;
overflow: auto; overflow: auto;
gap: 0.5em; gap: 0.5em;
} }
.flexUser { .flexUser {
display: flex; display: flex;
flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-evenly; justify-content: space-around;
width: 100%;
gap: 0.5em; gap: 0.5em;
} }
@ -71,10 +71,21 @@
text-align: center; text-align: center;
width: 256px; width: 256px;
min-width: 256px; min-width: 256px;
height: 150px;
min-height: 150px;
box-sizing: content-box;
overflow: hidden; overflow: hidden;
word-wrap: break-word; word-wrap: break-word;
} }
.flexUserGroup {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
gap: 0.5em;
}
.flexUserUser * { .flexUserUser * {
word-wrap: break-word; word-wrap: break-word;
} }