commit: d44d88da1c05a1b13a7a44c6531e03cc697eb2ed
parent: d389d3a7633f88933586b9660b4ad3510b7f98ee
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Wed, 31 May 2017 08:02:31 -0400
Merge branch 'feature/autoresize-post-status-form' into 'develop'
Make post-status-form textarea automatically resize to fit the input.
See merge request !81
Diffstat:
2 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -89,6 +89,10 @@ const PostStatusForm = {
},
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy'
+ },
+ resize (e) {
+ e.target.style.height = 'auto'
+ e.target.style.height = `${e.target.scrollHeight - 10}px`
}
}
}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -1,8 +1,8 @@
<template>
<div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)">
- <div class="form-group" >
- <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
+ <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>
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@@ -85,11 +85,12 @@
form textarea {
border: solid;
border-width: 1px;
- border-color: silver;
+ border-color: inherit;
border-radius: 5px;
line-height:16px;
padding: 5px;
- resize: vertical;
+ resize: none;
+ overflow: hidden;
}
.btn {