From 8b928b5a669ce3419ebb86c7353a36ec47b28a4e Mon Sep 17 00:00:00 2001
From: summerscope <summerscope@gmail.com>
Date: Fri, 22 Aug 2014 12:11:56 +1000
Subject: [PATCH] Styling on-boarding wizard Introduction step

---
 .../registration/introduction.html.haml       | 52 ++++++++++++-------
 .../darkswarm/registration.css.sass           | 14 ++++-
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/templates/registration/introduction.html.haml b/app/assets/javascripts/templates/registration/introduction.html.haml
index 4f9bcf0708..43e8e1407a 100644
--- a/app/assets/javascripts/templates/registration/introduction.html.haml
+++ b/app/assets/javascripts/templates/registration/introduction.html.haml
@@ -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 &nbsp;
-    .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')" } }
   
\ No newline at end of file
diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass
index fcc64dbdb2..9b987d26b4 100644
--- a/app/assets/stylesheets/darkswarm/registration.css.sass
+++ b/app/assets/stylesheets/darkswarm/registration.css.sass
@@ -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