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

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

See merge request !81

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
index 5dd14df5..86792ce1 100644
--- 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
index c3f1b1f0..2a25f73b 100644
--- 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 {