From 10f97fe14b4059cb078a8900c43c5bbc4e170009 Mon Sep 17 00:00:00 2001 From: Rob H Date: Wed, 20 Aug 2014 16:21:30 +1000 Subject: [PATCH] Adding some icons to registration pages --- .../templates/registration/address.html.haml | 22 +++++++++---------- .../templates/registration/contact.html.haml | 10 +++++---- .../templates/registration/details.html.haml | 9 +++++--- .../registration/introduction.html.haml | 10 ++++----- .../darkswarm/registration.css.sass | 11 +++++++++- 5 files changed, 38 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/templates/registration/address.html.haml b/app/assets/javascripts/templates/registration/address.html.haml index 8b04675896..3e1b3c174a 100644 --- a/app/assets/javascripts/templates/registration/address.html.haml +++ b/app/assets/javascripts/templates/registration/address.html.haml @@ -24,18 +24,18 @@ %label{ for: 'enterprise_state' } State: %input.chunky.small-12.columns{ id: 'enterprise_state', placeholder: "eg. Victoria", ng: { model: 'enterprise.state' } } .small-5.columns - %h6 Location display + %h6 + Location display + %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your enterprise's address on the Open Food Network. By default, full location is shown everywhere including street name and number."} .row - .small-2.columns - %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } } - .small-10.columns - %label{ for: 'enterpise_suburb_only' } Hide my street name and street number from the public (ie. only show the suburb) - .row   - .row - .small-2.columns - %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } } - .small-10.columns - %label{ for: 'enterprise_on_map' } Blur my location on the map (show an approximate, not exact pin) + .small-12.columns + %label.indent-checkbox + %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } } + Hide my street name and street number from the public (ie. only show the suburb) + .small-12.columns + %label.indent-checkbox + %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } } + Blur my location on the map (show an approximate, not exact pin) .row .small-12.columns %input.button.primary{ type: "button", value: "Back", ng: { click: "select('details')" }, style: 'float:left' } diff --git a/app/assets/javascripts/templates/registration/contact.html.haml b/app/assets/javascripts/templates/registration/contact.html.haml index 87ed4dfb2e..243d98b601 100644 --- a/app/assets/javascripts/templates/registration/contact.html.haml +++ b/app/assets/javascripts/templates/registration/contact.html.haml @@ -21,16 +21,18 @@ %label{ for: 'contact_phone' } Phone number: %input.chunky.small-12.columns{ id: 'contact_phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.contact.phone' } } .small-12.large-4.columns - %h6 Contact display + %h6 + Contact display + %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your contact details on the Open Food Network."} .row .small-12.columns - %label{ for: 'contact_display_profile' } + %label.indent-checkbox %input{ type: 'checkbox', id: 'contact_name_profile', ng: { model: 'enterprise.contact.name_in_profile' } }   Display name in profile .small-12.columns - %label{ for: 'contact_display_profile' } + %label.indent-checkbox %input{ type: 'checkbox', id: 'contact_email_profile', ng: { model: 'enterprise.contact.email_in_profile' } }   Display email in profile .small-12.columns - %label{ for: 'contact_display_profile' } + %label.indent-checkbox %input{ type: 'checkbox', id: 'contact_phone_profile', ng: { model: 'enterprise.contact.phone_in_profile' } }   Display phone in profile .row .small-12.columns diff --git a/app/assets/javascripts/templates/registration/details.html.haml b/app/assets/javascripts/templates/registration/details.html.haml index 167189f4db..fb346d6959 100644 --- a/app/assets/javascripts/templates/registration/details.html.haml +++ b/app/assets/javascripts/templates/registration/details.html.haml @@ -15,23 +15,26 @@ .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 + %i.ofn-i_036-producers .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. + %span{ style: 'font-size: 80%'} 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 + %i.ofn-i_040-hub .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... + %span{ style: 'font-size: 80%'} 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 + %i.ofn-i_039-delivery .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! + %span{ style: 'font-size: 80%'} 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 .small-12.columns %input.button.primary{ type: "button", value: "Continue", ng: { click: "select('address')" }, style: 'float:right' } diff --git a/app/assets/javascripts/templates/registration/introduction.html.haml b/app/assets/javascripts/templates/registration/introduction.html.haml index 415f3f24fc..4f9bcf0708 100644 --- a/app/assets/javascripts/templates/registration/introduction.html.haml +++ b/app/assets/javascripts/templates/registration/introduction.html.haml @@ -15,11 +15,11 @@ %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-bottom: 10px;'} - %h6 Your profile entitles you to: - A searchable listing in Hub / Producer view - %br - A pin on the OFN map to help users find you + .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.columns %input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" }, style: 'float: right' } diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass index 6d81233b49..e12c00f17b 100644 --- a/app/assets/stylesheets/darkswarm/registration.css.sass +++ b/app/assets/stylesheets/darkswarm/registration.css.sass @@ -9,11 +9,21 @@ .content margin-bottom: 15px + i + font-size: 150% + input.chunky padding: 8px font-size: 105% margin-bottom: 15px + label.indent-checkbox + display: block + padding-left: 20px + text-indent: -17px + input + margin: 0px + label margin-bottom: 3px @@ -35,7 +45,6 @@ #registration-details #enterprise-types - margin-bottom: 20px a background-color: #efefef color: black