commit: 934bbd16f196d362ac127f7a44059f9d9a0c1a0b
parent: 9723d7285df1ef74f572c07016b11dd1c692ad33
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Thu, 1 Jun 2017 11:25:12 -0400
Merge branch 'feature/autoresize-post-status-form' into 'develop'
Make text input grow to a minimum height of 3 lines on focus
See merge request !82
Diffstat:
2 files changed, 10 insertions(+), 1 deletion(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -63,6 +63,8 @@ const PostStatusForm = {
files: []
}
this.$emit('posted')
+ let el = this.$el.querySelector('textarea')
+ el.style.height = '16px'
},
addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo)
@@ -93,6 +95,9 @@ const PostStatusForm = {
resize (e) {
e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight - 10}px`
+ if (e.target.value === '') {
+ e.target.style.height = '16px'
+ }
}
}
}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
<div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)">
<div class="form-group base03-border" >
- <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
+ <textarea id="benis" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@@ -93,6 +93,10 @@
overflow: hidden;
}
+ form textarea:focus {
+ min-height: 48px;
+ }
+
.btn {
cursor: pointer;
}