diff --git a/app/assets/javascripts/templates/registration/details.html.haml b/app/assets/javascripts/templates/registration/details.html.haml index a3ff0676c4..d4b0abc4f8 100644 --- a/app/assets/javascripts/templates/registration/details.html.haml +++ b/app/assets/javascripts/templates/registration/details.html.haml @@ -1,62 +1,76 @@ .container#registration-details{bindonce: true} - .header - %h2 Let's Get Started - %h5{ bo: { if: "enterprise.type != 'single'" } } Woot! First we need to know a little bit about your enterprise: - %h5{ bo: { if: "enterprise.type == 'single'" } } Woot! First we need to know a little bit about your farm: %ng-include{ src: "'registration/steps.html'" } + .row + .small-12.columns + %header + %h2 Let's Get Started + %h5{ bo: { if: "enterprise.type != 'single'" } } Woot! First we need to know a little bit about your enterprise: + %h5{ bo: { if: "enterprise.type == 'single'" } } Woot! First we need to know a little bit about your farm: + %form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } } + .row - .small-12.columns.field - %label{ for: 'enterprise_name', bo: { if: "enterprise.type != 'single'" } } Enterprise Name: - %label{ for: 'enterprise_name', bo: { if: "enterprise.type == 'single'" } } Farm Name: - %input.chunky.small-12.columns{ id: 'enterprise_name', name: 'name', placeholder: "eg. Charlie's Awesome Farm", required: true, ng: { model: 'enterprise.name' } } - %span.error.small-12.columns{ ng: { show: "details.name.$error.required && submitted" } } - You need to enter a name for your enterprise! + .small-12.medium-9.large-12.columns.end + .field + %label{ for: 'enterprise_name', bo: { if: "enterprise.type != 'single'" } } Enterprise Name: + %label{ for: 'enterprise_name', bo: { if: "enterprise.type == 'single'" } } Farm Name: + %input.chunky{ id: 'enterprise_name', name: 'name', placeholder: "e.g. Charlie's Awesome Farm", required: true, ng: { model: 'enterprise.name' } } + %span.error{ ng: { show: "details.name.$error.required && submitted" } } + Please choose a unique name for your enterprise + .row - .small-12.medium-12.large-7.columns + .small-12.medium-9.large-6.columns + .field + %label{ for: 'enterprise_address' } Address line 1: + %input.chunky{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "e.g. 123 Cranberry Drive", required: true, ng: { model: 'enterprise.address.address1' } } + %span.error{ ng: { show: "details.address1.$error.required && submitted" } } + Please enter an address + .field + %label{ for: 'enterprise_address2' } Address line 2: + %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.columns.field - %label{ for: 'enterprise_address' } Address: - %input.chunky.small-12.columns{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "eg. 123 Cranberry Drive", required: true, ng: { model: 'enterprise.address.address1' } } - %span.error.small-12.columns{ ng: { show: "details.address1.$error.required && submitted" } } - You need to enter an address. + .small-12.medium-8.large-8.columns + .field + %label{ for: 'enterprise_city' } Suburb: + %input.chunky{ id: 'enterprise_city', name: 'city', required: true, placeholder: "e.g. Northcote", ng: { model: 'enterprise.address.city' } } + %span.error{ ng: { show: "details.city.$error.required && submitted" } } + Please enter a suburb + .small-12.medium-4.large-4.columns + .field + %label{ for: 'enterprise_zipcode' } Postcode: + %input.chunky{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "e.g. 3070", ng: { model: 'enterprise.address.zipcode' } } + %span.error{ ng: { show: "details.zipcode.$error.required && submitted" } } + Postcode required .row - .small-12.large-8.columns.field - %label{ for: 'enterprise_city' } Suburb: - %input.chunky.small-12.columns{ id: 'enterprise_city', name: 'city', required: true, placeholder: "eg. Northcote", ng: { model: 'enterprise.address.city' } } - %span.error.small-12.columns{ ng: { show: "details.city.$error.required && submitted" } } - You need to enter a suburb. - .small-12.large-4.columns.field - %label{ for: 'enterprise_zipcode' } Postcode: - %input.chunky.small-12.columns{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "eg. 3070", ng: { model: 'enterprise.address.zipcode' } } - %span.error.small-12.columns{ ng: { show: "details.zipcode.$error.required && submitted" } } - You need to enter a postcode. - .row - .small-12.large-8.columns.field - %label{ for: 'enterprise_country' } Country: - %select.chunky.small-12.columns{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } } - %span.error.small-12.columns{ ng: { show: "details.country.$error.required && submitted" } } - You need to enter a country. - .small-12.large-4.columns.field - %label{ for: 'enterprise_state' } State: - %select.chunky.small-12.columns{ 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.small-12.columns{ ng: { show: "details.state.$error.required && submitted" } } - You need to enter a state. - .small-12.medium-12.large-5.hide-for-small-only - // This is the location area - / %h6 - / Location display - / %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your enterprise's address on the Open Food Network. By default, full location is shown everywhere including street name and number."} - / .row - / .small-12.columns - / %label.indent-checkbox - / %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } } - / Hide my street name and street number from the public (ie. only show the suburb) - / .small-12.columns - / %label.indent-checkbox - / %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } } - / Blur my location on the map (show an approximate, not exact pin) + .small-12.medium-4.large-4.columns + .field + %label{ for: 'enterprise_state' } State: + %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" } } + State required + .small-12.medium-8.large-8.columns + .field + %label{ for: 'enterprise_country' } Country: + %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" } } + Please select a country + / .small-12.medium-12.large-5.hide-for-small-only + / %h6 + / Location display + / %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your enterprise's address on the Open Food Network. By default, full location is shown everywhere including street name and number."} + / .row + / .small-12.columns + / %label.indent-checkbox + / %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } } + / Hide my street name and street number from the public (ie. only show the suburb) + / .small-12.columns + / %label.indent-checkbox + / %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } } + / Blur my location on the map (show an approximate, not exact pin) .row.buttons .small-12.columns + %hr %input.button.primary.right{ type: "submit", value: "Continue" }