raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styling work on the checkout page WIP

Browse Source
This commit is contained in:
summerscope
2014-05-09 12:17:01 +10:00
parent 961a32816c
commit e8a5a4984b
7 changed files with 77 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/stylesheets/darkswarm/checkout.css.sass
View File

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

2
app/assets/stylesheets/darkswarm/shop.css.sass
View File

@@ -12,7 +12,7 @@ product
display: block
navigation
display: block
background: $fawn
background: #efefef
distributor.details
box-sizing: border-box
display: block

18
app/views/checkout/_billing.html.haml
View File

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

15
app/views/checkout/_details.html.haml
View File

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

11
app/views/checkout/_payment.html.haml
View File

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

13
app/views/checkout/_shipping.html.haml
View File

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

6
app/views/checkout/edit.html.haml
View File

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