X-Git-Url: https://git.auder.net/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fviews%2FProblems.vue;h=b989fbcb19024006b4d9366733acf016fdd9970f;hb=ad16f8397b0d8a22897537e2f76b4388182a84af;hp=7f8632da5e58879a0837dc2cfa07b428f0788f45;hpb=29d33c8ac72a9ea5d72d8c48c426d8380e188bd7;p=vchess.git

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 7f8632da..b989fbcb 100644
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -42,14 +42,16 @@ main
         )
         #diagram(v-html="curproblem.diag")
       fieldset
-        textarea(
+        textarea.instructions-edit(
           :placeholder="st.tr['Instructions']"
+          @input="adjustHeight('instructions')"
           v-model="curproblem.instruction"
         )
         p(v-html="parseHtml(curproblem.instruction)")
       fieldset
-        textarea(
+        textarea.solution-edit(
           :placeholder="st.tr['Solution']"
+          @input="adjustHeight('solution')"
           v-model="curproblem.solution"
         )
         p(v-html="parseHtml(curproblem.solution)")
@@ -210,6 +212,12 @@ export default {
         document.getElementById("inputFen").focus();
       }
     },
+    adjustHeight: function(elt) {
+      // https://stackoverflow.com/a/48460773
+      let t = document.querySelector("." + elt + "-edit");
+      t.style.height = "";
+      t.style.height = (t.scrollHeight + 3) + "px";
+    },
     setVname: function(prob) {
       prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
     },
@@ -281,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) {
@@ -394,6 +405,8 @@ export default {
     },
     prepareNewProblem: function() {
       this.resetCurProb();
+      this.adjustHeight("instructions");
+      this.adjustHeight("solution");
       window.doClick("modalNewprob");
     },
     sendProblem: function() {
@@ -441,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) {
@@ -479,7 +494,7 @@ export default {
               this.decorate(res.problems);
               this.problems[mode] =
                 this.problems[mode].concat(res.problems)
-                // TODO: problems are alrady sorted, would just need to insert
+                // TODO: problems are already sorted, would just need to insert
                 // the current individual problem in list; more generally
                 // there is probably only one misclassified problem.
                 // (Unless the user navigated several times by URL to show a
@@ -498,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>
@@ -521,6 +539,10 @@ export default {
 
 textarea
   width: 100%
+  &.instructions-edit
+    min-height: 70px
+  &.solution-edit
+    min-height: 100px
 
 #diagram
   margin: 0 auto