AkkomaGang
/
akkoma-fe
4
13
Fork 56
Code Issues 73 Pull Requests 18 Projects Releases 1 Wiki Activity

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

This commit is contained in:
Shpuld Shpuldson 2017-05-31 14:02:54 +03:00
parent d389d3a763
commit e704e1daaf
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) {
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>
<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 {