diff --git a/implementation.html b/implementation.html index e5f614b..2a202d3 100644 --- a/implementation.html +++ b/implementation.html @@ -175,7 +175,7 @@ #input-name-container { width: 100%; - margin-top: 48px; + margin-top: 24px; position: relative; } @@ -237,7 +237,7 @@ } #select-severity-container { - margin-top: 48px; + margin-top: 24px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; @@ -265,21 +265,22 @@ #select-severity-container :first-child { border-left: 2px solid #d3d3d3; - border-radius: 10px 0px 0px 10px; + border-radius: 4px 0px 0px 4px; } #select-severity-container :last-child { - border-radius: 0px 10px 10px 0px; + border-radius: 0px 4px 4px 0px; } #input-comment-container { width: 100%; - margin-top: 48px; + margin-top: 24px; position: relative; } #input-comment { height: 150px; + resize: none; } @@ -419,6 +420,9 @@ severityOption.addEventListener("click", (e) => this.#OnSeverityOptionClicked(e)); } + let inputComment = this.shadowRoot.getElementById("input-comment"); + inputComment.addEventListener("input", (e) => this.#onCommentInput(e)); + return form; } @@ -494,6 +498,12 @@ inputName.setAttribute('value', inputName.value); } + #onCommentInput(e) { + let inputComment = this.shadowRoot.getElementById("input-comment"); + + inputComment.setAttribute('value', inputComment.value); + } + #OnSeverityOptionClicked(e) { let selectedSeverityOption = e.currentTarget; @@ -504,7 +514,6 @@ if (severityOption == selectedSeverityOption) { if (!severityOption.classList.contains("selected")) { - console.log(severityOption.innerHTML); severityOption.classList.add("selected"); } }