From a4e72f6fbc32db94a33e5966e20bf42233f31cf5 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 10 Oct 2014 18:20:38 +1100 Subject: [PATCH] Making the header more semantically meaningful for HTML5. Add in row to make spacing consistent. Steps bar moves to top --- .../templates/registration/about.html.haml | 20 +++-- .../templates/registration/contact.html.haml | 15 ++-- .../templates/registration/finished.html.haml | 19 +++-- .../templates/registration/images.html.haml | 9 +- .../registration/introduction.html.haml | 82 ++++++++++--------- .../registration/limit_reached.html.haml | 31 +++---- .../templates/registration/social.html.haml | 11 ++- .../templates/registration/type.html.haml | 20 +++-- 8 files changed, 117 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/templates/registration/about.html.haml b/app/assets/javascripts/templates/registration/about.html.haml index 704a7e3815..160a2012d3 100644 --- a/app/assets/javascripts/templates/registration/about.html.haml +++ b/app/assets/javascripts/templates/registration/about.html.haml @@ -1,14 +1,16 @@ .container#registration-about - .header - %h2 Nice one! - %h5 - Now let's flesh out the details about - %span.brick{"ng-show" => "enterprise.is_distributor"} - {{ enterprise.name }} - %span.turquoise{"ng-show" => "!enterprise.is_distributor" } - {{ enterprise.name }} - %ng-include{ src: "'registration/steps.html'" } + .row + .small-12.columns + %header + %h2 Nice one! + %h5 + Now let's flesh out the details about + %span.brick{"ng-show" => "enterprise.is_distributor"} + {{ enterprise.name }} + %span.turquoise{"ng-show" => "!enterprise.is_distributor" } + {{ enterprise.name }} + %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('images',about)" } } .row .small-12.columns diff --git a/app/assets/javascripts/templates/registration/contact.html.haml b/app/assets/javascripts/templates/registration/contact.html.haml index 87272cdd5a..fdb606da25 100644 --- a/app/assets/javascripts/templates/registration/contact.html.haml +++ b/app/assets/javascripts/templates/registration/contact.html.haml @@ -1,11 +1,14 @@ .container#registration-contact - .header - %h2 Greetings! - %h5 - Who is responsible for managing - %span.turquoise - {{ enterprise.name }}? %ng-include{ src: "'registration/steps.html'" } + .row + .small-12.columns + %header + %h2 Greetings! + %h5 + Who is responsible for managing + %span.turquoise + {{ enterprise.name }}? + %form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('type',contact)" } } .row.content .small-12.medium-12.large-7.columns diff --git a/app/assets/javascripts/templates/registration/finished.html.haml b/app/assets/javascripts/templates/registration/finished.html.haml index 75489c607a..b26e623b84 100644 --- a/app/assets/javascripts/templates/registration/finished.html.haml +++ b/app/assets/javascripts/templates/registration/finished.html.haml @@ -1,12 +1,15 @@ .container#registration-finished - .header - %h2 Well done! - %h5 - You have successfully completed the profile for - %span.brick{"ng-show" => "enterprise.is_distributor"} - {{ enterprise.name }} - %span.turquoise{"ng-show" => "!enterprise.is_distributor" } - {{ enterprise.name }} + .row + .small-12.columns + %header + %h2 Well done! + %h5 + You have successfully completed the profile for + %span.brick{"ng-show" => "enterprise.is_distributor"} + {{ enterprise.name }} + %span.turquoise{"ng-show" => "!enterprise.is_distributor" } + {{ enterprise.name }} + .content{ style: 'text-align: center'} %h3 Why not check it out on the Open Food Network? %a.button.primary{ type: "button", href: "/map" } Go to Map Page > diff --git a/app/assets/javascripts/templates/registration/images.html.haml b/app/assets/javascripts/templates/registration/images.html.haml index 889bc4596f..b2a5dcfd08 100644 --- a/app/assets/javascripts/templates/registration/images.html.haml +++ b/app/assets/javascripts/templates/registration/images.html.haml @@ -1,8 +1,11 @@ .container#registration-images{ 'nv-file-drop' => true, uploader: "imageUploader", options:"{ alias: imageStep }", ng: { controller: "EnterpriseImageCtrl" } } - .header - %h2 Thanks! - %h5 Let's upload some pretty pictures so your profile looks great! :) %ng-include{ src: "'registration/steps.html'" } + .row + .small-12.columns + %header + %h2 Thanks! + %h5 Let's upload some pretty pictures so your profile looks great! :) + %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'" } diff --git a/app/assets/javascripts/templates/registration/introduction.html.haml b/app/assets/javascripts/templates/registration/introduction.html.haml index ccefdefbe0..60a8547b4a 100644 --- a/app/assets/javascripts/templates/registration/introduction.html.haml +++ b/app/assets/javascripts/templates/registration/introduction.html.haml @@ -1,39 +1,45 @@ -%div - .header - %h2 Hi there! - %h4 This wizard will step you through creating a profile - .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 - Your profile gives you an online presence on the - %strong Open Food Network, - allowing you to easily connect with potential customers or partners. You can always choose to update your info later, as well as choose to upgrade your Profile to and Online Store, where you can sell products, track orders and receive payments. Creating a profile takes about 5-10 minutes. - .row{ 'data-equalizer' => true } - .small-12.medium-6.large-6.columns.pad-top{ 'data-equalizer-watch' => true } - %h5 You'll need the following: - %ul.check-list - %li - Your enterprise address and contact details - %li - Your logo image - %li - A pretty picture for your profile header - %li - Some 'About Us' text - - .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true} - .highlight-box - %h5 Your profile entitles you to: - %ul.small-block-grid-1 - %li - %i.ofn-i_020-search - A searchable listing - %li - %i.ofn-i_040-hub - A pin on the OFN map - .row - .small-12.columns +.row + .small-12.columns + %header + %h2 Hi there! + %h4 + %small + %i.ofn-i_040-hub + Create your enterprise profile + .hide-for-large-up %hr - %input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } } + %input.button.small.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } } + %hr + +.row{ 'data-equalizer' => true } + .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true } + %h5 You'll need: + %ul.check-list + %li + 5-10 minutes + %li + Enterprise address + %li + Primary contact details + %li + Your logo image + %li + Landscape image for your profile + %li + 'About Us' text + + .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true} + %h5 + What do I get? + %p + Your profile helps people + %strong find + and + %strong contact + you on the Open Food Network. + %p Use this space to tell the story of your enterprise, to help drive connections to your social and online presence. + +.row.show-for-large-up + .small-12.columns + %hr + %input.button.primary.right{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } } diff --git a/app/assets/javascripts/templates/registration/limit_reached.html.haml b/app/assets/javascripts/templates/registration/limit_reached.html.haml index e2131c1727..778d980289 100644 --- a/app/assets/javascripts/templates/registration/limit_reached.html.haml +++ b/app/assets/javascripts/templates/registration/limit_reached.html.haml @@ -1,15 +1,16 @@ -%div - .header.center - %h2 Oh no! - %h4 You have reached the limit! - .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 - You have reached the limit for the number of enterprises you are allowed to own on the - %strong Open Food Network. - .row - .small-12.columns - %hr - %input.button.primary{ type: "button", value: "Return to the homepage", ng: { click: "close()" } } +.row + .small-12.columns + %header + %h2 Oh no! + %h4 You have reached the limit! +.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 + You have reached the limit for the number of enterprises you are allowed to own on the + %strong Open Food Network. +.row + .small-12.columns + %hr + %input.button.primary{ type: "button", value: "Return to the homepage", ng: { click: "close()" } } diff --git a/app/assets/javascripts/templates/registration/social.html.haml b/app/assets/javascripts/templates/registration/social.html.haml index 1b3490ffa0..a2053ea189 100644 --- a/app/assets/javascripts/templates/registration/social.html.haml +++ b/app/assets/javascripts/templates/registration/social.html.haml @@ -1,8 +1,13 @@ .container#registration-social - .header - %h2 Last step! - %h5 How can people find {{ enterprise.name }} online? + %ng-include{ src: "'registration/steps.html'" } + + .row + .small-12.columns + %header + %h2 Last step! + %h5 How can people find {{ enterprise.name }} online? + %form{ name: 'social', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('finished',social)" } } .row.content .small-12.large-7.columns diff --git a/app/assets/javascripts/templates/registration/type.html.haml b/app/assets/javascripts/templates/registration/type.html.haml index 0834bf1528..1586f4e6e2 100644 --- a/app/assets/javascripts/templates/registration/type.html.haml +++ b/app/assets/javascripts/templates/registration/type.html.haml @@ -1,14 +1,18 @@ .container#registration-type{bindonce: true} - .header - %h2 - Last step to create your enterprise! - %h5 - Is - %span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } } - {{ enterprise.name }} - a primary producer? %ng-include{ src: "'registration/steps.html'" } + + .row + .small-12.columns + %header + %h2 + Last step to create your enterprise! + %h5 + Is + %span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } } + {{ enterprise.name }} + a primary producer? + %form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } } .row#enterprise-types{ 'data-equalizer' => true, bo: { if: "enterprise.type != 'single'" } } .small-12.columns.field