first shot on improving edit article form

(see also foodcoops#209)

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -242,3 +242,23 @@ tr.unavailable {
 .input-append button.add-on {
  height: inherit;
 }
+
+// inputs that are "in the background" - less visible
+.less-visible {
+ color: #ddd;
+ input {
+ color: #ddd;
+ border-color: #eee;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: rgba(0, 0, 0, 0.05);
+ box-shadow: rgba(0, 0, 0, 0.05);
+ }
+}
+.less-visible:hover {
+ color: @textColor;
+ input {
+ color: @textColor;
+ border-color: @inputBorder;
+ }
+}
+

app/views/articles/_form.html.haml

@@ -5,21 +5,43 @@
  = link_to t('ui.marks.close').html_safe, '#', class: 'close', data: {dismiss: 'modal'}
  %h3= t '.title'
  .modal-body
- = f.input :availability
+ /= f.input :availability
  = f.input :name
+ = f.input :unit do
+ .inline-inputs
+ = f.input_field :unit_quantity, class: 'input-mini', title: Article.human_attribute_name(:unit_quantity)
+ ×
+ = f.input_field :unit, class: 'input-mini', title: Article.human_attribute_name(:unit)
+ %span#unit_divide_container.less-visible
+  per 
+ = f.input_field :unit, class: 'input-mini', id: 'article_unit_divide'
+
  = f.input :origin
  = f.input :manufacturer
- = f.input :unit
  = f.input :note
  = f.association :article_category
+ / TODO labels
+
+ = f.input :price do
+ .inline-inputs
+ .input-prepend
+ %span.add-on= t 'number.currency.format.unit'
+ = f.input_field :price, class: 'input-mini'
+ .input-prepend
+ = f.label :tax, style: 'width: auto; margin-right: 10px; margin-left: 10px;'
+ .input-append
+ = f.input_field :tax, class: 'input-mini'
+ %span.add-on %
+
+ = f.input :deposit do
+ .inline-inputs
+ .input-prepend
+ %span.add-on= t 'number.currency.format.unit'
+ = f.input_field :deposit, class: 'input-mini'
+ %span#gross_price{style: 'margin-left: 10px'}
+ = Article.human_attribute_name(:gross_price) + ' ' + number_to_currency(@article.gross_price) rescue nil
 
- = f.input :price
- = f.input :unit_quantity
  = f.input :order_number
- = f.input :tax, :wrapper => :append do
- = f.input_field :tax
- %span.add-on %
- = f.input :deposit
  .modal-footer
  = link_to t('ui.close'), '#', class: 'btn', data: {dismiss: 'modal'}
  = f.submit class: 'btn btn-primary'