From e8a5a4984b4a3f4ab15f4d197ea4a13ac90a6882 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 9 May 2014 12:17:01 +1000 Subject: [PATCH] Styling work on the checkout page WIP --- .../stylesheets/darkswarm/checkout.css.sass | 39 +++++++++++++++++-- .../stylesheets/darkswarm/shop.css.sass | 2 +- app/views/checkout/_billing.html.haml | 18 +++++---- app/views/checkout/_details.html.haml | 15 ++++--- app/views/checkout/_payment.html.haml | 11 ++++-- app/views/checkout/_shipping.html.haml | 13 ++++--- app/views/checkout/edit.html.haml | 6 ++- 7 files changed, 77 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass index 4b8065819a..8cd387cb3f 100644 --- a/app/assets/stylesheets/darkswarm/checkout.css.sass +++ b/app/assets/stylesheets/darkswarm/checkout.css.sass @@ -1,15 +1,48 @@ +@import mixins +@import branding + checkout display: block orderdetails .button, table width: 100% + + #details, #billing, #shipping, #payment + border: 0 + margin: 2em 0 + padding: 0 + .content + border: 1px solid #efefef - dd - i.fi-check, &.valid i.fi-x + h5 + margin: 0 + padding: 0.65em + background: $clr-brick-light-bright + //color: white + + label, label.alert, label.success, &.valid label.alert, &.dirty label.success + @include csstrans display: none - &.valid i.fi-check + &.dirty label.alert + display: inline + &.dirty.valid label.alert + display: none + &.valid label.success display: inline orderdetails table tr th text-align: left + + + + dd + span.accordion-up + display: none + span.accordion-down + display: inline + &.open + span.accordion-up + display: inline + span.accordion-down + display: none \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass index 79368f5d67..da059d6173 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ b/app/assets/stylesheets/darkswarm/shop.css.sass @@ -12,7 +12,7 @@ product display: block navigation display: block - background: $fawn + background: #efefef distributor.details box-sizing: border-box display: block diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index 66477f0e84..97f55655a2 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -1,10 +1,12 @@ %fieldset#billing %ng-form{"ng-controller" => "BillingCtrl", name: "billing"} - %h5{"ng-class" => "{valid: billing.$valid}"} + %h5{"ng-class" => "{valid: billing.$valid, dirty: details.$dirty}"} %span.right - %i.fi-x.right - %i.fi-check.right + %label.label.round.alert + %i.fi-x + %label.label.round.success + %i.fi-check Billing info %accordion-group{"is-open" => "accordion.billing", @@ -14,12 +16,14 @@ .small-11.columns %em %small - {{ order.bill_address.address1 }} + {{ order.bill_address.address1 }}, {{ order.bill_address.city }} + {{ order.bill_address.zipcode }} .small-1.columns.right - %span.right + %span.accordion-up.right %i.fi-arrow-up - %i.fi-arrow-down + %span.accordion-down.right + %i.fi-arrow-down = f.fields_for :bill_address, @order.bill_address do |ba| .row @@ -45,4 +49,4 @@ .row .small-12.columns.text-right - %button{"ng-disabled" => "billing.$invalid", "ng-click" => "next($event)"} Next + %button.primary{"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 0d071bd319..73d02fcbcb 100644 --- a/app/views/checkout/_details.html.haml +++ b/app/views/checkout/_details.html.haml @@ -3,8 +3,10 @@ %h5{"ng-class" => "{valid: details.$valid, dirty: details.$dirty}"} %span.right - %i.fi-x.right - %i.fi-check.right + %label.label.round.alert + %i.fi-x + %label.label.round.success + %i.fi-check Customer details %accordion-group{"is-open" => "accordion.details", @@ -15,10 +17,13 @@ %em %small {{ order.bill_address.firstname }} - {{ order.bill_address.lastname }} + {{ order.bill_address.lastname }}, + {{ order.email }}, + {{ order.bill_address.phone }} .small-1.columns.right - %span.right + %span.accordion-up.right %i.fi-arrow-up + %span.accordion-down.right %i.fi-arrow-down .row @@ -39,4 +44,4 @@ .row .small-12.columns.text-right - %button{"ng-disabled" => "details.$invalid", "ng-click" => "next($event)"} Next + %button.primary{"ng-disabled" => "details.$invalid", "ng-click" => "next($event)"} Next diff --git a/app/views/checkout/_payment.html.haml b/app/views/checkout/_payment.html.haml index 6c3de887c2..a927e264d3 100644 --- a/app/views/checkout/_payment.html.haml +++ b/app/views/checkout/_payment.html.haml @@ -1,10 +1,12 @@ %fieldset#payment %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"} - %h5{"ng-class" => "{valid: payment.$valid}"} + %h5{"ng-class" => "{valid: payment.$valid, dirty: details.$dirty}"} %span.right - %i.fi-x.right - %i.fi-check.right + %label.label.round.alert + %i.fi-x + %label.label.round.success + %i.fi-check Payment %accordion-group{"is-open" => "accordion.payment", @@ -15,8 +17,9 @@ %em %small {{ Order.paymentMethod().name }} .small-1.columns.right - %span.right + %span.accordion-up.right %i.fi-arrow-up + %span.accordion-down.right %i.fi-arrow-down - current_order.available_payment_methods.each do |method| diff --git a/app/views/checkout/_shipping.html.haml b/app/views/checkout/_shipping.html.haml index ab14dabc50..29645c97d1 100644 --- a/app/views/checkout/_shipping.html.haml +++ b/app/views/checkout/_shipping.html.haml @@ -1,10 +1,12 @@ %fieldset#shipping %ng-form{"ng-controller" => "ShippingCtrl", name: "shipping"} - %h5{"ng-class" => "{valid: shipping.$valid}"} + %h5{"ng-class" => "{valid: shipping.$valid, dirty: details.$dirty}"} %span.right - %i.fi-x.right - %i.fi-check.right + %label.label.round.alert + %i.fi-x + %label.label.round.success + %i.fi-check Shipping info %accordion-group{"is-open" => "accordion.shipping", @@ -16,8 +18,9 @@ %small {{ Order.shippingMethod().name }} .small-1.columns.right - %span.right + %span.accordion-up.right %i.fi-arrow-up + %span.accordion-down.right %i.fi-arrow-down - for ship_method, i in current_distributor.shipping_methods.uniq @@ -69,4 +72,4 @@ = validated_input "Phone", "order.ship_address.phone" .row .small-12.columns.text-right - %button{"ng-disabled" => "shipping.$invalid", "ng-click" => "next($event)", "ofn-focus" => "accordion['shipping']"} Next + %button.primary{"ng-disabled" => "shipping.$invalid", "ng-click" => "next($event)", "ofn-focus" => "accordion['shipping']"} Next diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml index 2c376643d1..ab263e614c 100644 --- a/app/views/checkout/edit.html.haml +++ b/app/views/checkout/edit.html.haml @@ -8,10 +8,12 @@ %accordion.row{"close-others" => "true"} %checkout{"ng-controller" => "CheckoutCtrl"} - .large-9.columns + .small-9.columns - unless spree_current_user = render partial: "checkout/authentication" .row{"ng-show" => "enabled", "ng-controller" => "AccordionCtrl"} = render partial: "checkout/form" - .large-3.columns + .small-3.columns = render partial: "checkout/summary" + += render partial: "shared/footer" \ No newline at end of file