From 694724d17782073abcd5efcbb57af3add0c7494c Mon Sep 17 00:00:00 2001 From: summerscope Date: Thu, 23 Oct 2014 14:23:35 +1100 Subject: [PATCH] Refactoring and styling Welcome screen dashboard admin WIP --- app/assets/stylesheets/admin/welcome.css.sass | 180 ++++++++++++------ .../spree/admin/overview/welcome.html.haml | 71 ++++--- 2 files changed, 156 insertions(+), 95 deletions(-) diff --git a/app/assets/stylesheets/admin/welcome.css.sass b/app/assets/stylesheets/admin/welcome.css.sass index fffac4570e..2494399c27 100644 --- a/app/assets/stylesheets/admin/welcome.css.sass +++ b/app/assets/stylesheets/admin/welcome.css.sass @@ -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 \ No newline at end of file +// .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 \ No newline at end of file diff --git a/app/views/spree/admin/overview/welcome.html.haml b/app/views/spree/admin/overview/welcome.html.haml index bc9e0d5b82..0e6dbafb6e 100644 --- a/app/views/spree/admin/overview/welcome.html.haml +++ b/app/views/spree/admin/overview/welcome.html.haml @@ -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.