raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Making the header more semantically meaningful for HTML5. Add in row to make spacing consistent. Steps bar moves to top

Browse Source
This commit is contained in:
summerscope
2014-10-10 18:20:38 +11:00
parent 89a51bf1da
commit a4e72f6fbc
8 changed files with 117 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/templates/registration/about.html.haml
View File

@@ -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

15
app/assets/javascripts/templates/registration/contact.html.haml
View File

@@ -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

19
app/assets/javascripts/templates/registration/finished.html.haml
View File

@@ -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 >

9
app/assets/javascripts/templates/registration/images.html.haml
View File

@@ -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'" }

82
app/assets/javascripts/templates/registration/introduction.html.haml
View File

@@ -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')" } }

31
app/assets/javascripts/templates/registration/limit_reached.html.haml
View File

@@ -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()" } }

11
app/assets/javascripts/templates/registration/social.html.haml
View File

@@ -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

20
app/assets/javascripts/templates/registration/type.html.haml
View File

@@ -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