From d227fb24fe43a06d36343a56f75c6d06b897249e Mon Sep 17 00:00:00 2001 From: summerscope Date: Thu, 8 May 2014 17:36:10 +1000 Subject: [PATCH] Styling checkout page --- .../stylesheets/darkswarm/typography.css.sass | 3 ++ app/assets/stylesheets/darkswarm/ui.css.sass | 6 +-- app/views/checkout/_authentication.html.haml | 20 ++++++--- app/views/checkout/_billing.html.haml | 37 +++++++++------- app/views/checkout/_details.html.haml | 33 ++++++++------- app/views/checkout/_form.html.haml | 2 +- app/views/checkout/_payment.html.haml | 24 ++++++----- app/views/checkout/_shipping.html.haml | 42 +++++++++++-------- app/views/checkout/_summary.html.haml | 6 ++- 9 files changed, 103 insertions(+), 70 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass index f16ea80bee..06e5a60c26 100644 --- a/app/assets/stylesheets/darkswarm/typography.css.sass +++ b/app/assets/stylesheets/darkswarm/typography.css.sass @@ -49,6 +49,9 @@ ul.ofn-list .light-grey color: #666666 +.pad-top + padding-top: 1em + strong.avenir font-weight: normal // Avenir is basically bold anyway diff --git a/app/assets/stylesheets/darkswarm/ui.css.sass b/app/assets/stylesheets/darkswarm/ui.css.sass index 8c9324f5f8..d05bf0f8c4 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.sass +++ b/app/assets/stylesheets/darkswarm/ui.css.sass @@ -3,7 +3,7 @@ @import mixins .neutral-btn - @include button + @include button font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif background-color: transparent border: 2px solid rgba(200, 200, 200, 1) @@ -41,12 +41,12 @@ //rewrite default primary style -.button.primary +.button.primary, button.primary font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif background: $clr-brick color: white -.button.primary:hover, .button.primary:active, .button.primary:focus +.button.primary:hover, .button.primary:active, .button.primary:focus, button.primary:hover, button.primary:active, button.primary:focus background: $clr-brick-bright text-shadow: 0 1px 0 $clr-brick diff --git a/app/views/checkout/_authentication.html.haml b/app/views/checkout/_authentication.html.haml index 58db9ada0d..7a3a3fd11e 100644 --- a/app/views/checkout/_authentication.html.haml +++ b/app/views/checkout/_authentication.html.haml @@ -1,6 +1,14 @@ -#checkout_login.row{"ng-show" => "!enabled"} - .large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"} - %button{"ng-click" => "open()"} Login - - .large-4.columns.text-center - %button{"ng-click" => "enabled = true"} Checkout as guest +%section{"ng-show" => "!enabled"} + %p + %p + .row + .small-12.columns.text-center{"ng-controller" => "AuthenticationCtrl"} + %h3 Ok, ready to checkout? + %p + .row + .small-5.columns.text-center + %button.primary.expand{"ng-click" => "open()"} Log in + .small-2.columns.text-center + %p.pad-top -OR- + .small-5.columns.text-center + %button.neutral-btn.dark.expand{"ng-click" => "enabled = true"} Checkout as guest \ No newline at end of file diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index f1d5cefdd3..66477f0e84 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -1,43 +1,48 @@ %fieldset#billing %ng-form{"ng-controller" => "BillingCtrl", name: "billing"} - %legend{"ng-class" => "{valid: billing.$valid}"} - Billing - %i.fi-x - %i.fi-check + %h5{"ng-class" => "{valid: billing.$valid}"} + %span.right + %i.fi-x.right + %i.fi-check.right + Billing info %accordion-group{"is-open" => "accordion.billing", "ng-class" => "{valid: billing.$valid, open: accordion.billing}"} %accordion-heading .row - .large-12.columns - {{ order.bill_address.address1 }} - {{ order.bill_address.city }} - - icon up / icon down + .small-11.columns + %em + %small + {{ order.bill_address.address1 }} + {{ order.bill_address.city }} + .small-1.columns.right + %span.right + %i.fi-arrow-up + %i.fi-arrow-down = f.fields_for :bill_address, @order.bill_address do |ba| .row - .large-12.columns + .small-12.columns = validated_input "Address", "order.bill_address.address1", "ofn-focus" => "accordion['billing']" .row - .large-12.columns + .small-12.columns = validated_input "Address (contd.)", "order.bill_address.address2", required: false .row - .large-6.columns + .small-6.columns = validated_input "City", "order.bill_address.city" - .large-6.columns + .small-6.columns = ba.select :state_id, @order.billing_address.country.states.map{|c|[c.name, c.id]}, {include_blank: false}, "ng-model" => "order.bill_address.state_id" .row - .large-6.columns + .small-6.columns = validated_input "Postcode", "order.bill_address.zipcode" - .large-6.columns.right + .small-6.columns.right = ba.select :country_id, available_countries.map{|c|[c.name, c.id]}, {include_blank: false}, "ng-model" => "order.bill_address.country_id" .row - .large-12.columns.text-right + .small-12.columns.text-right %button{"ng-disabled" => "billing.$invalid", "ng-click" => "next($event)"} Next diff --git a/app/views/checkout/_details.html.haml b/app/views/checkout/_details.html.haml index 3d1cd77d93..8dee9e1cdf 100644 --- a/app/views/checkout/_details.html.haml +++ b/app/views/checkout/_details.html.haml @@ -1,37 +1,42 @@ %fieldset#details %ng-form{"ng-controller" => "DetailsCtrl", name: "details"} - %legend{"ng-class" => "{valid: details.$valid}"} - Customer Details - %i.fi-x - %i.fi-check + %h5{"ng-class" => "{valid: details.$valid}"} + %span.right + %i.fi-x.right + %i.fi-check.right + Customer details %accordion-group{"is-open" => "accordion.details", "ng-class" => "{valid: details.$valid, open: accordion.details}"} %accordion-heading .row - .large-12.columns - {{ order.bill_address.firstname }} - {{ order.bill_address.lastname }} - - icon up / icon down + .small-11.columns + %em + %small + {{ order.bill_address.firstname }} + {{ order.bill_address.lastname }} + .small-1.columns.right + %span.right + %i.fi-arrow-up + %i.fi-arrow-down .row - .large-6.columns + .small-6.columns = validated_input 'Email', 'order.email', type: :email, "ofn-focus" => "accordion['details']" = f.fields_for :bill_address, @order.bill_address do |ba| - .large-6.columns + .small-6.columns = validated_input 'Phone', 'order.bill_address.phone' = f.fields_for :bill_address, @order.bill_address do |ba| .row - .large-6.columns + .small-6.columns = validated_input "First Name", "order.bill_address.firstname" - .large-6.columns + .small-6.columns = validated_input "Last Name", "order.bill_address.lastname" .row - .large-12.columns.text-right + .small-12.columns.text-right %button{"ng-disabled" => "details.$invalid", "ng-click" => "next($event)"} Next diff --git a/app/views/checkout/_form.html.haml b/app/views/checkout/_form.html.haml index ec759f73a4..dd13128dd4 100644 --- a/app/views/checkout/_form.html.haml +++ b/app/views/checkout/_form.html.haml @@ -10,7 +10,7 @@ -#%pre -#{{ Order.order == order }} - .large-12.columns + .small-12.columns = render partial: "checkout/details", locals: {f: f} = render partial: "checkout/billing", locals: {f: f} = render partial: "checkout/shipping", locals: {f: f} diff --git a/app/views/checkout/_payment.html.haml b/app/views/checkout/_payment.html.haml index 20f7770290..6c3de887c2 100644 --- a/app/views/checkout/_payment.html.haml +++ b/app/views/checkout/_payment.html.haml @@ -1,29 +1,33 @@ %fieldset#payment %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"} - %legend{"ng-class" => "{valid: payment.$valid}"} - Payment - %i.fi-x - %i.fi-check + %h5{"ng-class" => "{valid: payment.$valid}"} + %span.right + %i.fi-x.right + %i.fi-check.right + Payment %accordion-group{"is-open" => "accordion.payment", "ng-class" => "{valid: payment.$valid, open: accordion.payment}"} %accordion-heading .row - .large-12.columns - {{ Order.paymentMethod().name }} - - icon up / icon down + .small-11.columns + %em + %small {{ Order.paymentMethod().name }} + .small-1.columns.right + %span.right + %i.fi-arrow-up + %i.fi-arrow-down - current_order.available_payment_methods.each do |method| .row - .large-12.columns + .small-12.columns %label = radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, false, required: true, "ng-model" => "order.payment_method_id" = method.name .row{"ng-show" => "order.payment_method_id == #{method.id}"} - .large-12.columns + .small-12.columns = render partial: "spree/checkout/payment/#{method.method_type}", :locals => { :payment_method => method } diff --git a/app/views/checkout/_shipping.html.haml b/app/views/checkout/_shipping.html.haml index ee0831bb0f..ab14dabc50 100644 --- a/app/views/checkout/_shipping.html.haml +++ b/app/views/checkout/_shipping.html.haml @@ -1,22 +1,28 @@ %fieldset#shipping %ng-form{"ng-controller" => "ShippingCtrl", name: "shipping"} - %legend{"ng-class" => "{valid: shipping.$valid}"} - Shipping - %i.fi-x - %i.fi-check + %h5{"ng-class" => "{valid: shipping.$valid}"} + %span.right + %i.fi-x.right + %i.fi-check.right + Shipping info %accordion-group{"is-open" => "accordion.shipping", "ng-class" => "{valid: shipping.$valid, open: accordion.shipping}"} %accordion-heading .row - .large-12.columns - {{ Order.shippingMethod().name }} - icon up / icon down + .small-11.columns + %em + %small + {{ Order.shippingMethod().name }} + .small-1.columns.right + %span.right + %i.fi-arrow-up + %i.fi-arrow-down - for ship_method, i in current_distributor.shipping_methods.uniq .row - .large-12.columns + .small-12.columns %label -#= radio_button_tag "order[shipping_method_id]", ship_method.id, false, -#"ng-model" => "order.shipping_method_id" @@ -37,30 +43,30 @@ %div.visible{"ng-if" => "!CheckoutFormState.ship_address_same_as_billing"} .row - .large-12.columns + .small-12.columns = validated_input "Address", "order.ship_address.address1", "ofn-focus" => "accordion['shipping']" .row - .large-12.columns + .small-12.columns = validated_input "Address (contd.)", "order.ship_address.address2", required: false .row - .large-6.columns + .small-6.columns = validated_input "City", "order.ship_address.city" - .large-6.columns + .small-6.columns = sa.select :state_id, @order.shipping_address.country.states.map{|c|[c.name, c.id]} .row - .large-6.columns + .small-6.columns = validated_input "Postcode", "order.ship_address.zipcode" - .large-6.columns.right + .small-6.columns.right = sa.select :country_id, available_countries.map{|c|[c.name, c.id]}, {include_blank: false} .row - .large-6.columns + .small-6.columns = validated_input "First Name", "order.ship_address.firstname" - .large-6.columns + .small-6.columns = validated_input "Last Name", "order.ship_address.lastname" .row - .large-6.columns + .small-6.columns = validated_input "Phone", "order.ship_address.phone" .row - .large-12.columns.text-right + .small-12.columns.text-right %button{"ng-disabled" => "shipping.$invalid", "ng-click" => "next($event)", "ofn-focus" => "accordion['shipping']"} Next diff --git a/app/views/checkout/_summary.html.haml b/app/views/checkout/_summary.html.haml index c2a0a34270..06edeac8b5 100644 --- a/app/views/checkout/_summary.html.haml +++ b/app/views/checkout/_summary.html.haml @@ -23,6 +23,8 @@ %th= label %td= total - = f.submit "Purchase", class: "button", "ng-disabled" => "checkout.$invalid", "ofn-focus" => "accordion['payment']" - %a.button.secondary{href: cart_url} Back to Cart + //= f.submit "Purchase", class: "button", "ng-disabled" => "checkout.$invalid", "ofn-focus" => "accordion['payment']" + %a.button.secondary{href: cart_url} + %i.fi-arrow-left + Back to Cart