Make missing-vote warning stack above slider and color red
This commit is contained in:
@@ -157,6 +157,19 @@ button .chip {
|
||||
gap: 8px;
|
||||
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 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@@ -145,15 +145,17 @@ export function renderVotes() {
|
||||
});
|
||||
const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
|
||||
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 footer = document.createElement("div");
|
||||
footer.className = "vote-controls";
|
||||
footer.innerHTML = `
|
||||
<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}">
|
||||
<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);
|
||||
list.appendChild(li);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user