xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make missing-vote warning stack above slider and color red

Browse Source
This commit is contained in:
Frank Tovar
2026-02-04 22:57:48 +01:00
parent 13c8bb6194
commit 8a4b119070
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
wwwroot/css/components.css
View File

@@ -157,6 +157,19 @@ button .chip {
gap: 8px; gap: 8px;
align-items: center; align-items: center;
} }
.warning-text {
color: #b23b3b;
font-weight: 600;
margin-bottom: 6px;
}
.vote-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 8px;
}
.vote-controls { .vote-controls {
display: flex; display: flex;
gap: 10px; gap: 10px;

6
wwwroot/js/ui.js
View File

@@ -145,15 +145,17 @@ export function renderVotes() {
}); });
const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id); const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
const current = hasVote ? votesMap[s.id] : 5; // start neutral when no prior vote const current = hasVote ? votesMap[s.id] : 5; // start neutral when no prior vote
const displayScore = hasVote ? current : t("vote.missing"); const displayScore = hasVote ? current : "—";
const displayEmoji = hasVote ? scoreToEmoji(current) : "⚠️"; const displayEmoji = hasVote ? scoreToEmoji(current) : "⚠️";
const footer = document.createElement("div"); const footer = document.createElement("div");
footer.className = "vote-controls"; footer.className = "vote-controls";
footer.innerHTML = ` footer.innerHTML = `
<div class="warning-text ${hasVote ? "hidden" : ""}" id="warn-${s.id}">${t("vote.missingWarn")}</div> <div class="warning-text ${hasVote ? "hidden" : ""}" id="warn-${s.id}">${t("vote.missingWarn")}</div>
<div class="vote-row">
<input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}"> <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
<span class="score" id="score-${s.id}">${displayScore}</span> <span class="score" id="score-${s.id}">${displayScore}</span>
<span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>`; <span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>
</div>`;
li.querySelector(".card-body").appendChild(footer); li.querySelector(".card-body").appendChild(footer);
list.appendChild(li); list.appendChild(li);
}); });