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

Add character counters to suggestion form fields

Browse Source
This commit is contained in:
Frank Tovar
2026-02-04 15:04:08 +01:00
parent a3122857cf
commit 9fefe6b9c3
2 changed files with 52 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
wwwroot/js/ui.js
View File

@@ -372,15 +372,24 @@ function buildSuggestionForm(initial = {}) {
form.className = "stack suggestion-form";
form.innerHTML = `
<label class="stack">
<span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
<span class="label-row">
<span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
<span class="char-counter" data-for="name"></span>
</span>
<input name="name" required maxlength="100" />
</label>
<label class="stack">
<span class="label" data-i18n="form.genre">${t("form.genre")}</span>
<span class="label-row">
<span class="label" data-i18n="form.genre">${t("form.genre")}</span>
<span class="char-counter" data-for="genre"></span>
</span>
<input name="genre" maxlength="50" />
</label>
<label class="stack">
<span class="label" data-i18n="form.description">${t("form.description")}</span>
<span class="label-row">
<span class="label" data-i18n="form.description">${t("form.description")}</span>
<span class="char-counter" data-for="description"></span>
</span>
<textarea name="description" maxlength="500"></textarea>
</label>
<div class="stack">
@@ -397,15 +406,24 @@ function buildSuggestionForm(initial = {}) {
</div>
</div>
<label class="stack">
<span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
<span class="label-row">
<span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
<span class="char-counter" data-for="screenshotUrl"></span>
</span>
<input name="screenshotUrl" maxlength="2048" />
</label>
<label class="stack">
<span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
<span class="label-row">
<span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
<span class="char-counter" data-for="youtubeUrl"></span>
</span>
<input name="youtubeUrl" maxlength="2048" />
</label>
<label class="stack">
<span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
<span class="label-row">
<span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
<span class="char-counter" data-for="gameUrl"></span>
</span>
<input name="gameUrl" maxlength="2048" />
</label>
`;
@@ -423,7 +441,24 @@ function buildSuggestionForm(initial = {}) {
setVal("screenshotUrl", initial.screenshotUrl ?? "");
setVal("youtubeUrl", initial.youtubeUrl ?? "");
setVal("gameUrl", initial.gameUrl ?? "");
initCharCounters(form);
return form;
function initCharCounters(formEl) {
const inputs = formEl.querySelectorAll("input[maxlength], textarea[maxlength]");
inputs.forEach((input) => {
const counter = formEl.querySelector(`.char-counter[data-for="${input.name}"]`);
if (!counter) return;
const update = () => {
const max = input.maxLength;
if (!max || max < 0) return;
const used = input.value?.length ?? 0;
counter.textContent = `${used}/${max}`;
};
input.addEventListener("input", update);
update();
});
}
}
function openSuggestionModal({ title, submitLabel, initial = {}, onSubmit }) {

11
wwwroot/styles.css
View File

@@ -221,6 +221,17 @@ button.ghost:hover {
color: #6c5a42;
font-size: 14px;
}
.label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.char-counter {
color: #8c7a63;
font-size: 12px;
white-space: nowrap;
}
.hint {
color: #8c7a63;
font-size: 12px;