X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FProblems.vue;h=57473bce0a2f31635a05e9eb14753a6dee830442;hb=3c24a27df9d973bdbfd8d863a2209bad5da03572;hp=28a7b0dc098f7355f398da1b93a2ee1fed548dcd;hpb=956407c4205d7aae82bf4a9b0bf5b66218fb42b6;p=vchess.git

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 28a7b0dc..57473bce 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($event)"
           v-model="curproblem.instruction"
         )
         p(v-html="parseHtml(curproblem.instruction)")
       fieldset
-        textarea(
+        textarea.solution-edit(
           :placeholder="st.tr['Solution']"
+          @input="adjustHeight($event)"
           v-model="curproblem.solution"
         )
         p(v-html="parseHtml(curproblem.solution)")
@@ -210,6 +212,12 @@ export default {
         document.getElementById("inputFen").focus();
       }
     },
+    adjustHeight: function(e) {
+      // https://stackoverflow.com/a/48460773
+      let t = e.target;
+      t.style.height = "";
+      t.style.height = t.scrollHeight + "px";
+    },
     setVname: function(prob) {
       prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
     },
@@ -479,7 +487,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
@@ -505,11 +513,26 @@ export default {
   max-width: 767px
   max-height: 100%
 
+#rulesDiv > .card
+  padding: 5px 0
+  max-width: 50%
+  max-height: 100%
+  @media screen and (max-width: 1500px)
+    max-width: 67%
+  @media screen and (max-width: 1024px)
+    max-width: 85%
+  @media screen and (max-width: 767px)
+    max-width: 100%
+
 #inputFen
   width: 100%
 
 textarea
   width: 100%
+  &.instructions-edit
+    min-height: 70px
+  &.solution-edit
+    min-height: 100px
 
 #diagram
   margin: 0 auto