projects
/
vchess.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
A bit more flexibility in boards drawing
[vchess.git]
/
client
/
src
/
components
/
UserBio.vue
diff --git
a/client/src/components/UserBio.vue
b/client/src/components/UserBio.vue
index
7d19a18
..
89c146a
100644
(file)
--- 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"
)
:id="'modalBio_' + uid"
type="checkbox"
)
-
div
.bio-div(
+ .bio-div(
role="dialog"
:data-checkbox="'modalBio_' + uid"
)
.card
div(v-if="st.user.id == uid")
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"
| {{ 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(
| {{ st.tr["Send"] }}
fieldset(v-if="userBio !== undefined && modeEdit")
textarea(
- @input="adjustHeight(
$event
)"
+ @input="adjustHeight()"
v-model="userBio"
)
h3 {{ uname }}
v-model="userBio"
)
h3 {{ uname }}
@@
-55,14
+55,21
@@
export default {
methods: {
parseHtml: function(txt) {
return !txt.match(/<[/a-zA-Z]+>/)
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;
},
: txt;
},
- adjustHeight: function(
e
) {
+ adjustHeight: function() {
// https://stackoverflow.com/a/48460773
// https://stackoverflow.com/a/48460773
- let t =
e.target
;
+ let t =
document.querySelector("#player_" + this.uid + " textarea")
;
t.style.height = "";
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)
},
showBio: function() {
if (!this.uname)
@@
-84,15
+91,17
@@
export default {
document.querySelector("#player_" + this.uid + " > .bio-div")
.addEventListener("click", processModalClick);
}
document.querySelector("#player_" + this.uid + " > .bio-div")
.addEventListener("click", processModalClick);
}
+ else if (this.modeEdit) this.adjustHeight();
},
sendBio: function() {
},
sendBio: function() {
+ this.modeEdit = false;
ajax(
"/userbio",
"PUT",
{
data: { bio: this.userBio },
success: () => {
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)
.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
margin: var(--universal-margin) 0
+ .br
+ display: block
+ margin: 10px 0
</style>
<style lang="sass" scoped>
</style>
<style lang="sass" scoped>
@@
-115,6
+127,15
@@
export default {
max-width: 500px
max-height: 100%
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)
textarea
display: block
margin: 0 var(--universal-margin)