From ad16f8397b0d8a22897537e2f76b4388182a84af Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Sat, 2 May 2020 03:05:26 +0200 Subject: [PATCH] textareas fit to content in UserBio and Problems --- client/src/components/UserBio.vue | 31 ++++++++++++++++++++++++------- client/src/views/Problems.vue | 22 ++++++++++++++++------ 2 files changed, 40 insertions(+), 13 deletions(-) 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, "<br/>") //no HTML tag + ? + // No HTML tag + txt.replace(/\n\n/g, "<br/><div class='br'></div>") + .replace(/\n/g, "<br/>") : 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 </style> <style lang="sass" scoped> @@ -115,6 +126,12 @@ export default { max-width: 500px max-height: 100% +.buttons > button + margin-bottom: 0 + +h3 + margin-bottom: 5px + textarea display: block margin: 0 var(--universal-margin) diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue index 57473bce..b989fbcb 100644 --- a/client/src/views/Problems.vue +++ b/client/src/views/Problems.vue @@ -44,14 +44,14 @@ main fieldset textarea.instructions-edit( :placeholder="st.tr['Instructions']" - @input="adjustHeight($event)" + @input="adjustHeight('instructions')" v-model="curproblem.instruction" ) p(v-html="parseHtml(curproblem.instruction)") fieldset textarea.solution-edit( :placeholder="st.tr['Solution']" - @input="adjustHeight($event)" + @input="adjustHeight('solution')" v-model="curproblem.solution" ) p(v-html="parseHtml(curproblem.solution)") @@ -212,11 +212,11 @@ export default { document.getElementById("inputFen").focus(); } }, - adjustHeight: function(e) { + adjustHeight: function(elt) { // https://stackoverflow.com/a/48460773 - let t = e.target; + let t = document.querySelector("." + elt + "-edit"); t.style.height = ""; - t.style.height = t.scrollHeight + "px"; + t.style.height = (t.scrollHeight + 3) + "px"; }, setVname: function(prob) { prob.vname = this.st.variants.find(v => v.id == prob.vid).name; @@ -289,7 +289,10 @@ export default { }, parseHtml: function(txt) { return !txt.match(/<[/a-zA-Z]+>/) - ? txt.replace(/\n/g, "<br/>") //no HTML tag + ? + // No HTML tag + txt.replace(/\n\n/g, "<br/><div class='br'></div>") + .replace(/\n/g, "<br/>") : txt; }, changeVariant: function(prob) { @@ -402,6 +405,8 @@ export default { }, prepareNewProblem: function() { this.resetCurProb(); + this.adjustHeight("instructions"); + this.adjustHeight("solution"); window.doClick("modalNewprob"); }, sendProblem: function() { @@ -449,6 +454,8 @@ export default { // prob.diag might correspond to some other problem or be empty: this.setDiagram(prob); //V is loaded at this stage this.copyProblem(prob, this.curproblem); + this.adjustHeight("instructions"); + this.adjustHeight("solution"); window.doClick("modalNewprob"); }, deleteProblem: function(prob) { @@ -506,6 +513,9 @@ export default { <style lang="sass"> @import "@/styles/_board_squares_img.sass" @import "@/styles/_rules.sass" +.br + display: block + margin: 10px 0 </style> <style lang="sass" scoped> -- 2.48.1