From 85b6ff908b7e8ad9288731b47a9a31792b40525b Mon Sep 17 00:00:00 2001
From: wvengen <dev-voko@willem.engen.nl>
Date: Tue, 10 Dec 2013 16:41:26 +0100
Subject: [PATCH] make new article dialog more responsive

---
 .../bootstrap_and_overrides.css.less          | 29 +++++++++++----
 app/views/articles/_form.html.haml            | 35 +++++++++----------
 config/locales/en.yml                         |  2 +-
 3 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.less b/app/assets/stylesheets/bootstrap_and_overrides.css.less
index c3e0a875..130ef9da 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.css.less
+++ b/app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -248,11 +248,28 @@ tr.unavailable {
   margin: 0;
 }
 
-.inline-inputs {
-  .control-label {
-    float: none;
-    display: inline;
-    vertical-align: middle;
-    margin: 0 10px;
+// two-column layout in forms (landscape tablet and wider only)
+@media (min-width: 768px) {
+  .form-horizontal .twocol {
+    .control-group:nth-child(odd) {
+      float: left;
+    }
+    .control-group:nth-child(even) {
+      .control-label {
+        width: auto;
+        margin: 0 10px;
+      }
+      // fix margin somehow off
+      // XXX there must be a better way
+      margin-bottom: 0;
+      .controls p {
+        margin-bottom: 20px;
+      }
+    }
   }
 }
+// allow to have indicator text instead of input with same markup
+.control-text {
+  margin-top: 5px;
+}
+ 
diff --git a/app/views/articles/_form.html.haml b/app/views/articles/_form.html.haml
index a5c04bc8..3fcb4e9b 100644
--- a/app/views/articles/_form.html.haml
+++ b/app/views/articles/_form.html.haml
@@ -7,35 +7,34 @@
   .modal-body
     = 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)
-        &times;
-        = f.input_field :unit, class: 'input-mini', title: Article.human_attribute_name(:unit)
+    .twocol
+      = f.input :unit_quantity, label: Article.human_attribute_name(:unit),
+          input_html: {class: 'input-mini', title: Article.human_attribute_name(:unit_quantity)}
+      = f.input :unit, label: '&times;'.html_safe,
+           input_html: {class: 'input-mini', title: Article.human_attribute_name(:unit)}
 
     = f.input :note
     = f.association :article_category
     / TODO labels
 
-    = f.input :price do
-      .inline-inputs
+    .twocol
+      = f.input :price do
         .input-prepend
           %span.add-on= t 'number.currency.format.unit'
           = f.input_field :price, class: 'input-mini'
-        .input-prepend
-          = f.label :tax
-          .input-append
-            = f.input_field :tax, class: 'input-mini'
-            %span.add-on %
-
-    = f.input :deposit do
-      .inline-inputs
+      = f.input :tax do
+        .input-append
+          = f.input_field :tax, class: 'input-mini'
+          %span.add-on %
+      = f.input :deposit do
         .input-prepend
           %span.add-on= t 'number.currency.format.unit'
           = f.input_field :deposit, class: 'input-mini'
-        %span#gross_price{style: 'margin-left: 10px'}
+      .control-group
+        %label.control-label{for: 'article_fc_price'}
           = Article.human_attribute_name(:fc_price)
-          %span#fc_price= number_to_currency(@article.fc_price) rescue nil
+        .controls.control-text#article_fc_price
+          = number_to_currency(@article.fc_price) rescue nil
 
     = f.input :origin
     = f.input :manufacturer
@@ -53,5 +52,5 @@
     // Article#gross_price and Article#fc_price
     var gross_price = (price + deposit) * (tax / 100 + 1);
     var fc_price = gross_price  * (#{FoodsoftConfig[:price_markup].to_f} / 100 + 1);
-    $('#fc_price').html($.isNumeric(fc_price) ? I18n.l("currency", fc_price) : '&#133;');
+    $('#article_fc_price').html($.isNumeric(fc_price) ? I18n.l("currency", fc_price) : '&#133;');
   });
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a48acd92..c53539bb 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1341,7 +1341,7 @@ en:
       default_message: Errors were found. Please check the form.
     hints:
       article:
-        unit: ! 'For example: KG or 1L or 500g'
+        unit: e.g. KG or 1L or 500g
       message:
         private: Message doesn’t show in Foodsoft mail inbox
       order_article: