From: Benjamin Auder Date: Sat, 2 May 2020 01:05:26 +0000 (+0200) Subject: textareas fit to content in UserBio and Problems X-Git-Url: https://git.auder.net/variants/Chakart/doc/css/img/current/git-logo.png?a=commitdiff_plain;h=ad16f8397b0d8a22897537e2f76b4388182a84af;p=vchess.git textareas fit to content in UserBio and Problems --- diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue index 7d19a182..eed423a6 100644 --- a/client/src/components/UserBio.vue +++ b/client/src/components/UserBio.vue @@ -10,8 +10,8 @@ div(:id="'player_' + uid") ) .card div(v-if="st.user.id == uid") - div - button(@click="modeEdit = !modeEdit") + div.buttons + button(@click="toggleEdit()") | {{ st.tr[modeEdit ? "Cancel" : "Edit"] }} button( v-show="modeEdit" @@ -20,7 +20,7 @@ div(:id="'player_' + uid") | {{ st.tr["Send"] }} fieldset(v-if="userBio !== undefined && modeEdit") textarea( - @input="adjustHeight($event)" + @input="adjustHeight()" v-model="userBio" ) h3 {{ uname }} @@ -55,14 +55,21 @@ export default { methods: { parseHtml: function(txt) { return !txt.match(/<[/a-zA-Z]+>/) - ? txt.replace(/\n/g, "
") //no HTML tag + ? + // No HTML tag + txt.replace(/\n\n/g, "
") + .replace(/\n/g, "
") : txt; }, - adjustHeight: function(e) { + adjustHeight: function() { // https://stackoverflow.com/a/48460773 - let t = e.target; + let t = document.querySelector("#player_" + this.uid + " textarea"); t.style.height = ""; - t.style.height = t.scrollHeight + "px"; + t.style.height = (t.scrollHeight + 3) + "px"; + }, + toggleEdit: function() { + this.modeEdit = !this.modeEdit; + if (this.modeEdit) this.$nextTick(this.adjustHeight); }, showBio: function() { if (!this.uname) @@ -84,6 +91,7 @@ export default { document.querySelector("#player_" + this.uid + " > .bio-div") .addEventListener("click", processModalClick); } + else if (this.modeEdit) this.adjustHeight(); }, sendBio: function() { ajax( @@ -108,6 +116,9 @@ export default { margin: 0 var(--universal-margin) p, ul, ol margin: var(--universal-margin) 0 + .br + display: block + margin: 10px 0