lamp/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Merge branch 'feature/autoresize-post-status-form' into 'develop'

Browse source 
Make post-status-form textarea automatically resize to fit the input.

See merge request !81
This commit is contained in:
lambadalambda 2017-05-31 08:02:31 -04:00
commit d44d88da1c
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/post_status_form/post_status_form.js
View file

@ -89,6 +89,10 @@ const PostStatusForm = {
}, },
fileDrag (e) { fileDrag (e) {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
},
resize (e) {
e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight - 10}px`
} }
} }
} }

9
src/components/post_status_form/post_status_form.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group" > <div class="form-group base03-border" >
<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> <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>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@ -85,11 +85,12 @@
form textarea { form textarea {
border: solid; border: solid;
border-width: 1px; border-width: 1px;
border-color: silver; border-color: inherit;
border-radius: 5px; border-radius: 5px;
line-height:16px; line-height:16px;
padding: 5px; padding: 5px;
resize: vertical; resize: none;
overflow: hidden;
} }
.btn { .btn {