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

diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue
index c954f3d8..eed423a6 100644
--- a/client/src/components/UserBio.vue
+++ b/client/src/components/UserBio.vue
@@ -1,26 +1,40 @@
 <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 == id")
-        h3.section(@click="modeEdit = !modeEdit") Click to edit
-        textarea(
-          v-if="userBio !== undefined"
-          v-show="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] }}
-  span.clickable(@click="showBio()") {{ name }}
+      .dialog.text-center {{ st.tr[infoMsg] }}
+  span(
+    :class="{ clickable: !!uname }"
+    @click="showBio()"
+  )
+    | {{ uname || "@nonymous" }}
 </template>
 
 <script>
@@ -29,7 +43,7 @@ import { ajax } from "@/utils/ajax";
 import { processModalClick } from "@/utils/modalClick.js";
 export default {
   name: "my-user-bio",
-  props: ["id", "name"],
+  props: ["uid", "uname"],
   data: function() {
     return {
       st: store.state,
@@ -38,26 +52,46 @@ 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",
           "GET",
           {
-            data: { id: this.id },
+            data: { id: this.uid },
             success: (res) => {
               this.userBio = res.bio;
             }
           }
         );
+        document.querySelector("#player_" + this.uid + " > .bio-div")
+          .addEventListener("click", processModalClick);
       }
+      else if (this.modeEdit) this.adjustHeight();
     },
     sendBio: function() {
       ajax(
@@ -75,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: 768px
+  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>