From 5f09f1b4f7675163a58f64a29ce415b92e2f54d5 Mon Sep 17 00:00:00 2001 From: Rob H Date: Wed, 20 Aug 2014 11:55:46 +1000 Subject: [PATCH] Pull out styling for registration process --- .../services/registration_service.js.coffee | 2 +- .../templates/registration/details.html.haml | 46 ++++++++++--------- .../templates/registration/steps.html.haml | 7 ++- .../darkswarm/registration.css.sass | 38 +++++++++++++++ 4 files changed, 67 insertions(+), 26 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/registration.css.sass diff --git a/app/assets/javascripts/darkswarm/services/registration_service.js.coffee b/app/assets/javascripts/darkswarm/services/registration_service.js.coffee index 0d7bfd2e73..903454911d 100644 --- a/app/assets/javascripts/darkswarm/services/registration_service.js.coffee +++ b/app/assets/javascripts/darkswarm/services/registration_service.js.coffee @@ -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 diff --git a/app/assets/javascripts/templates/registration/details.html.haml b/app/assets/javascripts/templates/registration/details.html.haml index 17020259c1..f1521062c5 100644 --- a/app/assets/javascripts/templates/registration/details.html.haml +++ b/app/assets/javascripts/templates/registration/details.html.haml @@ -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')" } } diff --git a/app/assets/javascripts/templates/registration/steps.html.haml b/app/assets/javascripts/templates/registration/steps.html.haml index c54d0b947b..1a44d1b378 100644 --- a/app/assets/javascripts/templates/registration/steps.html.haml +++ b/app/assets/javascripts/templates/registration/steps.html.haml @@ -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 }} \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass new file mode 100644 index 0000000000..b7604fe12a --- /dev/null +++ b/app/assets/stylesheets/darkswarm/registration.css.sass @@ -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