diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js index 84622d1..557edc7 100644 --- a/wwwroot/js/ui.js +++ b/wwwroot/js/ui.js @@ -372,15 +372,24 @@ function buildSuggestionForm(initial = {}) { form.className = "stack suggestion-form"; form.innerHTML = `
@@ -397,15 +406,24 @@ function buildSuggestionForm(initial = {}) {
`; @@ -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 }) { diff --git a/wwwroot/styles.css b/wwwroot/styles.css index 24d3b55..9d5c8ba 100644 --- a/wwwroot/styles.css +++ b/wwwroot/styles.css @@ -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;