update receive delta column + responsive css

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -233,9 +233,9 @@ tr.unavailable {
   margin-bottom: 0;
 }
 
-// entering units
+// allow content to appear without sudden table change (receive)
 .units_delta {
-  width: 2em;
+  min-width: 3.5em;
 }
 
 // ********* Tweaks & fixes
@@ -297,9 +297,16 @@ input.package {
 i.package {
   .package-image(left);
   min-width: 18px;
+  min-height: 18px;
+  vertical-align: baseline;
   font-style: normal;
   padding-left: 20px;
-  @media (max-width: 768px) { padding-left: 0; }
+  @media (max-width: 979px) { padding-left: 0; }
+}
+i.package.icon-only {
+  padding-left: 6px;
+  background-position: right;
+  display: inline-block;
 }
 .package              { color: tint(@textColor, @nonessentialDim); }
 .used        .package { color: tint(@articleUsedColor, @nonessentialDim); }

app/helpers/orders_helper.rb

@@ -27,14 +27,27 @@ module OrdersHelper
   end
 
   # can be article or article_price
-  def pkg_helper(article, icon=true)
+  #   icon: `false` to not show the icon
+  #   soft_uq: `true` to hide unit quantity specifier on small screens
+  #            sensible in tables with multiple columns calling `pkg_helper`
+  def pkg_helper(article, options={})
     return nil if article.unit_quantity == 1
-    if icon
+    uq_text = "× #{article.unit_quantity}"
-      "<i class='package'> &times; #{article.unit_quantity}</i>".html_safe
+    uq_text = "<span class='hidden-phone'>#{uq_text}</span>" if options[:soft_uq]
+    if options[:icon].nil? or options[:icon]
+      pkg_helper_icon(uq_text).html_safe
     else
-      "<span class='package'> &times; #{article.unit_quantity}</span>".html_safe
+      pkg_helper_icon(uq_text, tag: 'span').html_safe
     end
   end
+  def pkg_helper_icon(c=nil, options={})
+    options = {tag: 'i', class: ''}.merge(options)
+    if c.nil?
+      c = "&nbsp;"
+      options[:class] += " icon-only"
+    end
+    "<#{options[:tag]} class='package #{options[:class]}'>#{c}</#{options[:tag]}>"
+  end
   
   def article_price_change_hint(order_article, gross=false)
     return nil if order_article.article.price == order_article.price.price

app/views/orders/_edit_amount.html.haml

@@ -17,10 +17,10 @@
     -#%td # TODO implement invoice screen
       - unless order_article.units_billed.nil?
         = order_article.units_billed
-        = pkg_helper order_article.article
+        = pkg_helper order_article.article, soft_uq: true
     %td.units_received_cell
       = receive_input_field(form)
-      = pkg_helper order_article.article_price, false
+      = pkg_helper order_article.article_price, icon: false, soft_uq: true
       / TODO add almost invisible text_field for entering single units
     %td.units_delta
     %td

app/views/orders/_edit_amounts.html.haml

@@ -16,10 +16,13 @@
       } else if (units == expected) {
         // equal value
         html = '<i class="icon-ok" style="color: green"></i>';
-      } else if (units < expected) {
+      } else {
-        html = '<span style="color: red">- '+(expected-units)+'</span>';
+        if (units < expected) {
-      } else /*if (units> expected)*/ {
+          html = '<span style="color: red">- '+(expected-units)+'</span>';
-        html = '<span style="color: green">+ '+(units-expected)+'</span>';
+        } else /*if (units> expected)*/ {
+          html = '<span style="color: green">+ '+(units-expected)+'</span>';
+        }
+        html += '#{j pkg_helper_icon}';
       }
 
       $(input).closest('tr').find('.units_delta').html(html);