mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-27 01:43:22 +00:00
Refactoring and styling Welcome screen dashboard admin WIP
This commit is contained in:
summerscope
@@ -1,65 +1,133 @@
|
||||
@import ../darkswarm/branding
|
||||
@import ../darkswarm/mixins
|
||||
|
||||
#welcome_page
|
||||
color: #000000
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: #000000
|
||||
|
||||
.big
|
||||
font-weight: bold
|
||||
font-size: 36px
|
||||
|
||||
.plain_text
|
||||
font-size: 16px
|
||||
|
||||
#welcome
|
||||
header
|
||||
text-align: center
|
||||
margin: 50px 0px
|
||||
h1
|
||||
margin-bottom: 10px
|
||||
padding: 4em 2em
|
||||
@include fullbg
|
||||
background-image: url('/assets/home/tagline-bg.jpg')
|
||||
background-repeat: no-repeat
|
||||
background-position: center center
|
||||
margin-bottom: 2em
|
||||
p
|
||||
text-transform: uppercase
|
||||
font-weight: 300
|
||||
&, & *
|
||||
color: white
|
||||
section
|
||||
margin: 2em 0 0 0
|
||||
&, & *
|
||||
color: #5498da
|
||||
|
||||
#next_steps
|
||||
.description
|
||||
background-color: #eff5fc
|
||||
margin-top: -2em
|
||||
margin-bottom: 2em
|
||||
padding: 4em 2em 2em 1em
|
||||
|
||||
a.selector
|
||||
position: relative
|
||||
border: 2px solid black
|
||||
text-align: center
|
||||
margin-bottom: 50px
|
||||
h1
|
||||
margin-bottom: 10px
|
||||
width: 100%
|
||||
cursor: pointer
|
||||
&, & *
|
||||
color: white
|
||||
&:after, &:before
|
||||
top: 100%
|
||||
left: 50%
|
||||
border: solid transparent
|
||||
content: " "
|
||||
height: 0
|
||||
width: 0
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
&:after
|
||||
border-color: rgba(136, 183, 213, 0)
|
||||
border-top-color: #5498da
|
||||
border-width: 12px
|
||||
margin-left: -12px
|
||||
&:hover
|
||||
&:after
|
||||
border-top-color: #9fc820
|
||||
&:before
|
||||
border-color: rgba(84, 152, 218, 0)
|
||||
border-top-color: black
|
||||
border-width: 15px
|
||||
margin-left: -15px
|
||||
.bottom
|
||||
background-image: url('/assets/stripe.png')
|
||||
margin-top: 1em
|
||||
margin-left: -15px
|
||||
margin-right: -15px
|
||||
padding: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.options
|
||||
.option
|
||||
a.selector
|
||||
opacity: 1
|
||||
display: block
|
||||
cursor: pointer
|
||||
border: 3px solid black
|
||||
border-radius: 12px 12px 0px 0px
|
||||
text-align: center
|
||||
margin-bottom: 20px
|
||||
.top
|
||||
min-height: 113px
|
||||
padding: 15px 8px
|
||||
h2
|
||||
margin-bottom: 10px
|
||||
.bottom
|
||||
border-top: 3px solid black
|
||||
padding: 8px 0px
|
||||
|
||||
&:hover
|
||||
opacity: 0.8
|
||||
|
||||
&.selected
|
||||
color: #ffffff
|
||||
background-color: #ff4444
|
||||
border-color: #000000
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: #ffffff
|
||||
// #welcome_page
|
||||
// color: #000000
|
||||
// h1, h2, h3, h4, h5, h6
|
||||
// color: #000000
|
||||
|
||||
&.disabled
|
||||
color: #b0b0b0
|
||||
.selector
|
||||
border-color: #b0b0b0
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: #b0b0b0
|
||||
.bottom
|
||||
border-top-color: #b0b0b0
|
||||
// .big
|
||||
// font-weight: bold
|
||||
// font-size: 36px
|
||||
|
||||
.description
|
||||
font-size: 16px
|
||||
text-align: justify
|
||||
// .plain_text
|
||||
// font-size: 16px
|
||||
|
||||
// #welcome
|
||||
// text-align: center
|
||||
// margin: 50px 0px
|
||||
// h1
|
||||
// margin-bottom: 10px
|
||||
|
||||
// #next_steps
|
||||
// text-align: center
|
||||
// margin-bottom: 50px
|
||||
// h1
|
||||
// margin-bottom: 10px
|
||||
|
||||
// .options
|
||||
// .option
|
||||
// a.selector
|
||||
// opacity: 1
|
||||
// display: block
|
||||
// cursor: pointer
|
||||
// border: 3px solid black
|
||||
// border-radius: 12px 12px 0px 0px
|
||||
// text-align: center
|
||||
// margin-bottom: 20px
|
||||
// .top
|
||||
// min-height: 113px
|
||||
// padding: 15px 8px
|
||||
// h2
|
||||
// margin-bottom: 10px
|
||||
// .bottom
|
||||
// border-top: 3px solid black
|
||||
// padding: 8px 0px
|
||||
|
||||
// &:hover
|
||||
// opacity: 0.8
|
||||
|
||||
// &.selected
|
||||
// color: #ffffff
|
||||
// background-color: #ff4444
|
||||
// border-color: #000000
|
||||
// h1, h2, h3, h4, h5, h6
|
||||
// color: #ffffff
|
||||
|
||||
// &.disabled
|
||||
// color: #b0b0b0
|
||||
// .selector
|
||||
// border-color: #b0b0b0
|
||||
// h1, h2, h3, h4, h5, h6
|
||||
// color: #b0b0b0
|
||||
// .bottom
|
||||
// border-top-color: #b0b0b0
|
||||
|
||||
// .description
|
||||
// font-size: 16px
|
||||
// text-align: justify
|
||||
@@ -1,58 +1,51 @@
|
||||
#welcome_page.sixteen.columns.alpha{ ng: { app: "admin.welcome", controller: 'welcomeCtrl' } }
|
||||
#welcome
|
||||
.big Welcome to the Open Food Network!
|
||||
%h4= "You have successfully created a#{" producer" if @enterprise.is_primary_producer} profile"
|
||||
%header
|
||||
%h1 Welcome to the Open Food Network!
|
||||
%p
|
||||
You have successfully created a
|
||||
%strong
|
||||
= "#{"producer " if @enterprise.is_primary_producer}profile"
|
||||
|
||||
#next_steps
|
||||
%h1 Next Steps
|
||||
.plain_text
|
||||
Choose how you would like to use
|
||||
%br/
|
||||
the Open Food Network
|
||||
%section
|
||||
%h2 Next step
|
||||
%p Choose one:
|
||||
|
||||
.options.sixteen.columns.alpha
|
||||
- if @enterprise.is_primary_producer
|
||||
.basic_producer.option.one-third.column.alpha
|
||||
%a.selector{ ng: { click: "sells='none'", class: "{selected: sells=='none'}" } }
|
||||
%a.full-width.button.selector{ ng: { click: "sells='none'", class: "{selected: sells=='none'}" } }
|
||||
.top
|
||||
%h2 Basic Producer
|
||||
.plain_text Supply only
|
||||
.bottom
|
||||
%h5 ALWAYS FREE
|
||||
.description
|
||||
You want to use OFN as a place for people to find and contact you.
|
||||
You can also add your products, allowing customers to see your product range and allowing you to act as a supplier to other shopfronts.
|
||||
%h3 Producer Profile
|
||||
%p Connect through OFN
|
||||
.bottom ALWAYS FREE
|
||||
%p.description
|
||||
You want to use Open Food Network as a place for people to find and contact you.
|
||||
|
||||
.producer_shop.option.one-third.column
|
||||
%a.selector{ ng: { click: "sells='own'", class: "{selected: sells=='own'}" } }
|
||||
%a.full-width.button.selector{ ng: { click: "sells='own'", class: "{selected: sells=='own'}" } }
|
||||
.top
|
||||
%h2 Producer with Shop
|
||||
.plain_text Sell your products through an OFN shopfront
|
||||
.bottom
|
||||
%h5 30 DAY TRIAL
|
||||
.description
|
||||
Test out having your own shopfront with full access to all Shopfront features for 30 days.
|
||||
After your trial expires you can keep your Shopfront for a subscription cost of $50 per month.
|
||||
%h3 Sell products
|
||||
%p As a supplier
|
||||
.bottom ALWAYS FREE
|
||||
%p.description
|
||||
Add your products to Open Food Network, allowing customers to see your product range, and allowing you to act as a supplier to other shopfronts.
|
||||
|
||||
.full_hub.option.one-third.column.omega.disabled
|
||||
%a.selector
|
||||
.top.center
|
||||
%h2 Full Hub
|
||||
.plain_text Sell other producers' products through an OFN shopfront
|
||||
.bottom.center
|
||||
%h5 COMING SOON
|
||||
.description
|
||||
You want to offer other producers' products for sale as well as your own, establish and coodinate trading relationships with other enterprises and
|
||||
A full hub subscription gives you access to our complete suite of features for managing your food enterprise.
|
||||
%a.full-width.button.selector
|
||||
.top
|
||||
%h3 Sell products
|
||||
%p Through an OFN shopfront
|
||||
.bottom 30 DAY TRIAL
|
||||
%p.description
|
||||
Test out having your own shopfront with full access to all Shopfront features for 30 days. After your trial expires you can keep your Shopfront for a subscription cost of $50 per month.
|
||||
|
||||
- else
|
||||
.shop_profile.option.one-third.column.alpha
|
||||
%a.selector{ ng: { class: "{selected: sells=='none'}" } }
|
||||
.top.center
|
||||
%h2 Shop Profile
|
||||
.plain_text Get a listing
|
||||
.bottom.center
|
||||
%h5 ALWAYS FREE
|
||||
.top
|
||||
%h3 Shop Profile
|
||||
%p Get a listing
|
||||
.bottom ALWAYS FREE
|
||||
.description
|
||||
You want to use OFN as a place for people to find and contact you.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user