responsive fixes for supplier

app/assets/javascripts/supplier/app/controllers/lists_index_controller.js.coffee

@@ -7,14 +7,15 @@ App.ListsIndexController = Ember.Controller.extend
     @store.query 'list', date: date
     .then => @set('loading', false)
   ).observes('date').on('init')
-  lists: Ember.computed 'date', ->
+  lists: Ember.computed -> @store.peekAll('list')
-    return @store.peekAll('list') unless selected_date = @get('date')
+
-    @store.peekAll('list').filter (list)->
+  sorted_lists: Ember.computed 'date', 'lists.[]', ->
+    lists = @get('lists')
+    if selected_date = @get('date')
+      lists = lists.filter (list)->
         return false unless list_creation_date = list.get('created_at')
         list_creation_date = list_creation_date.toISOString().substring(0,10) if typeof(list_creation_date) is 'object'
         selected_date is list_creation_date
-
+    lists.sortBy('created_at').reverseObjects()
-  sorted_lists: Ember.computed 'lists.[]', ->
-    @get('lists').sortBy('created_at').reverseObjects()
   pricesList: Ember.computed.mapBy 'sorted_lists', 'price'
   date_lists_total: Ember.computed.sum 'pricesList'

app/assets/javascripts/supplier/app/helpers/dimensions.js.coffee

@@ -0,0 +1,7 @@
+App.DimensionsHelper = Ember.Helper.helper ([width, height], options)->
+  unit = options.unit || 'm'
+  width ||= 0
+  height ||= 0
+  width = "&nbsp;#{width}" if width < 10
+  height = "&nbsp;#{height}" if height < 10
+  "#{width} x #{height} <span class='dimension'>#{unit}</span>".htmlSafe()

app/assets/javascripts/supplier/app/helpers/table-number.js.coffee

@@ -1,3 +1,4 @@
 App.TableNumberHelper = Ember.Helper.helper (params, options)->
   table_number = params[0]
+  return '' unless table_number
   "# #{table_number}".htmlSafe()

app/assets/javascripts/supplier/app/templates/employees.emblem

@@ -1,7 +1,15 @@
 .row: .small-12.columns
   h2.main-section-header=t 'models.plural.employee'
-  if employees
+if employees
-    table.table
+  each employees as |employee|
+    .row.employee-row class=employee.active:active:inactive
+      .small-12.columns
+        span.colorbox= colorbox employee.color
+        span.employee-is-manager class=employee.manager:is-manager:is-not-manager
+          span.icon
+        a.employee-name{ action 'editEmployee' employee }= employee.name
+        a.employee-email{ action 'editEmployee' employee }= employee.email
+  /table.table
     thead
       tr
         th.name=t 'attributes.employee.name'
@@ -24,6 +32,6 @@
             if (can "manage" "employees")
               a.table-edit{ action 'editEmployee' employee }: span
               a.table-destroy{ action 'destroyEmployee' employee }: span
-  .form-actions
+if (can "manage" "employees")
-    if (can "manage" "employees")
+  .form-row.form-actions: .small-12.columns
       a.form-action-new.new-employee-button{action "newEmployee"}= t 'employee.new_button'

app/assets/javascripts/supplier/app/templates/global/_side_menu.emblem

@@ -13,7 +13,7 @@
       = link-to 'sections'
         span.icon.sections
         = t 'models.plural.section'
-    li
+    /li
       = link-to 'tables'
         span.icon.tables
         = t 'models.plural.table'

app/assets/javascripts/supplier/app/templates/global/_top_menu.emblem

@@ -11,7 +11,7 @@ header.top-menu
       = link-to "sections" class="top-menu-sections"
         span.icon.sections
         = t 'models.plural.section'
-      = link-to "tables" class="top-menu-tables"
+      /= link-to "tables" class="top-menu-tables"
         span.icon.tables
         = t 'models.plural.table'
       = link-to "lists" class="top-menu-lists"

app/assets/javascripts/supplier/app/templates/lists/index.emblem

@@ -1,4 +1,27 @@
-.row.sections-route: .small-12.columns
+.row: .small-12.columns.lists-route
+  h2.main-section-header=t 'models.plural.list'
+  = list-display-date-selector value=date
+if loading
+  .row: .small-12.columns: .panel: span.loading
+else
+  if sorted_lists
+    each sorted_lists as |list|
+      .row.list-row class=list.active:active:inactive
+        .small-12.columns
+          = link-to 'list' list
+            span.boolean.needs-help=boolean list.needs_help
+            span.boolean.needs-payment=boolean list.needs_payment
+            span.timestamp.created_at= time list.created_at
+            span.state= state 'list' list.state
+          span.table-number= table-number list.table.number
+          span.currency= currency list.price
+    .row.list-row-total: .small-12.columns
+      span.total-sentence= t 'lists.index.total_sentence'
+      span.currency= currency date_lists_total
+  else
+    .row: .small-12.columns
+      .panel=t 'list.none_found'
+/.row.sections-route: .small-12.columns
   h2.main-section-header=t 'models.plural.list'
   = list-display-date-selector value=date
   if loading

app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem

@@ -27,3 +27,4 @@ hr
 button.modal-close{action "close"}=t 'employee.modal.close_button'
 button.modal-confirm.right{action "save"} disabled=model.isInvalid
   t 'employee.modal.save_button'
+button.modal-destroy.right{action "destroyRecord"}= t 'general.destroy_button'

app/assets/javascripts/supplier/app/templates/modals/table_edit.emblem

@@ -12,6 +12,7 @@ p=t 'table.modal.body_header'
   .form-label=t 'attributes.table.height'
   .form-field= number-field numericValue=model.height
 hr
-button.modal-close{action "close"}=t 'table.modal.close_button'
+button.modal-close{action "rollback_and_close"}=t 'table.modal.close_button'
 button.modal-confirm.right{action "saveTable"}=t 'table.modal.save_button'
+button.modal-destroy.right{action "destroyRecord"}=t 'table.modal.destroy_button'
 = qr-codes-link table=model

app/assets/javascripts/supplier/app/templates/modals/user_info.emblem

@@ -7,3 +7,5 @@
 .form-row
   .form-label= t 'user.number_of_lists_at_supplier'
   .form-value 1
+hr
+button.modal-close.right{action "close"}=t 'general.close'

app/assets/javascripts/supplier/app/templates/sections/index.emblem

@@ -1,4 +1,17 @@
-.row: .small-12.columns
+.row.sections-route: .small-12.columns
+  h2.main-section-header=t 'models.plural.section'
+if sections
+  each sections as |section|
+    .row.section-row: .small-12.columns
+      a.section-title{ action "goToSection" section}= section.title
+      span.section-dimensions= dimensions section.width section.height
+      span.section-actions
+        a.section-dashboard-orders.go-to-orders-list{action "showDashboardOrders" section}: span.icon
+        = qr-codes-link section=section
+if (can "manage" "sections")
+  .form-row.form-actions: .small-12.columns
+    a.form-action-new{action "addSection"}=t 'helpers.links.new'
+/.row: .small-12.columns
   h2.main-section-header=t 'models.plural.section'
   if sections
     table.table

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -24,6 +24,7 @@ $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
 String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }
 
+
 window.time_zones = <%= ActiveSupport::TimeZone.all.map{|tz| {name: tz.name, formatted: "GMT#{tz.formatted_offset} #{tz.name}"}}.to_json.html_safe %>;
 window.countries = <%= IsoCountryCodes.all.map{|cc| {name: cc.name}}.to_json.html_safe %>;
 

app/assets/javascripts/translations.js.coffee.erb

@@ -18,10 +18,10 @@
   return "" unless minutes
   [("0" + Math.floor(minutes/60)).substr(-2,2), ("0" + Math.floor(minutes%60)).substr(-2,2)].join(":")
 
+
 @ttry = (path, vars={})->
   @t(path, $.extend(vars, emptyWhenNotFound: true))
 
-
 # return translation in the form
 #   <span data-t="models.table">Tafel</span>
 @tspan = (path, vars={}) -> "<span data-t='#{path}' class='translation' data-t-attributes='#{JSON.stringify(vars)}'>#{t(path, vars)}</span>"

app/assets/stylesheets/supplier/foundation1/components/_colorbox.sass

@@ -17,6 +17,7 @@
     span
       width: 32px
       height: 32px
-td .colorbox-container span
+
+td .colorbox-container span, .colorbox .colorbox-container span
   width: 16px
   height: 16px

app/assets/stylesheets/supplier/foundation1/components/_modal.sass

@@ -1,6 +1,6 @@
 .modal
   margin: 10px auto
-  width: 600px
+  width: 800px
   max-width: 100%
   background-color: #fff
   padding: 1em

app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass

@@ -18,30 +18,30 @@ header.top-menu
       line-height: 48px
       &.main-buttons
         float: left
-        @media #{$medium-up}
-          padding-left: 14px
-          a
-            span.icon
-              display: none
-        @media #{$large-up}
-          a
-            span.icon
-              display: inline-block
-              margin-right: 4px
         a
           padding-left: 16px
           &.active
             text-decoration: underline
             font-weight: bold
             color: $current-color
-          @media #{$small-only}
+            span.icon
+              color: $current-color
+          @media (min-width: 972px)
+            span.icon
+              margin-right: 8px
+              display: inline-block
+          @media (max-width: 972px)
+            span
+              display: inline-block
+              &.icon
+                display: none
+          @media (max-width: 836px)
             span
               display: none
               &.icon
                 display: inline-block
-            &.active
+          @media (max-width: 560px)
-              span.icon
+            display: none
-                color: $current-color
         .top-menu-root
           display: inline-block
           line-height: normal

app/assets/stylesheets/supplier/foundation1/components/_tables.sass

@@ -44,7 +44,3 @@ span.qr-icon
   span
     @extend .fa
     @extend .fa-times
-.section-dashboard-orders
-  +button($bg: $secondary-color)
-  +button-icon-only
-  margin-right: 0.7rem

app/assets/stylesheets/supplier/foundation1/resources/_employees.sass

@@ -0,0 +1,33 @@
+.employee-row
+  $row-background-color: white
+  background-color: $row-background-color
+  border-bottom: 1px solid #aaa
+  padding: 8px 0
+  .colorbox
+    display: inline-block
+    margin-right: 8px
+  .employee-is-manager
+    margin-right: 8px
+    .icon
+      @extend .fa
+      @extend .fa-asterisk
+    &.is-not-manager
+      .icon
+        color: $row-background-color !important
+  .employee-name
+    display: inline-block
+    padding-right: 12px
+    min-width: 144px
+
+  &.inactive
+    a
+      color: #999
+    .colorbox
+      .colorbox-container
+        span
+          opacity: 0.2
+    .employee-is-manager
+      .icon
+        opacity: 0.3
+  &:last-of-type
+    margin-bottom: 20px

app/assets/stylesheets/supplier/foundation1/resources/_lists.sass

@@ -0,0 +1,43 @@
+$list-row-background-color: white
+.lists-route
+  .picker__button--clear
+    display: none
+.list-row
+  background-color: $list-row-background-color
+  border-bottom: 1px solid #aaa
+  padding: 8px 0
+  &.active
+    background-color: #ffa
+  &:last-of-type
+    margin-bottom: 20px
+  .boolean
+    display: inline-block
+    min-width: 26px
+  .timestamp
+    display: inline-block
+    min-width: 140px
+  .state
+    display: inline-block
+    min-width: 110px
+  .table-number
+    display: inline-block
+    min-width: 110px
+.list-row-total
+  background-color: $list-row-background-color
+  margin-top: 8px
+  font-weight: bold
+  padding: 8px 0
+  .total-sentence
+    padding-right: 8px
+
+span.boolean
+  .boolean-true
+    @extend .fa, .fa-check
+  &.needs-help
+    .boolean-true
+      @extend .fa
+      @extend .fa-bell
+  &.needs-payment
+    .boolean-true
+      @extend .fa
+      @extend .fa-money

app/assets/stylesheets/supplier/foundation1/resources/_section_tables.sass

@@ -3,9 +3,6 @@
   margin-right: 7px
   span
     @extend .fa-lg
-.section-title
-  font-size: 24px
-  padding: 4px 0px
 .section-manage-tables
   margin: -40px 6px 4px 6px
   min-width: 470px

app/assets/stylesheets/supplier/foundation1/resources/_sections.sass

@@ -1,3 +1,22 @@
-.sections-route
+$section-row-background-color: white
-  .picker__button--clear
+.section-row
+  background-color: $section-row-background-color
+  border-bottom: 1px solid #aaa
+  padding: 8px 0
+  .section-title
+    display: inline-block
+    min-width: 140px
+  .section-dimensions
+    display: inline-block
+    min-width: 80px
+  .table-qr-codes
+    +button($bg: $secondary-color, $padding: $button-tny)
+    margin: 0
+    .translation
       display: none
+    .qr-icon
+      @extend .fa-lg
+  .section-dashboard-orders
+    +button($padding: $button-tny)
+    margin: 0
+    margin-right: 0.7rem

config/locales/supplier.en.yml

@@ -10,6 +10,8 @@ en:
       destroy:
         text: 'Are you sure?'
       total: Total
+      close: Close
+      destroy_button: Delete
     sign_up:
       header: |
         Nice that you want to start using Mozo.
@@ -54,14 +56,16 @@ en:
       modal:
         title: "Edit ${models.table|downcase}"
         body_header: ""
-        close_button: Close
+        close_button: Cancel
-        save_button: Save
+        save_button: OK
+        destroy_button: Delete
       new_button: Add ${models.table|downcase}
     lists:
       index:
         show_all: Show all ${models.plural.list|downcase}
         show_active: Show active ${models.plural.list}
         show_list_on_day: ${models.list} on date
+        total_sentence: Total amount
       show:
         title: Show %{list}
         users: Clients

config/locales/supplier.nl.yml

@@ -10,6 +10,8 @@ nl:
       destroy:
         text: 'Are you sure?'
       total: Total
+      close: Sluiten
+      destroy_button: Verwijder
     sign_up:
       header: |
         Leuk dat je je wilt aanmelden voor Mozo.
@@ -53,14 +55,16 @@ nl:
       modal:
         title: "Bewerk ${models.table|downcase}"
         body_header: ""
-        close_button: Sluiten
+        close_button: Cancel
-        save_button: Opslaan
+        save_button: OK
+        destroy_button: Verwijderen
       new_button: ${models.table} toevoegen
     lists:
       index:
         show_all: Toon alle ${models.plural.list}
         show_active: Toon actieve ${models.plural.list}
         show_list_on_day: '${models.plural.list} op datum'
+        total_sentence: Totaal bedrag
       show:
         title: "%{list} tonen"
         users: Klanten