diff --git a/app/assets/javascripts/sitewide/textarea_autosize.js b/app/assets/javascripts/sitewide/textarea_autosize.js new file mode 100644 index 000000000..ce71c31f6 --- /dev/null +++ b/app/assets/javascripts/sitewide/textarea_autosize.js @@ -0,0 +1,19 @@ +$(document).on('focus', 'textarea', function() { + var $this = $(this); + var height = $this.css('height'); + + // Set the nr. of rows to 1 if small textarea + if ($this.hasClass('textarea-sm')) { + $this.attr('rows', '1'); + } + + // Initialize autosize plugin if it's not initialized yet + if (_.isUndefined($this.data('autosize'))) { + $this.autosize({append: ''}); + + // Restore previous height! + $this.css('height', height); + } + + $this.trigger('autosize.resize'); +}); diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 3f3208551..dfd487492 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1497,9 +1497,10 @@ html.turbolinks-progress-bar::before { } } -// Only allow vertical resizing of all text areas +// Disable textarea resizing throughout application +// (will be done via autosize JS plugin) textarea { - resize: vertical; + resize: none; } textarea.textarea-sm { @@ -1511,14 +1512,7 @@ textarea.textarea-sm { } } -.comment-form { - textarea { - height: 34px; - min-height: 34px; - } - - .btn.btn-default { - height: calc(100% + 14px); - min-height: 34px; - } +.comment-form .btn.btn-default { + height: calc(100% + 14px); + min-height: 34px; } diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb index d77b1e5fe..d18b68ae4 100644 --- a/app/views/comments/_edit.html.erb +++ b/app/views/comments/_edit.html.erb @@ -1,7 +1,7 @@ <%= bootstrap_form_for(@comment, url: @update_url, remote: true, html: { method: :put, class: 'comment-form edit-comment-form' }, data: { role: 'edit-comment-message-form' }) do |f| %>