Fix user bio modal. Should work now

diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue
index 181c7df..7d19a18 100644 (file)
--- a/client/src/components/UserBio.vue
+++ b/client/src/components/UserBio.vue
@@ -1,24 +1,35 @@
 <template lang="pug">
-div
-  input#modalBio.modal(type="checkbox")
-  div#bioDiv(
+div(:id="'player_' + uid")
+  input.modal(
+    :id="'modalBio_' + uid"
+    type="checkbox"
+  )
+  div.bio-div(
     role="dialog"
-    data-checkbox="modalBio"
+    :data-checkbox="'modalBio_' + uid"
   )
     .card
-      div(v-if="st.user.id > 0 && st.user.id == uid")
-        h3.section(@click="modeEdit = !modeEdit") Click to edit
-        textarea(
-          v-if="userBio !== undefined && modeEdit"
-          v-model="userBio"
-        )
-        button#submitBtn(@click="sendBio()") Submit
-      div(
+      div(v-if="st.user.id == uid")
+        div
+          button(@click="modeEdit = !modeEdit")
+            | {{ st.tr[modeEdit ? "Cancel" : "Edit"] }}
+          button(
+            v-show="modeEdit"
+            @click="sendBio()"
+          )
+            | {{ st.tr["Send"] }}
+        fieldset(v-if="userBio !== undefined && modeEdit")
+          textarea(
+            @input="adjustHeight($event)"
+            v-model="userBio"
+          )
+      h3 {{ uname }}
+      .bio-content(
         v-if="userBio !== undefined"
-        v-html="userBio"
+        v-html="parseHtml(userBio)"
         @click="modeEdit = !modeEdit"
       )
-      #dialog.text-center {{ st.tr[infoMsg] }}
+      .dialog.text-center {{ st.tr[infoMsg] }}
   span(
     :class="{ clickable: !!uname }"
     @click="showBio()"
@@ -41,17 +52,24 @@ export default {
       modeEdit: false
     };
   },
-  mounted: function() {
-    document.getElementById("bioDiv")
-      .addEventListener("click", processModalClick);
-  },
   methods: {
+    parseHtml: function(txt) {
+      return !txt.match(/<[/a-zA-Z]+>/)
+        ? txt.replace(/\n/g, "<br/>") //no HTML tag
+        : txt;
+    },
+    adjustHeight: function(e) {
+      // https://stackoverflow.com/a/48460773
+      let t = e.target;
+      t.style.height = "";
+      t.style.height = t.scrollHeight + "px";
+    },
     showBio: function() {
       if (!this.uname)
         // Anonymous users have no bio:
         return;
       this.infoMsg = "";
-      document.getElementById("modalBio").checked = true;
+      document.querySelector("#modalBio_" + this.uid).checked = true;
       if (this.userBio === undefined) {
         ajax(
           "/userbio",
@@ -63,6 +81,8 @@ export default {
             }
           }
         );
+        document.querySelector("#player_" + this.uid + " > .bio-div")
+          .addEventListener("click", processModalClick);
       }
     },
     sendBio: function() {
@@ -81,16 +101,27 @@ export default {
 };
 </script>
 
+<style lang="sass">
+// bio-content HTML elements are added after initial rendering
+.bio-content
+  text-align: left
+  margin: 0 var(--universal-margin)
+  p, ul, ol
+    margin: var(--universal-margin) 0
+</style>
+
 <style lang="sass" scoped>
 [type="checkbox"].modal+div .card
-  max-width: 570px
+  max-width: 500px
   max-height: 100%
 
-#submitBtn
-  width: 50%
-  margin: 0 auto
+textarea
+  display: block
+  margin: 0 var(--universal-margin)
+  width: calc(100% - 2 * var(--universal-margin))
+  min-height: 100px
 
-#dialog
+.dialog
   padding: 5px
   color: blue
 </style>

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 7f8632d..57473bc 100644 (file)
--- 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
@@ -521,6 +529,10 @@ export default {
 
 textarea
   width: 100%
+  &.instructions-edit
+    min-height: 70px
+  &.solution-edit
+    min-height: 100px
 
 #diagram
   margin: 0 auto