raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pull out styling for registration process

Browse Source
This commit is contained in:
Rob H
2014-08-20 11:55:46 +10:00
parent c92aa41e28
commit 5f09f1b4f7
4 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/darkswarm/services/registration_service.js.coffee
View File

@@ -9,7 +9,7 @@ Darkswarm.factory "RegistrationService", (Navigation, $modal, $location)->
open: =>
@modalInstance = $modal.open
templateUrl: 'registration.html'
windowClass: "login-modal medium"
windowClass: "login-modal large"
@modalInstance.result.then @close, @close
@select @current_step

46
app/assets/javascripts/templates/registration/details.html.haml
View File

@@ -1,33 +1,37 @@
%div
.row
#registration_details
.row#header
%h2 Let's Get Started
.row
%h5 Woot! First we need to know what sort of enterprise you are:
%ng-include{ src: "'registration/steps.html'" }
.row
.small-12.columns{ style: 'background-color: #fff;'}
.small-12.columns
.row
%label{ for: 'enterprise_name'} Enterprise Name:
%label{ for: 'enterprise_name' } Enterprise Name:
.row
%input.small-12.columns{ id: 'enterprise_name', placeholder: "eg. Charlie's Awesome Farm" }
.row
Choose One:
.row{ 'data-equalizer' => true }
%a#producer.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'producer'" } }
%div.small-1.columns
%div.small-11.columns
%h6 I'm A Producer
%span Producers are anyone making things to eat & drink - whether you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
%a#hub.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'hub'" } }
%div.small-1.columns
%div.small-11.columns
%h6 I'm A Hub
%span Hubs are anyone connecting the producer to the eater. Hubs may be a co-op, and independent retailer, a buying group, a CSA box scheme, a farm-gate stall, a wholesaler, etc...
%a#both.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'both'" } }
%div.small-1.columns
%div.small-11.columns
%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#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
.small-10.columns
%h6 I'm A Producer
%span Producers are anyone making things to eat & drink - whether you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
.medium-12.large-4.columns{ 'data-equalizer-watch' => true }
%a.small-12.columns.panel#hub{ href: "#", ng: { click: "enterprise.type = 'hub'", class: "{selected: enterprise.type == 'hub'}" } }
.small-2.columns
.small-10.columns
%h6 I'm A Hub
%span Hubs are anyone connecting the producer to the eater. Hubs may be a co-op, and independent retailer, a buying group, a CSA box scheme, a farm-gate stall, a wholesaler, etc...
.medium-12.large-4.columns{ 'data-equalizer-watch' => true }
%a.small-12.columns.panel#both{ href: "#", ng: { click: "enterprise.type = 'both'", class: "{selected: enterprise.type == 'both'}" } }
.small-2.columns
.small-10.columns
%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')" } }

7
app/assets/javascripts/templates/registration/steps.html.haml
View File

@@ -1,6 +1,5 @@
.row
.small-2.columns{ ng: { repeat: 'step in steps', class: "{active: currentStep == step}" } }
%div{ style: 'text-transform: uppercase; text-align: center;background-color: #000; color: #fff;'}
{{ step }}
.row#progress_bar
.small-2.columns.item{ ng: { repeat: 'step in steps', class: "{active: currentStep == step}" } }
{{ step }}

38
app/assets/stylesheets/darkswarm/registration.css.sass Normal file
View File

@@ -0,0 +1,38 @@
@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
text-align: center
background-color: #efefef
label
margin-bottom: 3px
#enterprise_types
margin-bottom: 20px
a
background-color: #efefef
color: black
&:hover
background-color: #ffffff
&.selected
h6
color: #ffffff
color: #ffffff
background-color: $clr-turquoise-bright
input#enterprise_name
padding: 8px
font-size: 105%
margin-bottom: 15px