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

Styling on-boarding wizard Introduction step

Browse Source
This commit is contained in:
summerscope
2014-08-22 12:11:56 +10:00
committed by Rob H
parent 08d3eb6f93
commit 8b928b5a66
2 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +1,40 @@
%div
.row.header
%h2 Hi there!
%h5 This wizard will step you through creating a Profile on the Open Food Network.
%h4 This wizard will step you through creating a profile
.row
.small-2.columns  
.small-10.columns{ style: 'line-height: 150%;'} Your profile gives you an online presence on the 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 usually takes about 5-10 minutes.
%br
.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-6.columns{ 'data-equalizer-watch' => true }
%span{ style: 'font-weight: bold;' } You'll need the following:
.small-12.columns
%ol.numbered-list
%li Your enterprise address and contact details
%li Your logo image
%li A pretty image to serve as your profile header
%li Some 'About Us' text
.small-6.columns{ 'data-equalizer-watch' => true, style: 'background-color: #ffffff; padding: 10px;'}
%span{ style: 'font-weight: bold;' } Your profile entitles you to:
%ul{ style: 'margin-top: 10px;' }
%li A searchable listing in Hub / Producer view
%li A pin on the OFN map to help users find you
.row
.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
.small-12.columns
%input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" }, style: 'float: right' }
%hr
%input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } }

14
app/assets/stylesheets/darkswarm/registration.css.sass
View File

@@ -51,10 +51,20 @@
label
margin-bottom: 3px
ol.numbered-list
font-size: 80%
ol, ul
// font-size: 80%
font-size: 0.875rem
padding: 0
margin: 0
ol
list-style-type: decimal
.highlight-box
background: white
padding: 1rem 1.2rem
@media all and (max-width: 640px)
margin-top: 1rem
#progress-bar
margin-bottom: 15px
.item