From 98f7d52493d565102ef8e535f4d5263ab1e001d3 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Thu, 12 Jan 2017 14:01:08 +1100 Subject: [PATCH] Refactor: wrapping registration templates in script tags --- app/views/registration/_modal.html.haml | 21 +-- app/views/registration/index.html.haml | 32 +---- app/views/registration/steps/_about.html.haml | 106 +++++++-------- .../registration/steps/_contact.html.haml | 61 ++++----- .../registration/steps/_details.html.haml | 125 +++++++++--------- .../registration/steps/_finished.html.haml | 27 ++-- .../registration/steps/_images.html.haml | 41 +++--- .../steps/_introduction.html.haml | 83 ++++++------ .../steps/_limit_reached.html.haml | 33 ++--- app/views/registration/steps/_logo.html.haml | 91 ++++++------- app/views/registration/steps/_promo.html.haml | 87 ++++++------ .../registration/steps/_social.html.haml | 81 ++++++------ app/views/registration/steps/_steps.html.haml | 7 +- app/views/registration/steps/_type.html.haml | 89 +++++++------ 14 files changed, 436 insertions(+), 448 deletions(-) diff --git a/app/views/registration/_modal.html.haml b/app/views/registration/_modal.html.haml index 10a12d712e..5fa1da9296 100644 --- a/app/views/registration/_modal.html.haml +++ b/app/views/registration/_modal.html.haml @@ -1,10 +1,11 @@ -%div#registration-modal{"ng-controller" => "RegistrationCtrl"} - %div{ ng: { show: "currentStep() == 'introduction'" } } - %ng-include{ src: "'registration/introduction.html'" } - %div{ ng: { repeat: 'step in steps', show: "currentStep() == step" } } - %ng-include{ src: "'registration/'+ step + '.html'" } - %div{ ng: { show: "currentStep() == 'finished'" } } - %ng-include{ src: "'registration/finished.html'" } - -%a.close-reveal-modal{"ng-click" => "$close()"} - %i.ofn-i_009-close +%script{ type: "text/ng-template", id: "registration.html" } + %div#registration-modal{"ng-controller" => "RegistrationCtrl"} + %div{ ng: { show: "currentStep() == 'introduction'" } } + %ng-include{ src: "'registration/introduction.html'" } + %div{ ng: { repeat: 'step in steps', show: "currentStep() == step" } } + %ng-include{ src: "'registration/'+ step + '.html'" } + %div{ ng: { show: "currentStep() == 'finished'" } } + %ng-include{ src: "'registration/finished.html'" } + + %a.close-reveal-modal{"ng-click" => "$close()"} + %i.ofn-i_009-close diff --git a/app/views/registration/index.html.haml b/app/views/registration/index.html.haml index aa53455739..4f23ac8700 100644 --- a/app/views/registration/index.html.haml +++ b/app/views/registration/index.html.haml @@ -5,32 +5,10 @@ = inject_available_countries = inject_enterprise_attributes -%script{type: "text/ng-template", id: "registration/about.html"} - = render partial: "registration/steps/about" -%script{type: "text/ng-template", id: "registration/contact.html"} - = render partial: "registration/steps/contact" -%script{type: "text/ng-template", id: "registration/details.html"} - = render partial: "registration/steps/details" -%script{type: "text/ng-template", id: "registration/finished.html"} - = render partial: "registration/steps/finished" -%script{type: "text/ng-template", id: "registration/images.html"} - = render partial: "registration/steps/images" -%script{type: "text/ng-template", id: "registration/limit_reached.html"} - = render partial: "registration/steps/limit_reached" -%script{type: "text/ng-template", id: "registration/images/logo.html"} - = render partial: "registration/steps/logo" -%script{type: "text/ng-template", id: "registration/images/promo.html"} - = render partial: "registration/steps/promo" -%script{type: "text/ng-template", id: "registration/social.html"} - = render partial: "registration/steps/social" -%script{type: "text/ng-template", id: "registration/steps.html"} - = render partial: "registration/steps/steps" -%script{type: "text/ng-template", id: "registration/type.html"} - = render partial: "registration/steps/type" - -%script{type: "text/ng-template", id: "registration/introduction.html"} - = render partial: "registration/steps/introduction" -%script{type: "text/ng-template", id: "registration.html"} - = render "modal" +- steps = %w{about contact details finished images introduction} +- steps += %w{limit_reached logo promo social steps type} +- steps.each do |step| + = render partial: "registration/steps/#{step}" += render "modal" %div{ "ng-controller" => "RegistrationCtrl" } diff --git a/app/views/registration/steps/_about.html.haml b/app/views/registration/steps/_about.html.haml index 40d02e3d32..529fdebea3 100644 --- a/app/views/registration/steps/_about.html.haml +++ b/app/views/registration/steps/_about.html.haml @@ -1,57 +1,57 @@ -.container#registration-about - %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2 {{'enterprise_about_headline' | t}} - %h5 - {{'enterprise_about_message' | t}} - %span{ ng: { class: "{brick: !enterprise.is_primary_producer, turquoise: enterprise.is_primary_producer}" } } - {{ enterprise.name }} - - %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('images',about)" } } +%script{ type: "text/ng-template", id: "registration/about.html" } + .container#registration-about + %ng-include{ src: "'registration/steps.html'" } .row .small-12.columns - .alert-box.info{ "ofn-inline-alert" => true, ng: { show: "visible" } } - %h6{ "ng-bind" => "'enterprise_success' | t:{enterprise: enterprise.name}" } - %span {{'enterprise_registration_exit_message' | t}} - %a.close{ ng: { click: "close()" } } × + %header + %h2 {{'enterprise_about_headline' | t}} + %h5 + {{'enterprise_about_message' | t}} + %span{ ng: { class: "{brick: !enterprise.is_primary_producer, turquoise: enterprise.is_primary_producer}" } } + {{ enterprise.name }} - .small-12.large-8.columns - .row - .small-12.columns - .field - %label{ for: 'enterprise_description' } {{'enterprise_description' | t}}: - %input.chunky{ id: 'enterprise_description', placeholder: "{{'enterprise_description_placeholder' | t}}", ng: { model: 'enterprise.description' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_long_desc' } {{'enterprise_long_desc' | t}}: - %textarea.chunky{ id: 'enterprise_long_desc', rows: 6, placeholder: "{{'enterprise_long_desc_placeholder' | t}}", ng: { model: 'enterprise.long_description' } } - %small{ "ng-bind" => "'enterprise_long_desc_length' | t:{num: enterprise.long_description.length}" } - .small-12.large-4.columns - .row - .small-12.columns - .field - %label{ for: 'enterprise_abn' } {{'enterprise_abn' | t}}: - %input.chunky{ id: 'enterprise_abn', placeholder: "{{'enterprise_abn_placeholder' | t}}", ng: { model: 'enterprise.abn' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_acn' } {{'enterprise_acn' | t}}: - %input.chunky{ id: 'enterprise_acn', placeholder: "{{'enterprise_acn_placeholder' | t}}", ng: { model: 'enterprise.acn' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_charges_sales_tax' }= t(:charges_sales_tax) - %input{ id: 'enterprise_charges_sales_tax_true', type: 'radio', name: 'charges_sales_tax', value: 'true', required: true, ng: { model: 'enterprise.charges_sales_tax' } } - %label{ for: 'enterprise_charges_sales_tax_true' } {{'say_yes' | t}} - %input{ id: 'enterprise_charges_sales_tax_false', type: 'radio', name: 'charges_sales_tax', value: 'false', required: true, ng: { model: 'enterprise.charges_sales_tax' } } - %label{ for: 'enterprise_charges_sales_tax_false' } {{'say_no' | t}} - %span.error.small-12.columns{ ng: { show: "about.charges_sales_tax.$error.required && submitted" } } - {{'enterprise_tax_required' | t}} + %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('images',about)" } } + .row + .small-12.columns + .alert-box.info{ "ofn-inline-alert" => true, ng: { show: "visible" } } + %h6{ "ng-bind" => "'enterprise_success' | t:{enterprise: enterprise.name}" } + %span {{'enterprise_registration_exit_message' | t}} + %a.close{ ng: { click: "close()" } } × - .row.buttons.pad-top - .small-12.columns - %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } - + .small-12.large-8.columns + .row + .small-12.columns + .field + %label{ for: 'enterprise_description' } {{'enterprise_description' | t}}: + %input.chunky{ id: 'enterprise_description', placeholder: "{{'enterprise_description_placeholder' | t}}", ng: { model: 'enterprise.description' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_long_desc' } {{'enterprise_long_desc' | t}}: + %textarea.chunky{ id: 'enterprise_long_desc', rows: 6, placeholder: "{{'enterprise_long_desc_placeholder' | t}}", ng: { model: 'enterprise.long_description' } } + %small{ "ng-bind" => "'enterprise_long_desc_length' | t:{num: enterprise.long_description.length}" } + .small-12.large-4.columns + .row + .small-12.columns + .field + %label{ for: 'enterprise_abn' } {{'enterprise_abn' | t}}: + %input.chunky{ id: 'enterprise_abn', placeholder: "{{'enterprise_abn_placeholder' | t}}", ng: { model: 'enterprise.abn' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_acn' } {{'enterprise_acn' | t}}: + %input.chunky{ id: 'enterprise_acn', placeholder: "{{'enterprise_acn_placeholder' | t}}", ng: { model: 'enterprise.acn' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_charges_sales_tax' }= t(:charges_sales_tax) + %input{ id: 'enterprise_charges_sales_tax_true', type: 'radio', name: 'charges_sales_tax', value: 'true', required: true, ng: { model: 'enterprise.charges_sales_tax' } } + %label{ for: 'enterprise_charges_sales_tax_true' } {{'say_yes' | t}} + %input{ id: 'enterprise_charges_sales_tax_false', type: 'radio', name: 'charges_sales_tax', value: 'false', required: true, ng: { model: 'enterprise.charges_sales_tax' } } + %label{ for: 'enterprise_charges_sales_tax_false' } {{'say_no' | t}} + %span.error.small-12.columns{ ng: { show: "about.charges_sales_tax.$error.required && submitted" } } + {{'enterprise_tax_required' | t}} + + .row.buttons.pad-top + .small-12.columns + %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } diff --git a/app/views/registration/steps/_contact.html.haml b/app/views/registration/steps/_contact.html.haml index a22b0677a7..3b7d43ae72 100644 --- a/app/views/registration/steps/_contact.html.haml +++ b/app/views/registration/steps/_contact.html.haml @@ -1,31 +1,32 @@ -.container#registration-contact - %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2 {{'registration_greeting' | t}} - %h5{ "ng-bind" => "'who_is_managing_enterprise' | t:{enterprise: enterprise.name}" } - - %form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('type',contact)" } } - .row.content - .small-12.medium-12.large-7.columns - .row - .small-12.columns.field - %label{ for: 'enterprise_contact' } {{'enterprise_contact' | t}}: - %input.chunky.small-12.columns{ id: 'enterprise_contact', name: 'contact', required: true, placeholder: "Contact Name", ng: { model: 'enterprise.contact' } } - %span.error.small-12.columns{ ng: { show: "contact.contact.$error.required && submitted" } } - {{'enterprise_contact_required' | t}} - .row - .small-12.columns.field - %label{ for: 'enterprise_email_address' } {{'enterprise_email_address' | t}}: - %input.chunky.small-12.columns{ id: 'enterprise_email_address', name: 'email_address', type: 'email', placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email_address' } } - .row - .small-12.columns.field - %label{ for: 'enterprise_phone' } {{'enterprise_phone' | t}}: - %input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } } - .small-12.medium-12.large-5.hide-for-small-only - - .row.buttons +%script{ type: "text/ng-template", id: "registration/contact.html" } + .container#registration-contact + %ng-include{ src: "'registration/steps.html'" } + .row .small-12.columns - %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('details')" } } - %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } + %header + %h2 {{'registration_greeting' | t}} + %h5{ "ng-bind" => "'who_is_managing_enterprise' | t:{enterprise: enterprise.name}" } + + %form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('type',contact)" } } + .row.content + .small-12.medium-12.large-7.columns + .row + .small-12.columns.field + %label{ for: 'enterprise_contact' } {{'enterprise_contact' | t}}: + %input.chunky.small-12.columns{ id: 'enterprise_contact', name: 'contact', required: true, placeholder: "Contact Name", ng: { model: 'enterprise.contact' } } + %span.error.small-12.columns{ ng: { show: "contact.contact.$error.required && submitted" } } + {{'enterprise_contact_required' | t}} + .row + .small-12.columns.field + %label{ for: 'enterprise_email_address' } {{'enterprise_email_address' | t}}: + %input.chunky.small-12.columns{ id: 'enterprise_email_address', name: 'email_address', type: 'email', placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email_address' } } + .row + .small-12.columns.field + %label{ for: 'enterprise_phone' } {{'enterprise_phone' | t}}: + %input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } } + .small-12.medium-12.large-5.hide-for-small-only + + .row.buttons + .small-12.columns + %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('details')" } } + %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } diff --git a/app/views/registration/steps/_details.html.haml b/app/views/registration/steps/_details.html.haml index 6bd3fc02ba..dd3ee65085 100644 --- a/app/views/registration/steps/_details.html.haml +++ b/app/views/registration/steps/_details.html.haml @@ -1,64 +1,65 @@ -.container#registration-details - %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2 {{'registration_detail_headline' | t}} - %h5{ ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_enterprise' | t}} - %h5{ ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_producer' | t}} - - %form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } } - +%script{ type: "text/ng-template", id: "registration/details.html" } + .container#registration-details + %ng-include{ src: "'registration/steps.html'" } .row - .small-12.medium-9.large-12.columns.end - .field - %label{ for: 'enterprise_name', ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_name_enterprise' | t}} - %label{ for: 'enterprise_name', ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_name_producer' | t}} - %input.chunky{ id: 'enterprise_name', name: 'name', placeholder: "{{'registration_detail_name_placeholder' | t}}", required: true, ng: { model: 'enterprise.name' } } - %span.error{ ng: { show: "details.name.$error.required && submitted" } } - {{'registration_detail_name_error' | t}} - - .row - .small-12.medium-9.large-6.columns - .field - %label{ for: 'enterprise_address' } {{'registration_detail_address1' | t}} - %input.chunky{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "{{'registration_detail_address1_placeholder' | t}}", required: true, ng: { model: 'enterprise.address.address1' } } - %span.error{ ng: { show: "details.address1.$error.required && submitted" } } - {{'registration_detail_address1_error' | t}} - .field - %label{ for: 'enterprise_address2' } {{'registration_detail_address2' | t}} - %input.chunky{ id: 'enterprise_address2', name: 'address2', required: false, placeholder: "", required: false, ng: { model: 'enterprise.address.address2' } } - - .small-12.medium-9.large-6.columns.end - .row - .small-12.medium-8.large-8.columns - .field - %label{ for: 'enterprise_city' } {{'registration_detail_suburb' | t}} - %input.chunky{ id: 'enterprise_city', name: 'city', required: true, placeholder: "{{'registration_detail_suburb_placeholder' | t}}", ng: { model: 'enterprise.address.city' } } - %span.error{ ng: { show: "details.city.$error.required && submitted" } } - {{'registration_detail_suburb_error' | t}} - .small-12.medium-4.large-4.columns - .field - %label{ for: 'enterprise_zipcode' } {{'registration_detail_postcode' | t}} - %input.chunky{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "{{'registration_detail_postcode_placeholder' | t}}", ng: { model: 'enterprise.address.zipcode' } } - %span.error{ ng: { show: "details.zipcode.$error.required && submitted" } } - {{'registration_detail_postcode_error' | t}} - .row - .small-12.medium-4.large-4.columns - .field - %label{ for: 'enterprise_state' } {{'registration_detail_state' | t}} - %select.chunky{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } } - %span.error{ ng: { show: "details.state.$error.required && submitted" } } - {{'registration_detail_state_error' | t}} - .small-12.medium-8.large-8.columns - .field - %label{ for: 'enterprise_country' } {{'registration_detail_country' | t}} - %select.chunky{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } } - %span.error{ ng: { show: "details.country.$error.required && submitted" } } - {{'registration_detail_country_error' | t}} - - - .row.buttons .small-12.columns - %hr - %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } + %header + %h2 {{'registration_detail_headline' | t}} + %h5{ ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_enterprise' | t}} + %h5{ ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_producer' | t}} + + %form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } } + + .row + .small-12.medium-9.large-12.columns.end + .field + %label{ for: 'enterprise_name', ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_name_enterprise' | t}} + %label{ for: 'enterprise_name', ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_name_producer' | t}} + %input.chunky{ id: 'enterprise_name', name: 'name', placeholder: "{{'registration_detail_name_placeholder' | t}}", required: true, ng: { model: 'enterprise.name' } } + %span.error{ ng: { show: "details.name.$error.required && submitted" } } + {{'registration_detail_name_error' | t}} + + .row + .small-12.medium-9.large-6.columns + .field + %label{ for: 'enterprise_address' } {{'registration_detail_address1' | t}} + %input.chunky{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "{{'registration_detail_address1_placeholder' | t}}", required: true, ng: { model: 'enterprise.address.address1' } } + %span.error{ ng: { show: "details.address1.$error.required && submitted" } } + {{'registration_detail_address1_error' | t}} + .field + %label{ for: 'enterprise_address2' } {{'registration_detail_address2' | t}} + %input.chunky{ id: 'enterprise_address2', name: 'address2', required: false, placeholder: "", required: false, ng: { model: 'enterprise.address.address2' } } + + .small-12.medium-9.large-6.columns.end + .row + .small-12.medium-8.large-8.columns + .field + %label{ for: 'enterprise_city' } {{'registration_detail_suburb' | t}} + %input.chunky{ id: 'enterprise_city', name: 'city', required: true, placeholder: "{{'registration_detail_suburb_placeholder' | t}}", ng: { model: 'enterprise.address.city' } } + %span.error{ ng: { show: "details.city.$error.required && submitted" } } + {{'registration_detail_suburb_error' | t}} + .small-12.medium-4.large-4.columns + .field + %label{ for: 'enterprise_zipcode' } {{'registration_detail_postcode' | t}} + %input.chunky{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "{{'registration_detail_postcode_placeholder' | t}}", ng: { model: 'enterprise.address.zipcode' } } + %span.error{ ng: { show: "details.zipcode.$error.required && submitted" } } + {{'registration_detail_postcode_error' | t}} + .row + .small-12.medium-4.large-4.columns + .field + %label{ for: 'enterprise_state' } {{'registration_detail_state' | t}} + %select.chunky{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } } + %span.error{ ng: { show: "details.state.$error.required && submitted" } } + {{'registration_detail_state_error' | t}} + .small-12.medium-8.large-8.columns + .field + %label{ for: 'enterprise_country' } {{'registration_detail_country' | t}} + %select.chunky{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } } + %span.error{ ng: { show: "details.country.$error.required && submitted" } } + {{'registration_detail_country_error' | t}} + + + .row.buttons + .small-12.columns + %hr + %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } diff --git a/app/views/registration/steps/_finished.html.haml b/app/views/registration/steps/_finished.html.haml index 76403cb1c8..bae5397a29 100644 --- a/app/views/registration/steps/_finished.html.haml +++ b/app/views/registration/steps/_finished.html.haml @@ -1,15 +1,16 @@ -.container#registration-finished - .row - .small-12.columns.pad-top - %header - %h2 {{'registration_finished_headline' | t}} - .panel.callout - %p{ "ng-bind" => "'registration_finished_thanks' | t:{enterprise: enterprise.name}" } - %p {{'registration_finished_login' | t}} - .row - .small-12.columns.text-center - %h4{ "ng-bind" => "'registration_finished_activate' | t:{enterprise: enterprise.name}" } +%script{ type: "text/ng-template", id: "registration/finished.html" } + .container#registration-finished + .row + .small-12.columns.pad-top + %header + %h2 {{'registration_finished_headline' | t}} + .panel.callout + %p{ "ng-bind" => "'registration_finished_thanks' | t:{enterprise: enterprise.name}" } + %p {{'registration_finished_login' | t}} + .row + .small-12.columns.text-center + %h4{ "ng-bind" => "'registration_finished_activate' | t:{enterprise: enterprise.name}" } - %p{ "ng-bind-html" => "'registration_finished_activate_instruction_html' | t:{email: enterprise.email}"} + %p{ "ng-bind-html" => "'registration_finished_activate_instruction_html' | t:{email: enterprise.email}"} - %a.button.primary{ type: "button", href: "/" } {{'registration_finished_action' | t}} > + %a.button.primary{ type: "button", href: "/" } {{'registration_finished_action' | t}} > diff --git a/app/views/registration/steps/_images.html.haml b/app/views/registration/steps/_images.html.haml index 60a1ca602b..f888bd8165 100644 --- a/app/views/registration/steps/_images.html.haml +++ b/app/views/registration/steps/_images.html.haml @@ -1,22 +1,23 @@ -.container#registration-images{ 'nv-file-drop' => true, uploader: "imageUploader", options:"{ alias: imageStep }", ng: { controller: "EnterpriseImageCtrl" } } - %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2 {{'registration_images_headline' | t}} - %h5 {{'registration_images_description' | t}} - - %form{ name: 'images', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "select('social')" } } - .row{ ng: { repeat: 'image_step in imageSteps', show: "imageStep == image_step" } } - %ng-include{ src: "'registration/images/'+ image_step + '.html'" } - - .row.buttons.pad-top{ ng: { if: "imageStep == 'logo'" } } +%script{ type: "text/ng-template", id: "registration/images.html" } + .container#registration-images{ 'nv-file-drop' => true, uploader: "imageUploader", options:"{ alias: imageStep }", ng: { controller: "EnterpriseImageCtrl" } } + %ng-include{ src: "'registration/steps.html'" } + .row .small-12.columns - %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('about')" } } -   - %input.button.primary.right{ type: "button", value: "Continue", ng: { click: "imageSelect('promo')" } } + %header + %h2 {{'registration_images_headline' | t}} + %h5 {{'registration_images_description' | t}} - .row.buttons.pad-top{ ng: { if: "imageStep == 'promo'" } } - .small-12.columns - %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "imageSelect('logo')" } } - %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } + %form{ name: 'images', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "select('social')" } } + .row{ ng: { repeat: 'image_step in imageSteps', show: "imageStep == image_step" } } + %ng-include{ src: "'registration/'+ image_step + '.html'" } + + .row.buttons.pad-top{ ng: { if: "imageStep == 'logo'" } } + .small-12.columns + %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('about')" } } +   + %input.button.primary.right{ type: "button", value: "Continue", ng: { click: "imageSelect('promo')" } } + + .row.buttons.pad-top{ ng: { if: "imageStep == 'promo'" } } + .small-12.columns + %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "imageSelect('logo')" } } + %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index 8aa05a5263..a328c6869e 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -1,45 +1,46 @@ -.row - .small-12.columns - %header - %h2 {{'registration_greeting' | t}} - %h4 - %small - %i.ofn-i_040-hub - {{'registration_intro' | t}} +%script{ type: "text/ng-template", id: "registration/introduction.html" } + .row + .small-12.columns + %header + %h2 {{'registration_greeting' | t}} + %h4 + %small + %i.ofn-i_040-hub + {{'registration_intro' | t}} -.row{ 'data-equalizer' => true } - .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true } - %h5 {{'registration_checklist' | t}}: - %ul.check-list - %li - {{'registration_time' | t}} - %li - {{'registration_enterprise_address' | t}} - %li - {{'registration_contact_details' | t}} - %li - {{'registration_logo' | t}} - %li - {{'registration_promo_image' | t}} - %li - {{'registration_about_us' | t}} + .row{ 'data-equalizer' => true } + .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true } + %h5 {{'registration_checklist' | t}}: + %ul.check-list + %li + {{'registration_time' | t}} + %li + {{'registration_enterprise_address' | t}} + %li + {{'registration_contact_details' | t}} + %li + {{'registration_logo' | t}} + %li + {{'registration_promo_image' | t}} + %li + {{'registration_about_us' | t}} - .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true} - %h5 - {{'registration_outcome_headline' | t}} - %p{ "ng-bind-html" => "t('registration_outcome1_html')" } - %p {{'registration_outcome2' | t}} - %p {{'registration_outcome3' | t}} + .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true} + %h5 + {{'registration_outcome_headline' | t}} + %p{ "ng-bind-html" => "t('registration_outcome1_html')" } + %p {{'registration_outcome2' | t}} + %p {{'registration_outcome3' | t}} -.row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" } - %hr - .small-12.columns{'ng-hide' => '!tos_required' } - %p.tos-message - #{t(:enterprise_tos_message)} - %a{'href' => "#{Spree::Config.enterprise_tos_link}"} #{t(:enterprise_tos_link_text)} - %p.tos-checkbox - %input{ type: 'checkbox', name: 'accept_terms', id: 'accept_terms', ng: { model: "tos_accepted" } } - %label{for: "accept_terms"} #{t(:enterprise_tos_agree)} + .row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" } + %hr + .small-12.columns{'ng-hide' => '!tos_required' } + %p.tos-message + #{t(:enterprise_tos_message)} + %a{'href' => "#{Spree::Config.enterprise_tos_link}"} #{t(:enterprise_tos_link_text)} + %p.tos-checkbox + %input{ type: 'checkbox', name: 'accept_terms', id: 'accept_terms', ng: { model: "tos_accepted" } } + %label{for: "accept_terms"} #{t(:enterprise_tos_agree)} - .small-12.columns - %input.button.primary.left{ type: "button", value: "{{'registration_action' | t}}", ng: { click: "select('details')", disabled: "tos_required && !tos_accepted", model: "tos_accepted"} } + .small-12.columns + %input.button.primary.left{ type: "button", value: "{{'registration_action' | t}}", ng: { click: "select('details')", disabled: "tos_required && !tos_accepted", model: "tos_accepted"} } diff --git a/app/views/registration/steps/_limit_reached.html.haml b/app/views/registration/steps/_limit_reached.html.haml index 09e9866fd9..44f3b53f22 100644 --- a/app/views/registration/steps/_limit_reached.html.haml +++ b/app/views/registration/steps/_limit_reached.html.haml @@ -1,16 +1,17 @@ -.row - .small-12.columns - %header - %h2 {{'limit_reached_headline' | t}} - %h4 {{'limit_reached_message' | t}} -.row - .small-12.medium-3.large-2.columns.text-right.hide-for-small-only - %img{:src => "/assets/potatoes.png"} - .small-12.medium-9.large-10.columns - %p - {{'limit_reached_text' | t}} - %strong Open Food Network. -.row - .small-12.columns - %hr - %input.button.primary{ type: "button", value: "{{'limit_reached_action' | t}}", ng: { click: "close()" } } +%script{ type: "text/ng-template", id: "registration/limit_reached.html" } + .row + .small-12.columns + %header + %h2 {{'limit_reached_headline' | t}} + %h4 {{'limit_reached_message' | t}} + .row + .small-12.medium-3.large-2.columns.text-right.hide-for-small-only + %img{:src => "/assets/potatoes.png"} + .small-12.medium-9.large-10.columns + %p + {{'limit_reached_text' | t}} + %strong Open Food Network. + .row + .small-12.columns + %hr + %input.button.primary{ type: "button", value: "{{'limit_reached_action' | t}}", ng: { click: "close()" } } diff --git a/app/views/registration/steps/_logo.html.haml b/app/views/registration/steps/_logo.html.haml index 842cbcbe11..3d1effdf93 100644 --- a/app/views/registration/steps/_logo.html.haml +++ b/app/views/registration/steps/_logo.html.haml @@ -1,45 +1,46 @@ -.small-12.medium-12.large-6.columns - .row - .small-12.columns.center - .row - .small-12.columns.center - %h4 - {{'select_logo' | t}} - .row - .small-12.columns.center - %span.small - {{'logo_tip' | t}} - .row.pad-top - .small-12.columns - .image-select.small-12.columns - %label.small-12.columns.button{ for: 'image-select' } {{'logo_label' | t}} - %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' } - .row.show-for-large-up - .large-12.columns - %span#or.large-12.columns - {{'action_or' | t}} - .row.show-for-large-up - .large-12.columns - #image-over{ 'nv-file-over' => true, uploader: "imageUploader" } - {{'logo_drag' | t}} -.small-12.medium-12.large-6.columns - .row - .small-12.columns.center - .row - .small-12.columns.center - %h4 - {{'review_logo' | t}} - .row - .small-12.columns.center - %span.small - {{'review_logo_tip' | t}} - .row.pad-top - .small-12.columns.center - #image-placeholder.logo - %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } - .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } - {{'logo_placeholder' | t}} - .loading{ ng: { hide: "!imageUploader.isUploading" } } - %img.spinner{ src: "/assets/spinning-circles.svg" } - %br/ - {{'uploading' | t}} +%script{ type: "text/ng-template", id: "registration/logo.html" } + .small-12.medium-12.large-6.columns + .row + .small-12.columns.center + .row + .small-12.columns.center + %h4 + {{'select_logo' | t}} + .row + .small-12.columns.center + %span.small + {{'logo_tip' | t}} + .row.pad-top + .small-12.columns + .image-select.small-12.columns + %label.small-12.columns.button{ for: 'image-select' } {{'logo_label' | t}} + %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' } + .row.show-for-large-up + .large-12.columns + %span#or.large-12.columns + {{'action_or' | t}} + .row.show-for-large-up + .large-12.columns + #image-over{ 'nv-file-over' => true, uploader: "imageUploader" } + {{'logo_drag' | t}} + .small-12.medium-12.large-6.columns + .row + .small-12.columns.center + .row + .small-12.columns.center + %h4 + {{'review_logo' | t}} + .row + .small-12.columns.center + %span.small + {{'review_logo_tip' | t}} + .row.pad-top + .small-12.columns.center + #image-placeholder.logo + %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } + .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } + {{'logo_placeholder' | t}} + .loading{ ng: { hide: "!imageUploader.isUploading" } } + %img.spinner{ src: "/assets/spinning-circles.svg" } + %br/ + {{'uploading' | t}} diff --git a/app/views/registration/steps/_promo.html.haml b/app/views/registration/steps/_promo.html.haml index 342db5c08d..0b224e1f64 100644 --- a/app/views/registration/steps/_promo.html.haml +++ b/app/views/registration/steps/_promo.html.haml @@ -1,43 +1,44 @@ -.small-12.medium-12.large-12.columns - .row - .small-12.columns.center - %h4 - {{'select_promo_image' | t}} - .row - .small-12.medium-12.large-5.columns.center - .row - .small-12.columns.center - %span.small - {{'promo_image_tip' | t}} - .row.pad-top - .small-12.columns - .image-select.small-12.columns - %label.small-12.columns.button{ for: 'image-select' } {{'promo_image_label' | t}} - %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' } - .large-2.columns - %span#or.horizontal.large-12.columns - {{'action_or' | t}} - .large-5.columns - #image-over{ 'nv-file-over' => true, uploader: "imageUploader" } - {{'promo_image_drag' | t}} -.small-12.medium-12.large-12.columns.pad-top - .row - .small-12.columns.center - %h4 - {{'review_promo_image' | t}} - .row - .small-12.columns.center - .row - .small-12.columns.center - %span.small - {{'review_promo_image_tip' | t}} - .row.pad-top - .small-12.columns.center - #image-placeholder.promo - %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } - .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } - {{'promo_image_placeholder' | t}} - .loading{ ng: { hide: "!imageUploader.isUploading" } } - %img.spinner{ src: "/assets/spinning-circles.svg" } - %br/ - {{'uploading' | t}} +%script{ type: "text/ng-template", id: "registration/promo.html" } + .small-12.medium-12.large-12.columns + .row + .small-12.columns.center + %h4 + {{'select_promo_image' | t}} + .row + .small-12.medium-12.large-5.columns.center + .row + .small-12.columns.center + %span.small + {{'promo_image_tip' | t}} + .row.pad-top + .small-12.columns + .image-select.small-12.columns + %label.small-12.columns.button{ for: 'image-select' } {{'promo_image_label' | t}} + %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' } + .large-2.columns + %span#or.horizontal.large-12.columns + {{'action_or' | t}} + .large-5.columns + #image-over{ 'nv-file-over' => true, uploader: "imageUploader" } + {{'promo_image_drag' | t}} + .small-12.medium-12.large-12.columns.pad-top + .row + .small-12.columns.center + %h4 + {{'review_promo_image' | t}} + .row + .small-12.columns.center + .row + .small-12.columns.center + %span.small + {{'review_promo_image_tip' | t}} + .row.pad-top + .small-12.columns.center + #image-placeholder.promo + %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } + .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } + {{'promo_image_placeholder' | t}} + .loading{ ng: { hide: "!imageUploader.isUploading" } } + %img.spinner{ src: "/assets/spinning-circles.svg" } + %br/ + {{'uploading' | t}} diff --git a/app/views/registration/steps/_social.html.haml b/app/views/registration/steps/_social.html.haml index ac40ef9c56..edbdd94dd9 100644 --- a/app/views/registration/steps/_social.html.haml +++ b/app/views/registration/steps/_social.html.haml @@ -1,45 +1,44 @@ -.container#registration-social - %ng-include{ src: "'registration/steps.html'" } +%script{ type: "text/ng-template", id: "registration/social.html" } + .container#registration-social + %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2 {{'enterprise_final_step' | t}} - %h5{ "ng-bind" => "'enterprise_social_text' | t:{enterprise: enterprise.name}" } - - %form{ name: 'social', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('finished',social)" } } - .row.content - .small-12.large-7.columns - .row - .small-12.columns - .field - %label{ for: 'enterprise_website' } {{'website' | t}}: - %input.chunky{ id: 'enterprise_website', placeholder: "{{'website_placeholder' | t}}", ng: { model: 'enterprise.website' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_facebook' } {{'facebook' | t}}: - %input.chunky{ id: 'enterprise_facebook', placeholder: "{{'facebook_placeholder' | t}}", ng: { model: 'enterprise.facebook' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_linkedin' } {{'linkedin' | t}}: - %input.chunky{ id: 'enterprise_linkedin', placeholder: "{{'linkedin_placeholder' | t}}", ng: { model: 'enterprise.linkedin' } } - .small-12.large-5.columns - .row - .small-12.columns - .field - %label{ for: 'enterprise_twitter' } {{'twitter' | t}}: - %input.chunky{ id: 'enterprise_twitter', placeholder: "{{'twitter_placeholder' | t}}", ng: { model: 'enterprise.twitter' } } - .row - .small-12.columns - .field - %label{ for: 'enterprise_instagram' } {{'instagram' | t}}: - %input.chunky{ id: 'enterprise_instagram', placeholder: "{{'instagram_placeholder' | t}}", ng: { model: 'enterprise.instagram' } } - - .row.buttons + .row .small-12.columns - %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('images')" } } - %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } + %header + %h2 {{'enterprise_final_step' | t}} + %h5{ "ng-bind" => "'enterprise_social_text' | t:{enterprise: enterprise.name}" } + %form{ name: 'social', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('finished',social)" } } + .row.content + .small-12.large-7.columns + .row + .small-12.columns + .field + %label{ for: 'enterprise_website' } {{'website' | t}}: + %input.chunky{ id: 'enterprise_website', placeholder: "{{'website_placeholder' | t}}", ng: { model: 'enterprise.website' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_facebook' } {{'facebook' | t}}: + %input.chunky{ id: 'enterprise_facebook', placeholder: "{{'facebook_placeholder' | t}}", ng: { model: 'enterprise.facebook' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_linkedin' } {{'linkedin' | t}}: + %input.chunky{ id: 'enterprise_linkedin', placeholder: "{{'linkedin_placeholder' | t}}", ng: { model: 'enterprise.linkedin' } } + .small-12.large-5.columns + .row + .small-12.columns + .field + %label{ for: 'enterprise_twitter' } {{'twitter' | t}}: + %input.chunky{ id: 'enterprise_twitter', placeholder: "{{'twitter_placeholder' | t}}", ng: { model: 'enterprise.twitter' } } + .row + .small-12.columns + .field + %label{ for: 'enterprise_instagram' } {{'instagram' | t}}: + %input.chunky{ id: 'enterprise_instagram', placeholder: "{{'instagram_placeholder' | t}}", ng: { model: 'enterprise.instagram' } } + .row.buttons + .small-12.columns + %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('images')" } } + %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" } diff --git a/app/views/registration/steps/_steps.html.haml b/app/views/registration/steps/_steps.html.haml index 8b420de293..7ea0412929 100644 --- a/app/views/registration/steps/_steps.html.haml +++ b/app/views/registration/steps/_steps.html.haml @@ -1,3 +1,4 @@ -.row#progress-bar - .small-12.medium-2.columns.item{ ng: { repeat: 'step in steps', class: "{active: (currentStep() == step),'show-for-medium-up': (currentStep() != step)}" } } - {{ $index+1 + ". " + step }} +%script{ type: "text/ng-template", id: "registration/steps.html" } + .row#progress-bar + .small-12.medium-2.columns.item{ ng: { repeat: 'step in steps', class: "{active: (currentStep() == step),'show-for-medium-up': (currentStep() != step)}" } } + {{ $index+1 + ". " + step }} diff --git a/app/views/registration/steps/_type.html.haml b/app/views/registration/steps/_type.html.haml index 85a81398d7..4c93c441f4 100644 --- a/app/views/registration/steps/_type.html.haml +++ b/app/views/registration/steps/_type.html.haml @@ -1,47 +1,48 @@ -.container#registration-type +%script{ type: "text/ng-template", id: "registration/type.html" } + .container#registration-type - %ng-include{ src: "'registration/steps.html'" } + %ng-include{ src: "'registration/steps.html'" } - .row - .small-12.columns - %header - %h2{ "ng-bind" => "'registration_type_headline' | t:{enterprise: enterprise.name}" } - %h4 - {{'registration_type_question' | t}} - - %form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } } - .row#enterprise-types{ 'data-equalizer' => true, ng: { if: "::enterprise.type != 'own'" } } - .small-12.columns.field - .row - .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true } - %a.btnpanel#producer-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = true", class: "{selected: enterprise.is_primary_producer}" } } - %i.ofn-i_059-producer - %h4 {{'registration_type_producer' | t}} - - .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true } - %a.btnpanel#hub-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = false", class: "{selected: enterprise.is_primary_producer == false}" } } - %i.ofn-i_063-hub - %h4 {{'registration_type_no_producer' | t}} - - .row - .small-12.columns - %input.chunky{ id: 'enterprise_is_primary_producer', name: 'is_primary_producer', hidden: true, required: true, ng: { model: 'enterprise.is_primary_producer' } } - %span.error{ ng: { show: "type.is_primary_producer.$error.required && submitted" } } - {{'registration_type_error' | t}} - .row - .small-12.columns - .panel.callout - .left - %i.ofn-i_013-help -   - %p {{'registration_type_producer_help' | t}} - .panel.callout - .left - %i.ofn-i_013-help -   - %p {{'registration_type_no_producer_help' | t}} - - .row.buttons + .row .small-12.columns - %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('contact')" } } - %input.button.primary.right{ type: "submit", value: "{{'create_profile' | t}}" } + %header + %h2{ "ng-bind" => "'registration_type_headline' | t:{enterprise: enterprise.name}" } + %h4 + {{'registration_type_question' | t}} + + %form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } } + .row#enterprise-types{ 'data-equalizer' => true, ng: { if: "::enterprise.type != 'own'" } } + .small-12.columns.field + .row + .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true } + %a.btnpanel#producer-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = true", class: "{selected: enterprise.is_primary_producer}" } } + %i.ofn-i_059-producer + %h4 {{'registration_type_producer' | t}} + + .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true } + %a.btnpanel#hub-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = false", class: "{selected: enterprise.is_primary_producer == false}" } } + %i.ofn-i_063-hub + %h4 {{'registration_type_no_producer' | t}} + + .row + .small-12.columns + %input.chunky{ id: 'enterprise_is_primary_producer', name: 'is_primary_producer', hidden: true, required: true, ng: { model: 'enterprise.is_primary_producer' } } + %span.error{ ng: { show: "type.is_primary_producer.$error.required && submitted" } } + {{'registration_type_error' | t}} + .row + .small-12.columns + .panel.callout + .left + %i.ofn-i_013-help +   + %p {{'registration_type_producer_help' | t}} + .panel.callout + .left + %i.ofn-i_013-help +   + %p {{'registration_type_no_producer_help' | t}} + + .row.buttons + .small-12.columns + %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('contact')" } } + %input.button.primary.right{ type: "submit", value: "{{'create_profile' | t}}" }