forked from AkkomaGang/akkoma-fe
Merge branch 'feature/autoresize-post-status-form' into 'develop'
Make post-status-form textarea automatically resize to fit the input. See merge request !81
This commit is contained in:
commit
d44d88da1c
2 changed files with 9 additions and 4 deletions
src/components/post_status_form
|
@ -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`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue