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| %>
- <%= f.text_area :message, autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %> + <%= f.text_area :message, class: 'textarea-sm', autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %> diff --git a/app/views/my_module_comments/_index.html.erb b/app/views/my_module_comments/_index.html.erb index f627b474b..653f3fbd9 100644 --- a/app/views/my_module_comments/_index.html.erb +++ b/app/views/my_module_comments/_index.html.erb @@ -19,7 +19,7 @@

  • <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %> <% end %>
  • diff --git a/app/views/project_comments/_index.html.erb b/app/views/project_comments/_index.html.erb index 7c822c1eb..68bb12cd4 100644 --- a/app/views/project_comments/_index.html.erb +++ b/app/views/project_comments/_index.html.erb @@ -18,7 +18,7 @@

  • <%= bootstrap_form_for :comment, url: {format: :json}, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %> <% end %>
  • diff --git a/app/views/result_comments/_index.html.erb b/app/views/result_comments/_index.html.erb index e5b85e20a..023879156 100644 --- a/app/views/result_comments/_index.html.erb +++ b/app/views/result_comments/_index.html.erb @@ -22,7 +22,7 @@

  • <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %> <% end %>
  • diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb index f4546e78e..89ee41c76 100644 --- a/app/views/step_comments/_index.html.erb +++ b/app/views/step_comments/_index.html.erb @@ -22,7 +22,7 @@

  • <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form', id: "step-comment-#{@step.id}" }, method: :post, remote: true do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %> <% end %>