about summary refs log tree commit diff
path: root/app/assets
diff options
context:
space:
mode:
authorgeta6 <getakura@gmail.com>2017-04-19 22:39:46 +0900
committerEugen <eugen@zeonfederated.com>2017-04-19 15:39:46 +0200
commit15a4fc5dcc8e7a6b51ba5c33e921f0e9b70a0c6e (patch)
tree17ac0d650edd88b1513835fd6357a028a49eb153 /app/assets
parenta8e1afc30a1f843943bb29e7385b8611ea3c29f4 (diff)
Automatically change the size of textarea (#2128)
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/components/components/autosuggest_textarea.jsx4
-rw-r--r--app/assets/stylesheets/components.scss9
2 files changed, 11 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
index 04328aae8..7c068955a 100644
--- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx
+++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
@@ -63,6 +63,10 @@ const AutosuggestTextarea = React.createClass({
       this.props.onSuggestionsClearRequested();
     }
 
+    // auto-resize textarea
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+
     this.props.onChange(e);
   },
 
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 76a67d8e7..765b43f93 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1196,7 +1196,6 @@ a.status__content__spoiler-link {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  resize: none;
   margin: 0;
   color: $color1;
   padding: 10px;
@@ -1220,11 +1219,17 @@ a.status__content__spoiler-link {
 }
 
 .autosuggest-textarea__textarea {
-  height: 100px;
+  min-height: 100px;
   background: $color5;
   border-radius: 4px 4px 0 0;
   padding-bottom: 0;
   padding-right: 10px + 22px;
+  resize: none;
+
+  @media screen and (max-width: 600px) {
+    height: 100px !important; // prevent auto-resize textarea
+    resize: vertical;
+  }
 }
 
 .autosuggest-textarea__suggestions {