ui design update

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -263,12 +263,17 @@ tr.unavailable {
 }
 
 // show package icon after amount of package numbers
-.package {
+input.package {
   background: url(package-bg.png) no-repeat right center;
 }
 i.package {
-  width: 18px;
+  background: url(package-bg.png) no-repeat left center;
-  color: transparent; // hide text inside
+  min-width: 18px;
+  padding-left: 20px;
+  font-style: normal;
+}
+.package {
+  color: #999;
 }
 .input-nano {
   width: 30px;

app/helpers/orders_helper.rb

@@ -25,4 +25,13 @@ module OrdersHelper
       units_info += ", #{order_article.units_received} received" unless order_article.units_received.nil?
     end
   end
+
+  # can be article or article_price
+  def pkg_helper(article, icon=true)
+    if icon
+      "<i class='package'> &times; #{article.unit_quantity}</i>".html_safe
+    else
+      "<span class='package'> &times; #{article.unit_quantity}</span>".html_safe
+    end
+  end
 end

app/views/orders/_edit_amount.html.haml

@@ -8,21 +8,19 @@
     %td= order_article.article.order_number
     %td.name{title: order_title.join("\n")}= order_article.article.name
     %td.unit= order_article.article.unit
+    %td.article_price= number_to_currency order_article.article.price
     %td #{order_article.quantity} + #{order_article.tolerance}
     %td
       = order_article.units_to_order
-      %i.package pkg
+      = pkg_helper order_article.article
-      %span.article_unit_quantity (× #{order_article.article.unit_quantity})
-    %td.article_price= number_to_currency order_article.article.price
     -#%td # TODO implement invoice screen
       - unless order_article.units_billed.nil?
         = order_article.units_billed
-        %i.package pkg
+        = pkg_helper order_article.article
     %td
       = form.text_field :units_received, class: 'input-nano package', data: {'units-expected' => units_expected}
-      %span.article_price_unit_quantity (× #{order_article.article_price.unit_quantity})
+      = pkg_helper order_article.article_price, false
       / TODO add almost invisible text_field for entering single units
-    %td.article_price_price= number_to_currency order_article.article_price.price
     %td.units_delta
     %td
       = link_to t('ui.edit'), edit_order_order_article_path(order_article.order, order_article), remote: true, class: 'btn btn-mini'

app/views/orders/_edit_amounts.html.haml

@@ -65,12 +65,11 @@
       %th.sort{:data => {:sort => 'string'}}= heading_helper Article, :order_number, short: true
       %th.default-sort.sort{:data => {:sort => 'string'}}= heading_helper Article, :name
       %th= heading_helper Article, :unit
+      %th= heading_helper Article, :price
       %th Members
       %th Ordered
-      %th= heading_helper Article, :price
       -#%th Invoice # TODO implement invoice screen
       %th Received
-      %th= heading_helper ArticlePrice, :price
       %th
       %th= t 'ui.actions'
   %tfoot