Add autosize functionality to all textareas

Closes SCI-637
This commit is contained in:
Luka Murn 2016-11-08 15:48:30 +01:00
parent 55f9633d1d
commit b42922d32c
7 changed files with 30 additions and 17 deletions

View file

@ -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');
});

View file

@ -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 {
.comment-form .btn.btn-default {
height: calc(100% + 14px);
min-height: 34px;
}
}

View file

@ -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| %>
<div class="form-group">
<div class="input-group">
<%= 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 %>
<span class="input-group-btn">
<a class="btn btn-default" data-action="save">
<span class="glyphicon glyphicon-ok"></span>

View file

@ -19,7 +19,7 @@
<li>
<hr>
<%= 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 %>
</li>
</ul>

View file

@ -18,7 +18,7 @@
<li>
<hr>
<%= 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 %>
</li>
</ul>

View file

@ -22,7 +22,7 @@
<li>
<hr>
<%= 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 %>
</li>
</ul>

View file

@ -22,7 +22,7 @@
<li>
<hr>
<%= 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 %>
</li>
</ul>