Redesign big chunk of work:

> setting up pages for Shops, and shops signup, producers signup
> setting up routes for new pages
> changing fonts to Google Oswald & Roboto
> setting up homepage partials and removing partials no longer required
> changing menu links and labels
This commit is contained in:
summerscope
2015-04-30 18:20:17 +10:00
parent ae16589717
commit 427f535026
33 changed files with 151 additions and 230 deletions

View File

@@ -4,7 +4,7 @@
%h3 {{product.name}}
%span
%em from
%span.avenir {{ enterprise.name }}
%span {{ enterprise.name }}
%br

View File

@@ -1,3 +1,4 @@
@import typography
.darkswarm
@@ -20,7 +21,7 @@
margin-right: 12px
location
font-family: "AvenirBla_IE", "AvenirBla"
@include headingFont
@media all and (max-width: 768px)
location, location + small
display: block

View File

@@ -6,7 +6,7 @@
//Big search used in active table search \\
@mixin big-input($input, $inputhvr, $inputactv)
@include avenir
@include headingFont
@include csstrans
@include border-radius(0.5rem)
background: rgba(255,255,255,0.1)
@@ -44,7 +44,7 @@
letter-spacing: 0
@mixin medium-input($input, $inputhvr, $inputactv)
@include avenir
@include headingFont
@include csstrans
@include border-radius(0.5rem)
background: rgba(255,255,255,0.1)

View File

@@ -1,3 +1,11 @@
$ofn-brand: #f27052
// e.g. australia, uk, norway specific color
$ofn-grey: #808184
//
$clr-brick: #c1122b
$clr-brick-light: #f5e6e7
$clr-brick-light-trans: rgba(245, 230, 231, 0.9)

View File

@@ -1,5 +1,6 @@
@import branding
@import mixins
@import typography
// Search page
#groups
@@ -65,7 +66,7 @@
margin-bottom: -2px
margin-right: 2px
text-transform: capitalize
@include avenir
@include headingFont
@include border-radius(1em 0.25em 0 0)
@include gradient($disabled-light, $disabled-bright)
@media screen and (min-width: 768px)

View File

@@ -4,18 +4,18 @@
// Styling for brand intro / tagline on homepage
#tagline
background-color: black
background-image: url("/assets/home/ofn_bg_1.jpg")
background-color: $dark-grey
background-image: url("/assets/home/home.jpg")
@include fullbg
height: 400px
padding: 40px 0px
h1, h2, p
color: white
h1
margin-bottom: 1em
margin-bottom: 3rem
margin-top: 1rem
h2
font-size: 1.6875rem
max-width: 610px
font-size: 3.75rem
margin: 0 auto
a

View File

@@ -2,8 +2,5 @@
@import mixins
#hubs
background-repeat: repeat
background-image: url("/assets/subtle_white_feathers.png")
// background: $clr-brick-ultra-light url("/assets/home/shopping-bg.jpg")
// @include fullwidthbg
background-color: lighten($ofn-grey, 43%)
@include panepadding

View File

@@ -2,10 +2,6 @@
@import mixins
@import typography
.fixed .top-bar
@include box-shadow(0 2px 3px 0 rgba(0,0,0,0.25))
nav
@include textpress
.joyride-tip-guide .button
@@ -38,8 +34,11 @@ nav
span
font-size: 13px
.nav-primary
@include avenir
@include headingFont
font-size: 0.875rem
font-weight: 300
.left .nav-primary
text-transform: uppercase
// Mobile Menu
@@ -59,7 +58,7 @@ nav
font-size: 0.875rem
.li-menu
@include avenir
@include headingFont
font-size: 1rem
a
color: rgba(255, 255, 255, 0.9)

View File

@@ -53,9 +53,6 @@
// Typography \\
@mixin avenir
font-family: "AvenirBla_IE", "AvenirBla"
@mixin textpress
text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222

View File

@@ -37,7 +37,7 @@
text-align: left
a
@include avenir
@include headingFont
background: transparent
text-transform: uppercase
line-height: 1

View File

@@ -1,24 +1,17 @@
@import branding
//@import mixins
@font-face
font-family: 'AvenirBla_IE'
src: url("/AveniBla.eot") format("opentype")
@mixin headingFont
font-family: 'Oswald', sans-serif
@font-face
font-family: 'AvenirBla'
src: url("/AvenirLTStd-Black.otf") format("opentype")
@mixin bodyFont
font-family: 'Roboto', Arial, sans-serif
@font-face
font-family: 'AvenirMed_IE'
src: url("/AveniMed.eot") format("opentype")
$headingFont: 'Oswald'
$bodyFont: 'Roboto'
@font-face
font-family: 'AvenirMed'
src: url("/AvenirLTStd-Medium.otf") format("opentype")
$font-helvetica: "Helvetica Neue", "HelveticaNeue", "Helvetica", Helvetica, Arial, sans-serif
body
@include bodyFont
font-weight: 400
a
color: $clr-brick
&:hover, &:focus, &:active
@@ -35,17 +28,17 @@ small, .small
.text-small
font-size: 0.875rem
margin-bottom: 0.5rem
font-family: $font-helvetica
font-family: $bodyFont
&, & *
font-size: 0.875rem
.text-normal
font-weight: 400
font-family: $font-helvetica
font-family: $bodyFont
.text-skinny
font-weight: 300
font-family: $font-helvetica
font-family: $bodyFont
.word-wrap
word-wrap: break-word
@@ -69,11 +62,10 @@ small, .small
.brick
color: $clr-brick
@mixin avenir
font-family: "AvenirBla_IE", "AvenirBla"
h1, h2, h3, h4, h5, h6, .avenir
@include avenir
h1, h2, h3, h4, h5, h6
@include headingFont
padding: 0px
ul.bullet-list, ul.check-list
@@ -108,9 +100,6 @@ ul.check-list
.not-bold
font-weight: normal
strong.avenir
font-weight: normal // Avenir is basically bold anyway
// These selectors match the default Foundation selectors
// For clean overriden magic

View File

@@ -1,13 +1,14 @@
@import foundation/components/buttons
@import branding
@import mixins
@import typography
// Button class extensions
.neutral-btn
@include button
@include border-radius(0.5em)
font-family: 'Open Sans', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
font-family: $bodyFont
background-color: transparent
border: 2px solid rgba(200, 200, 200, 1)
color: #999
@@ -49,7 +50,7 @@
outline: none // Turn off blue highlight on chrome
.button.primary, button.primary
font-family: 'Open Sans', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
font-family: $bodyFont
background: $clr-brick
color: white

View File

@@ -0,0 +1,7 @@
class ShopsController < BaseController
layout 'darkswarm'
before_filter :load_active_distributors
def index
end
end

View File

@@ -1,13 +0,0 @@
#beta.pane
.row
.small-12.columns.text-center
%h2 S'cuse us
%h5 while we get (more) awesome
%p Open Food Network UK is a new service thats being piloted right now!
%p Want to help? Or find out when OFN is coming to you?
%strong Wed love to hear from you:
%p
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true} Food buyers
|
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true} Food producers &amp; farmers

View File

@@ -1,13 +0,0 @@
#beta.pane
.row
.small-12.columns.text-center
%h2 S'cuse us
%h5 while we get (more) awesome
%p Open Food Network (beta) is a new service thats being built right now! Our food producers are currently based around Melbourne and Victoria, and we hope to expand OFN nationally very soon.
%p Want to help? Or find out when OFN is coming to you?
%strong Wed love to hear from you:
%p
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true} Food buyers
|
%a{href: "hello@openfoodnetwork.org".reverse, target: '_blank', mailto: true} Food producers &amp; farmers

View File

@@ -0,0 +1,6 @@
#brand-story.pane
.row
.small-12.columns.text-center
%p Sometimes in order to change a system...
%hr

View File

@@ -0,0 +1,8 @@
#cta.pane
.row
.small-12.columns.text-center
%h2 Ready to change the world?
%a.neutral-btn.turquoise{href: "/producers"}
%i.ofn-i_036-producers
Shop now
%hr

View File

@@ -0,0 +1,8 @@
#cta.pane
.row
.small-12.columns.text-center
%h2 It's fun and super easy
%a.neutral-btn.turquoise{href: "/producers"}
%i.ofn-i_036-producers
Shop now
%hr

View File

@@ -1,10 +0,0 @@
#groups.pane
.row
.small-12.columns.text-center
%h2 Groups / Regions
%h5 See all the groups &amp; regions on the Open Food Network
%p
%a.neutral-btn.light{href: "/groups"}
%i.ofn-i_035-groups
View groups &amp; regions

View File

@@ -1,10 +0,0 @@
#map.pane
.row
.small-12.columns.text-center
%h2 Map
%h5 of all our food hubs and producers
%p
%a.neutral-btn.light{href: "/map"}
%i.ofn-i_037-map
View map

View File

@@ -1,75 +0,0 @@
#producers.pane
.row
.small-12.columns.text-center
%h2
= t :producers
%h5 Want to join the Open Food Network?
%br
%a.neutral-btn.turquoise{href: "/register"}
Register now
%i.ofn-i_007-caret-right
/ .row
/ .small-12.medium-4.columns.text-center
/ %ul.pricing-table
/ %li.title Profile
/ %li.price Always free
/ %li.description Help people find and contact you on OFN
/ %li.bullet-item
/ %i.ofn-i_019-map-pin
/ Pin on OFN Map
/ %li.bullet-item
/ %i.ofn-i_044-facebook
/ Share your contact and social info
/ %li.cta-button
/ %a.neutral-btn.turquoise{:href => "/register"}
/ Register now
/ %i.ofn-i_007-caret-right
/ .small-12.medium-4.columns.text-center
/ %ul.pricing-table
/ %li.title Supplier
/ %li.price Always free
/ %li.description Sell your products through existing OFN shopfronts
/ %li.bullet-item
/ %i.ofn-i_019-map-pin
/ Pin on OFN Map
/ %li.bullet-item
/ %i.ofn-i_044-facebook
/ Share your contact and social info
/ %li.bullet-item
/ %i.ofn-i_067-shop
/ Create and manage products
/ %li.cta-button
/ %a.neutral-btn.turquoise{:href => "/register"}
/ Register now
/ %i.ofn-i_007-caret-right
/ .small-12.medium-4.columns.text-center
/ %ul.pricing-table
/ %li.title Shopfront
/ %li.price $200 setup fee
/ %li.description + Sliding monthly fee of $5-$50/month
/ %li.bullet-item
/ %i.ofn-i_019-map-pin
/ Pin on OFN Map
/ %li.bullet-item
/ %i.ofn-i_044-facebook
/ Share your contact and social info
/ %li.bullet-item
/ %i.ofn-i_067-shop
/ Create and manage products
/ %li.bullet-item
/ %i.ofn-i_051-check-big
/ Create and manage order cycles
/ %li.bullet-item
/ %i.ofn-i_051-check-big
/ Sell your products on Shopfront
/ %li.cta-button
/ %a.neutral-btn.turquoise{:href => "/register"}
/ Register now
/ %i.ofn-i_007-caret-right

View File

@@ -1,10 +0,0 @@
#producers.pane
.row
.small-12.columns.text-center
%h2 Producers
%h5 Looking for a specific producer or farmer?
%p
%a.neutral-btn.turquoise{href: "/producers"}
%i.ofn-i_036-producers
View all producers

View File

@@ -0,0 +1,7 @@
#brand-story.pane
.row
.small-12.columns.text-center
%h2 How does it work?
%p sexy graphics go here
%hr

View File

@@ -1,8 +0,0 @@
.row
.large-12.columns
%h2 What is open food network
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

View File

@@ -2,23 +2,21 @@
.row
.small-12.text-center.columns
%h1
%img{src: "/assets/open-food-network-beta.png", srcset: "/assets/open-food-network-beta.svg", width: "550", height: "134", title: "Open Food Network (beta)"}
%h2 An open marketplace that makes it easy to find, buy, sell and move sustainable local food.
%img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "300", height: "104", title: "Open Food Network Australia"}
%h2 Food, unincorporated.
/ %h2 An open marketplace that makes it easy to find, buy, sell and move sustainable local food.
%ofn-modal{title: "Learn more", "ng-cloak" => true}
= render partial: "modals/learn_more"
/ %ofn-modal{title: "Learn more", "ng-cloak" => true}
/ = render partial: "modals/learn_more"
.ng-cloak
= render partial: "home/hubs"
/ = render partial: "home/map"
= render partial: "home/brandstory"
/ = render partial: "home/producers"
= render partial: "home/cta1"
/ = render partial: "home/groups"
= render partial: "home/system"
= render partial: "home/producer-register"
= render partial: "home/beta"
= render partial: "home/cta2"
= render partial: "shared/footer"

View File

@@ -8,7 +8,7 @@
= favicon_link_tag
- else
= favicon_link_tag "/favicon-staging.ico"
%link{href: "https://fonts.googleapis.com/css?family=Open+Sans:400,700", rel: "stylesheet", type: "text/css"}/
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"}
= yield :scripts
%script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"}

View File

@@ -8,7 +8,7 @@
= favicon_link_tag
- else
= favicon_link_tag "/favicon-staging.ico"
%link{href: "https://fonts.googleapis.com/css?family=Open+Sans:400,700", rel: "stylesheet", type: "text/css"}/
%link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"}
= yield :scripts
%script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"}

View File

@@ -0,0 +1,12 @@
.row
.small-12.columns.text-center
%h1 Producers Signup
%h2
= t :producers
%h5 Want to join the Open Food Network?
%br
%a.neutral-btn.turquoise{href: "/register"}
Register now
%i.ofn-i_007-caret-right

View File

@@ -3,16 +3,11 @@
%ul.left{}
%li.ofn-logo
%a{href: root_path}
%img{src: "/assets/open-food-network-beta.png", srcset: "/assets/open-food-network-beta.svg", width: "110", height: "26"}
%li.divider
- if current_page? root_path
%li
%a{"ofn-scroll-to" => "hubs"}
%span.nav-primary Hubs
- else
%li
%a{href: root_path + "#/#hubs"}
%span.nav-primary Hubs
%img{src: "/assets/logo-white.png", srcset: "/assets/logo-white.svg", width: "75", height: "26"}
%li.divider
%li
%a{href: main_app.shops_path}
%span.nav-primary Shops
%li.divider
%li
%a{href: main_app.map_path}
@@ -26,6 +21,11 @@
%a{href: main_app.groups_path}
%span.nav-primary Groups
%li.divider
%li
// TODO: LAURA - About path
%a{href: main_app.groups_path}
%span.nav-primary About
%li.divider
%section.top-bar-section
%ul.right
%li.divider

View File

@@ -11,21 +11,13 @@
%aside.left-off-canvas-menu.show-for-medium-down
%ul.off-canvas-list
%li.ofn-logo
%a{href: root_path}
%img{src: "/assets/open-food-network-beta.png", srcset: "/assets/open-food-network-beta.svg", width: "110", height: "26"}
- if current_page? root_path
%li.li-menu
%a{"ofn-scroll-to" => "hubs"}
%span.nav-primary
%i.ofn-i_040-hub
Hubs
- else
%li.li-menu
%a{href: root_path + "#/#hubs"}
%span.nav-primary
%i.ofn-i_040-hub
Hubs
%a{href: root_path}
%img{src: "/assets/logo-white.png", srcset: "/assets/logo-white.svg", width: "75", height: "26"}
%li.li-menu
%a{href: main_app.shops_path}
%span.nav-primary
%i.ofn-i_019-map-pin
Shops
%li.li-menu
%a{href: main_app.map_path}
%span.nav-primary
@@ -41,6 +33,12 @@
%span.nav-primary
%i.ofn-i_035-groups
Groups
%li.li-menu
%a{href: main_app.groups_path}
// TODO: LAURA - About path
%span.nav-primary
%i.ofn-i_013-help
About
%li
- if spree_current_user.nil?

View File

@@ -0,0 +1 @@
= render partial: "home/hubs"

View File

@@ -0,0 +1,12 @@
.row
.small-12.columns.text-center
%h1 Shops / Hubs Signup
%h2
= t :producers
%h5 Want to join the Open Food Network?
%br
%a.neutral-btn.turquoise{href: "/register"}
Register now
%i.ofn-i_007-caret-right

View File

@@ -17,7 +17,17 @@ Openfoodnetwork::Application.routes.draw do
end
resources :groups
resources :producers
resources :producers, only: [:index] do
collection do
get :signup
end
end
resources :shops, only: [:index] do
collection do
get :signup
end
end
get '/checkout', :to => 'checkout#edit' , :as => :checkout
put '/checkout', :to => 'checkout#update' , :as => :update_checkout