Styling checkout page

2026-02-27 01:43:22 +00:00 · 2014-05-08 17:36:10 +10:00
parent aff33a1f61
commit d227fb24fe
9 changed files with 103 additions and 70 deletions
--- 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

--- 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

--- 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
--- 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
--- 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
--- 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}
--- 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 }

--- 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
--- 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