X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FUserBio.vue;h=89c146abe00574c270f41f678a14ff99feae8f43;hb=d639b82a84af667908ccdda522cb1f94fddf55e5;hp=7d19a18250c5ce34ebc4eacefc6941d5160fe962;hpb=3c24a27df9d973bdbfd8d863a2209bad5da03572;p=vchess.git

diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue
index 7d19a182..89c146ab 100644
--- a/client/src/components/UserBio.vue
+++ b/client/src/components/UserBio.vue
@@ -4,14 +4,14 @@ div(:id="'player_' + uid")
     :id="'modalBio_' + uid"
     type="checkbox"
   )
-  div.bio-div(
+  .bio-div(
     role="dialog"
     :data-checkbox="'modalBio_' + uid"
   )
     .card
       div(v-if="st.user.id == uid")
-        div
-          button(@click="modeEdit = !modeEdit")
+        .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,15 +91,17 @@ export default {
         document.querySelector("#player_" + this.uid + " > .bio-div")
           .addEventListener("click", processModalClick);
       }
+      else if (this.modeEdit) this.adjustHeight();
     },
     sendBio: function() {
+      this.modeEdit = false;
       ajax(
         "/userbio",
         "PUT",
         {
           data: { bio: this.userBio },
           success: () => {
-            this.infoMsg = this.st.tr["Modifications applied!"];
+            this.infoMsg = "Modifications applied!";
           }
         }
       );
@@ -106,8 +115,11 @@ export default {
 .bio-content
   text-align: left
   margin: 0 var(--universal-margin)
-  p, ul, ol
+  p, ul, ol, pre, table, h3, h4, h5, h6, blockquote
     margin: var(--universal-margin) 0
+  .br
+    display: block
+    margin: 10px 0
 </style>
 
 <style lang="sass" scoped>
@@ -115,6 +127,15 @@ export default {
   max-width: 500px
   max-height: 100%
 
+.buttons
+  text-align: center
+  & > button
+    margin-bottom: 0
+
+h3
+  text-align: center
+  margin-bottom: 5px
+
 textarea
   display: block
   margin: 0 var(--universal-margin)