Add supplier info popup

app/assets/javascripts/shared-ember-helpers/translation.js.coffee

@@ -1,4 +1,4 @@
 Ember.Handlebars.helper 't', (path, params..., options)->
-  text = t(path)
-  tag = if options.hash.bare then text else "<span data-t='#{path}' data-t-attributes='{}'>#{text}</span>"
+  text = t(path, options.hash)
+  tag = if options.hash.bare then text else "<span data-t='#{path}' data-t-attributes='#{JSON.stringify(options.hash)}'>#{text}</span>"
   tag.htmlSafe()

app/assets/javascripts/user/app/controllers/application_controller.js.coffee

@@ -12,6 +12,7 @@ App.ApplicationController = Ember.Controller.extend
     showSupplierStatusInfo: ->
       @modal 'supplier_status_info',
         model: @get('list.supplier')
+        title_path: 'supplier_status_info.title'
 
     openDebugger: ->
       debugger

app/assets/javascripts/user/app/templates/modals/layout.emblem

@@ -3,6 +3,6 @@
     .modal-header
       h3.flush--top= title
       hr
-    .modal-body
+    .modal-body.clearfix
       .modal-alert== alert_message
       = yield

app/assets/javascripts/user/app/templates/modals/supplier_status_info.emblem

@@ -0,0 +1,13 @@
+p== t 'supplier_status_info.header'
+.row: .small-12.columns
+  .counter.supplier-orders-placed-count
+    = model.orders_placed_count
+    span.orders-placed-count-icon
+  = t 'supplier_status_info.orders_placed_count_explanation' count=model.orders_placed_count
+.row: .small-12.columns
+  .counter.supplier-orders-in-process-count
+    = model.orders_in_process_count
+    span.orders-in-process-count-icon
+  = t 'supplier_status_info.orders_in_process_count_explanation' count=model.orders_in_process_count
+hr
+button.modal-confirm.right{action "close"}= t 'supplier_status_info.close'

app/assets/javascripts/user/flat/application.js.coffee.erb

@@ -6,6 +6,7 @@
 #= require_self
 
 @Qstorage = localStorage
+
 $.extend($translations.en, <%= I18n.t('user', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('user', locale: :nl).to_json %>);
 

app/assets/stylesheets/user/foundation/components/_menu_main.css.sass

@@ -55,11 +55,6 @@
       //text-transform: lowercase
     .supplier-name
       display: inline-block
-    .supplier-orders-placed-count
-      display: inline-block
-      // margin-right: 15px
-    .supplier-orders-in-process-count
-      display: inline-block
   .menu-list-item
     margin-left: 20px
     cursor: pointer
@@ -80,11 +75,17 @@
       margin-left: 8px
     @media #{$small-only}
       margin-left: 5px
+.supplier-orders-placed-count
+  display: inline-block
+  // margin-right: 15px
 .orders-placed-count-icon
   @extend .fa
   @extend .fa-clock-o
   @extend .fa-lg
   margin-left: 3px
+
+.supplier-orders-in-process-count
+  display: inline-block
 .orders-in-process-count-icon
   @extend .fa
   @extend .fa-check