From 7ee9504382f3f2100d0d95aa40d80606d3732245 Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Mon, 12 Oct 2015 12:05:16 +0200 Subject: [PATCH] responsive fixes for supplier --- .../lists_index_controller.js.coffee | 17 +++--- .../supplier/app/helpers/dimensions.js.coffee | 7 +++ .../app/helpers/table-number.js.coffee | 1 + .../supplier/app/templates/employees.emblem | 58 +++++++++++-------- .../app/templates/global/_side_menu.emblem | 2 +- .../app/templates/global/_top_menu.emblem | 2 +- .../supplier/app/templates/lists/index.emblem | 25 +++++++- .../app/templates/modals/employee_edit.emblem | 1 + .../app/templates/modals/table_edit.emblem | 3 +- .../app/templates/modals/user_info.emblem | 2 + .../app/templates/sections/index.emblem | 15 ++++- .../supplier/foundation1/application.js.erb | 1 + .../javascripts/translations.js.coffee.erb | 2 +- .../foundation1/components/_colorbox.sass | 3 +- .../foundation1/components/_modal.sass | 2 +- .../foundation1/components/_nav_main.sass | 28 ++++----- .../foundation1/components/_tables.sass | 4 -- .../foundation1/resources/_employees.sass | 33 +++++++++++ .../foundation1/resources/_lists.sass | 43 ++++++++++++++ .../resources/_section_tables.sass | 3 - .../foundation1/resources/_sections.sass | 25 +++++++- config/locales/supplier.en.yml | 8 ++- config/locales/supplier.nl.yml | 8 ++- 23 files changed, 224 insertions(+), 69 deletions(-) create mode 100644 app/assets/javascripts/supplier/app/helpers/dimensions.js.coffee create mode 100644 app/assets/stylesheets/supplier/foundation1/resources/_employees.sass create mode 100644 app/assets/stylesheets/supplier/foundation1/resources/_lists.sass diff --git a/app/assets/javascripts/supplier/app/controllers/lists_index_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/lists_index_controller.js.coffee index 71c95fe9..57cf7022 100644 --- a/app/assets/javascripts/supplier/app/controllers/lists_index_controller.js.coffee +++ b/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', -> - return @store.peekAll('list') unless selected_date = @get('date') - @store.peekAll('list').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: Ember.computed -> @store.peekAll('list') - sorted_lists: Ember.computed 'lists.[]', -> - @get('lists').sortBy('created_at').reverseObjects() + 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() pricesList: Ember.computed.mapBy 'sorted_lists', 'price' date_lists_total: Ember.computed.sum 'pricesList' diff --git a/app/assets/javascripts/supplier/app/helpers/dimensions.js.coffee b/app/assets/javascripts/supplier/app/helpers/dimensions.js.coffee new file mode 100644 index 00000000..1a34d69d --- /dev/null +++ b/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 = " #{width}" if width < 10 + height = " #{height}" if height < 10 + "#{width} x #{height} #{unit}".htmlSafe() diff --git a/app/assets/javascripts/supplier/app/helpers/table-number.js.coffee b/app/assets/javascripts/supplier/app/helpers/table-number.js.coffee index ec09f16c..e078fd7b 100644 --- a/app/assets/javascripts/supplier/app/helpers/table-number.js.coffee +++ b/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() diff --git a/app/assets/javascripts/supplier/app/templates/employees.emblem b/app/assets/javascripts/supplier/app/templates/employees.emblem index c4159ca9..b06449e8 100644 --- a/app/assets/javascripts/supplier/app/templates/employees.emblem +++ b/app/assets/javascripts/supplier/app/templates/employees.emblem @@ -1,29 +1,37 @@ .row: .small-12.columns h2.main-section-header=t 'models.plural.employee' - if employees - table.table - thead +if employees + 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' + th.email=t 'attributes.employee.email' + th.boolean= t 'attributes.employee.manager' + th.boolean= t 'attributes.employee.active' + th.colorbox= t 'attributes.employee.color' + th.actions=t 'helpers.actions.title' + tbody + each employees as |employee| tr - th.name=t 'attributes.employee.name' - th.email=t 'attributes.employee.email' - th.boolean= t 'attributes.employee.manager' - th.boolean= t 'attributes.employee.active' - th.colorbox= t 'attributes.employee.color' - th.actions=t 'helpers.actions.title' - tbody - each employees as |employee| - tr - td: link-to 'employee' employee: span= employee.name - td.email - = employee.email - = errors employee.errors.email - td.boolean= boolean employee.manager - td.boolean= boolean employee.active - td.colorbox= colorbox employee.color - td.actions - if (can "manage" "employees") - a.table-edit{ action 'editEmployee' employee }: span - a.table-destroy{ action 'destroyEmployee' employee }: span - .form-actions - if (can "manage" "employees") + td: link-to 'employee' employee: span= employee.name + td.email + = employee.email + = errors employee.errors.email + td.boolean= boolean employee.manager + td.boolean= boolean employee.active + td.colorbox= colorbox employee.color + td.actions + if (can "manage" "employees") + a.table-edit{ action 'editEmployee' employee }: span + a.table-destroy{ action 'destroyEmployee' employee }: span +if (can "manage" "employees") + .form-row.form-actions: .small-12.columns a.form-action-new.new-employee-button{action "newEmployee"}= t 'employee.new_button' diff --git a/app/assets/javascripts/supplier/app/templates/global/_side_menu.emblem b/app/assets/javascripts/supplier/app/templates/global/_side_menu.emblem index cc5ed58c..1260050e 100644 --- a/app/assets/javascripts/supplier/app/templates/global/_side_menu.emblem +++ b/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' diff --git a/app/assets/javascripts/supplier/app/templates/global/_top_menu.emblem b/app/assets/javascripts/supplier/app/templates/global/_top_menu.emblem index c1bb7f61..5331a0c2 100644 --- a/app/assets/javascripts/supplier/app/templates/global/_top_menu.emblem +++ b/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" diff --git a/app/assets/javascripts/supplier/app/templates/lists/index.emblem b/app/assets/javascripts/supplier/app/templates/lists/index.emblem index f52ef749..9f72f31c 100644 --- a/app/assets/javascripts/supplier/app/templates/lists/index.emblem +++ b/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 diff --git a/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem b/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem index 10456596..fe1f4bb0 100644 --- a/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem +++ b/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' diff --git a/app/assets/javascripts/supplier/app/templates/modals/table_edit.emblem b/app/assets/javascripts/supplier/app/templates/modals/table_edit.emblem index 9f530c3b..cbda0ee1 100644 --- a/app/assets/javascripts/supplier/app/templates/modals/table_edit.emblem +++ b/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 diff --git a/app/assets/javascripts/supplier/app/templates/modals/user_info.emblem b/app/assets/javascripts/supplier/app/templates/modals/user_info.emblem index ad1d4275..01a9a966 100644 --- a/app/assets/javascripts/supplier/app/templates/modals/user_info.emblem +++ b/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' diff --git a/app/assets/javascripts/supplier/app/templates/sections/index.emblem b/app/assets/javascripts/supplier/app/templates/sections/index.emblem index b1e267f0..00fdaadf 100644 --- a/app/assets/javascripts/supplier/app/templates/sections/index.emblem +++ b/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 diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb index cee92822..a937fd0b 100644 --- a/app/assets/javascripts/supplier/foundation1/application.js.erb +++ b/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 %>; diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb index 3627698c..5b2a3f9c 100644 --- a/app/assets/javascripts/translations.js.coffee.erb +++ b/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 # Tafel @tspan = (path, vars={}) -> "#{t(path, vars)}" diff --git a/app/assets/stylesheets/supplier/foundation1/components/_colorbox.sass b/app/assets/stylesheets/supplier/foundation1/components/_colorbox.sass index 1fa94c6f..249fffa8 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_colorbox.sass +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/components/_modal.sass b/app/assets/stylesheets/supplier/foundation1/components/_modal.sass index ef1f0a6c..7308d311 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_modal.sass +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass b/app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass index a08518a9..041cbbc6 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass +++ b/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 - span.icon - color: $current-color + @media (max-width: 560px) + display: none .top-menu-root display: inline-block line-height: normal diff --git a/app/assets/stylesheets/supplier/foundation1/components/_tables.sass b/app/assets/stylesheets/supplier/foundation1/components/_tables.sass index d37a7c42..93c4a4b8 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_tables.sass +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/resources/_employees.sass b/app/assets/stylesheets/supplier/foundation1/resources/_employees.sass new file mode 100644 index 00000000..057fd81c --- /dev/null +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/resources/_lists.sass b/app/assets/stylesheets/supplier/foundation1/resources/_lists.sass new file mode 100644 index 00000000..ee937658 --- /dev/null +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/resources/_section_tables.sass b/app/assets/stylesheets/supplier/foundation1/resources/_section_tables.sass index e62d74cd..fd3e5b9a 100644 --- a/app/assets/stylesheets/supplier/foundation1/resources/_section_tables.sass +++ b/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 diff --git a/app/assets/stylesheets/supplier/foundation1/resources/_sections.sass b/app/assets/stylesheets/supplier/foundation1/resources/_sections.sass index fe4889f5..c588cef1 100644 --- a/app/assets/stylesheets/supplier/foundation1/resources/_sections.sass +++ b/app/assets/stylesheets/supplier/foundation1/resources/_sections.sass @@ -1,3 +1,22 @@ -.sections-route - .picker__button--clear - display: none +$section-row-background-color: white +.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 diff --git a/config/locales/supplier.en.yml b/config/locales/supplier.en.yml index ef70ec48..3ba52144 100644 --- a/config/locales/supplier.en.yml +++ b/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 - save_button: Save + close_button: Cancel + 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 diff --git a/config/locales/supplier.nl.yml b/config/locales/supplier.nl.yml index a1e74f84..8a3afce8 100644 --- a/config/locales/supplier.nl.yml +++ b/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 - save_button: Opslaan + close_button: Cancel + 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