X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FUserBio.vue;h=eed423a6122ae1993a98cdb48ce2f49c87a1dd7f;hb=ad16f8397b0d8a22897537e2f76b4388182a84af;hp=181c7dfe0a61e92806c63a1e2a5033f8e76f3728;hpb=80b38d463c0d5dacac93bc2aeb666bbb19781e1e;p=vchess.git

diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue
index 181c7dfe..eed423a6 100644
--- 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.buttons
+          button(@click="toggleEdit()")
+            | {{ st.tr[modeEdit ? "Cancel" : "Edit"] }}
+          button(
+            v-show="modeEdit"
+            @click="sendBio()"
+          )
+            | {{ st.tr["Send"] }}
+        fieldset(v-if="userBio !== undefined && modeEdit")
+          textarea(
+            @input="adjustHeight()"
+            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,31 @@ export default {
       modeEdit: false
     };
   },
-  mounted: function() {
-    document.getElementById("bioDiv")
-      .addEventListener("click", processModalClick);
-  },
   methods: {
+    parseHtml: function(txt) {
+      return !txt.match(/<[/a-zA-Z]+>/)
+        ?
+          // No HTML tag
+          txt.replace(/\n\n/g, "<br/><div class='br'></div>")
+             .replace(/\n/g, "<br/>")
+        : txt;
+    },
+    adjustHeight: function() {
+      // https://stackoverflow.com/a/48460773
+      let t = document.querySelector("#player_" + this.uid + " textarea");
+      t.style.height = "";
+      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)
         // 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,7 +88,10 @@ export default {
             }
           }
         );
+        document.querySelector("#player_" + this.uid + " > .bio-div")
+          .addEventListener("click", processModalClick);
       }
+      else if (this.modeEdit) this.adjustHeight();
     },
     sendBio: function() {
       ajax(
@@ -81,16 +109,36 @@ 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
+  .br
+    display: block
+    margin: 10px 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
+.buttons > button
+  margin-bottom: 0
+
+h3
+  margin-bottom: 5px
+
+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>