diff --git a/Gemfile b/Gemfile index f8bd6e871..9875ed7e8 100644 --- a/Gemfile +++ b/Gemfile @@ -29,6 +29,7 @@ gem 'hammerjs-rails' gem 'introjs-rails' # Create quick tutorials gem 'js_cookie_rails' # Simple JS API for cookies gem 'spinjs-rails' +gem 'autosize-rails' # jQuery autosize plugin gem 'underscore-rails' gem 'turbolinks' diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 1c333cfa8..18b35c71f 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -6,6 +6,7 @@ //= require jquery.remotipart //= require jquery.mousewheel.min //= require jquery.scrollTo +//= require jquery.autosize //= require jquery-ui/widget //= require jquery-ui/mouse //= require jquery-ui/draggable diff --git a/app/assets/javascripts/sitewide/textarea_autosize.js b/app/assets/javascripts/sitewide/textarea_autosize.js new file mode 100644 index 000000000..7e97d4edf --- /dev/null +++ b/app/assets/javascripts/sitewide/textarea_autosize.js @@ -0,0 +1,30 @@ +$(document).on( + 'focus', + 'textarea.smart-text-area:not([readonly]):not([disabled])', + function() { + var $this = $(this); + var height = $this.css('height'); + + if ($this.hasClass('textarea-sm-present')) { + $this + .removeClass('textarea-sm-present') + .addClass('textarea-sm'); + $this.attr('rows', '1'); + } else if ($this.hasClass('textarea-sm')) { + // Set the nr. of rows to 1 if small textarea + $this.attr('rows', '1'); + } else { + $this.removeAttr('rows'); + } + + // 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 cdd626d29..db08ded2d 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1504,9 +1504,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 { @@ -1518,14 +1519,22 @@ textarea.textarea-sm { } } -.comment-form { +.comment-form .input-group { + height: 100%; + textarea { - height: 34px; - min-height: 34px; + -webkit-margin-before: 1px; + -webkit-margin-after: 1px; } - .btn.btn-default { - height: calc(100% + 14px); - min-height: 34px; + .input-group-btn { + height: 100%; + + .btn.btn-default { + height: 100%; + min-height: 34px; + -webkit-padding-before: 0; + -webkit-padding-after: 0; + } } } diff --git a/app/helpers/bootstrap_form_helper.rb b/app/helpers/bootstrap_form_helper.rb index c6134ddaf..f707c4740 100644 --- a/app/helpers/bootstrap_form_helper.rb +++ b/app/helpers/bootstrap_form_helper.rb @@ -237,5 +237,28 @@ module BootstrapFormHelper res << "" res.html_safe end + + # Returns smart