Adding address step to registration process

This commit is contained in:
Rob H
2014-08-20 12:52:55 +10:00
parent 5f09f1b4f7
commit c53df00969
6 changed files with 73 additions and 29 deletions

View File

@@ -4,7 +4,7 @@ Darkswarm.controller "RegistrationCtrl", ($scope, RegistrationService, CurrentUs
$scope.currentStep = RegistrationService.currentStep
$scope.select = RegistrationService.select
$scope.steps = ['details']
# ,'address','contact','about','images','social'
$scope.steps = ['details','address']
# ,'contact','about','images','social'
$scope.enterprise = {}

View File

@@ -1,4 +1,4 @@
%div.registration-modal{"ng-controller" => "RegistrationCtrl"}
%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" } }

View File

@@ -0,0 +1,41 @@
.container#registration-address
.row.header
%h2 {{ enterprise.name }}
%h5 Now we need to know where you are:
%ng-include{ src: "'registration/steps.html'" }
.row.content
.small-7.columns
.row
.small-12.columns
%label{ for: 'enterprise_address' } Address:
%input.chunky.small-12.columns{ id: 'enterprise_address', placeholder: "eg. 123 Cranberry Drive", ng: { model: 'enterprise.address' } }
.row
.small-8.columns
%label{ for: 'enterprise_suburb' } Suburb:
%input.chunky.small-12.columns{ id: 'enterprise_suburb', placeholder: "eg. Northcote", ng: { model: 'enterprise.suburb' } }
.small-4.columns
%label{ for: 'enterprise_postcode' } Postcode:
%input.chunky.small-12.columns{ id: 'enterprise_postcode', placeholder: "eg. 3070", ng: { model: 'enterprise.suburb' } }
.row
.small-8.columns
%label{ for: 'enterprise_country' } Country:
%input.chunky.small-12.columns{ id: 'enterprise_country', placeholder: "eg. Australia", ng: { model: 'enterprise.country' } }
.small-4.columns
%label{ for: 'enterprise_state' } State:
%input.chunky.small-12.columns{ id: 'enterprise_state', placeholder: "eg. Victoria", ng: { model: 'enterprise.state' } }
.small-5.columns
%h6 Location display
.row
.small-2.columns
%input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } }
.small-10.columns
%label{ for: 'enterpise_suburb_only' } Hide my street name and street number from the public (ie. only show the suburb)
.row  
.row
.small-2.columns
%input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } }
.small-10.columns
%label{ for: 'enterprise_on_map' } Blur my location on the map (show an approximate, not exact pin)
.row
%input.button.primary{ type: "button", value: "Back", ng: { click: "select('details')" }, style: 'float:left' }
%input.button.primary{ type: "button", value: "Continue", ng: { click: "select('contact')" }, style: 'float:right' }

View File

@@ -1,17 +1,17 @@
#registration_details
.row#header
.container#registration-details
.row.header
%h2 Let's Get Started
%h5 Woot! First we need to know what sort of enterprise you are:
%ng-include{ src: "'registration/steps.html'" }
.row
.row.content
.small-12.columns
.row
%label{ for: 'enterprise_name' } Enterprise Name:
.row
%input.small-12.columns{ id: 'enterprise_name', placeholder: "eg. Charlie's Awesome Farm" }
%input.chunky.small-12.columns{ id: 'enterprise_name', placeholder: "eg. Charlie's Awesome Farm", ng: { model: 'enterprise.name' } }
.row
Choose One:
.row#enterprise_types{ 'data-equalizer' => true }
.row#enterprise-types{ 'data-equalizer' => true }
.medium-12.large-4.columns{ 'data-equalizer-watch' => true }
%a.small-12.columns.panel#producer{ href: "#", ng: { click: "enterprise.type = 'producer'", class: "{selected: enterprise.type == 'producer'}" } }
.small-2.columns
@@ -33,6 +33,6 @@
%h6 I'm Both
%span Hey there, Jack-of-all-trades! Not only do you produce yummy things to eat and/or drink, you also want to connect directly to those who love buying your products!
.row
%input.button.primary{ type: "button", value: "Continue", ng: { click: "select('address')" } }
%input.button.primary{ type: "button", value: "Continue", ng: { click: "select('address')" }, style: 'float:right' }

View File

@@ -1,4 +1,4 @@
.row#progress_bar
.row#progress-bar
.small-2.columns.item{ ng: { repeat: 'step in steps', class: "{active: currentStep == step}" } }
{{ step }}

View File

@@ -1,25 +1,33 @@
@import branding
#progress_bar
margin-bottom: 15px
.item
padding: 12px 0px
text-transform: uppercase
text-align: center
background-color: #000
color: #fff
#registration_details
background-color: #ffffff
#header
#registration-modal
.header
text-align: center
background-color: #efefef
.container
background-color: #ffffff
.content
margin-bottom: 15px
input.chunky
padding: 8px
font-size: 105%
margin-bottom: 15px
#progress-bar
margin-bottom: 15px
.item
padding: 12px 0px
text-transform: uppercase
text-align: center
background-color: #000
color: #fff
#registration-details
label
margin-bottom: 3px
#enterprise_types
#enterprise-types
margin-bottom: 20px
a
background-color: #efefef
@@ -31,8 +39,3 @@
color: #ffffff
color: #ffffff
background-color: $clr-turquoise-bright
input#enterprise_name
padding: 8px
font-size: 105%
margin-bottom: 15px