raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-04-01 06:41:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

New step3: two columns, more condensed

Browse Source
This commit is contained in:
Jean-Baptiste Bellet
2023-01-09 16:10:52 +01:00
parent 4e7c50e22b
commit 52959a913f
8 changed files with 124 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/split_checkout/_already_ordered.html.haml
View File

@@ -1,3 +1,3 @@
.already-ordered
.panel.medium-6
.panel
= t("split_checkout.already_ordered.message_html", cart: link_to(t('split_checkout.already_ordered.cart'), "#{main_app.cart_path}#bought-products"))

1
app/views/split_checkout/_checkout.html.haml
View File

@@ -1,5 +1,4 @@
%checkout.row#checkout
.small-12.medium-12.columns
= render partial: "split_checkout/tabs"
= render partial: "split_checkout/already_ordered" if show_bought_items? && checkout_step?(:summary)
= render partial: "split_checkout/form"

2
app/views/split_checkout/_form.html.haml
View File

@@ -1,7 +1,7 @@
- content_for :injection_data do
= inject_saved_credit_cards
%div.checkout-step
%div.checkout-step{"class": if checkout_step?(:summary) then "checkout-summary" end}
= form_with url: checkout_update_path(checkout_step), model: @order, method: :put,
data: { remote: "true" } do |form|

124
app/views/split_checkout/_summary.html.haml
View File

@@ -1,68 +1,60 @@
.medium-10
%div.checkout-substep
%div.checkout-title
= t("split_checkout.step3.your_details.title")
%div.summary
%span.summary-label
= t("split_checkout.step1.billing_address.first_name.label")
%span.summary-value
= @order.bill_address.firstname
%div.summary
%span.summary-label
= t("split_checkout.step1.billing_address.last_name.label")
%span.summary-value
= @order.bill_address.lastname
%div.summary
%span.summary-label
= t("split_checkout.step1.contact_information.email.label")
%span.summary-value
= @order.user ? @order.user.email : "Change me"
%div.summary
%span.summary-label
= t("split_checkout.step1.contact_information.phone.label")
%span.summary-value
= @order.bill_address.phone
%div.checkout-substep
%div.checkout-title
= t("split_checkout.step3.billing_address.title")
= render "summary_address", address: @order.bill_address
%div.checkout-substep
%div.checkout-title
= t("split_checkout.step3.shipping_address.title")
= render "summary_address", address: @order.shipping_address
%div.checkout-substep
%div.checkout-title
= t("split_checkout.step3.delivery_info.title")
%div.summary
%span.summary-label
= t("split_checkout.step1.shipping_info.title")
%span.summary-value
= @order.shipping_method.name
%div.summary-description
= @order.shipping_method.description
.summary-main
= render partial: "split_checkout/already_ordered" if show_bought_items? && checkout_step?(:summary)
.checkout-substep
.checkout-title
= t("split_checkout.step3.delivery_details.title")
%a.summary-edit{href: main_app.checkout_step_path(:details)}
= t("split_checkout.step3.your_details.edit")
= t("split_checkout.step3.delivery_details.edit")
%div.checkout-substep
%div.checkout-title
.summary-subtitle
= @order.shipping_method.name
.two-columns
%div
.summary-subtitle
= t("split_checkout.step3.delivery_details.address")
%strong
= @order.bill_address.firstname
= @order.bill_address.lastname
%div
= @order.bill_address.phone
%div
= @order.user.email if @order.user
%br
%div
= @order.bill_address.address1
- unless @order.bill_address.address2.blank?
%div
= @order.bill_address.address2
%div
= @order.bill_address.city
%div
= @order.bill_address.state
%div
= @order.bill_address.zipcode
%div
= @order.bill_address.country
- if @order.shipping_method.description.present?
%div
.summary-subtitle
= t("split_checkout.step3.delivery_details.instructions")
%div
= @order.shipping_method.description
%hr
.checkout-substep
.checkout-title
= t("split_checkout.step3.payment_method.title")
%div.summary
%span.summary-value
= last_payment_method(@order)&.name
%div.summary-description
= last_payment_method(@order)&.description
%a.summary-edit{href: main_app.checkout_step_path(:payment)}
= t("split_checkout.step3.payment_method.edit")
.two-columns
%div
= last_payment_method(@order)&.name
%div
.summary-subtitle
= t("split_checkout.step3.payment_method.instructions")
%div
= last_payment_method(@order)&.description
%div.checkout-substep
@@ -71,11 +63,11 @@
= render 'spree/orders/summary', order: @order
.checkout-step3{"data-controller": "sticky", "data-sticky-target": "container"}
.summary-right
- if any_terms_required?(@order.distributor)
= render partial: "terms_and_conditions", locals: { f: f }
.medium-6
.checkout-submit
= f.submit t("split_checkout.step3.submit"), name: "confirm_order", class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
%a.button.cancel{href: main_app.checkout_step_path(:payment)}
= t("split_checkout.step3.cancel")
.checkout-submit
= f.submit t("split_checkout.step3.submit"), name: "confirm_order", class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
%a.button.cancel{href: main_app.checkout_step_path(:payment)}
= t("split_checkout.step3.cancel")

36
app/views/split_checkout/_summary_address.html.haml
View File

@@ -1,36 +0,0 @@
%div.summary
%span.summary-label
= t("split_checkout.step1.address.address1.label")
%span.summary-value
= address.address1
- unless @order.bill_address.address2.blank?
%div.summary
%span.summary-label
= t("split_checkout.step1.address.address2.label")
%span.summary-value
= address.address2
%div.summary
%span.summary-label
= t("split_checkout.step1.address.city.label")
%span.summary-value
= address.city
%div.summary
%span.summary-label
= t("split_checkout.step1.address.state_id.label")
%span.summary-value
= address.state
%div.summary
%span.summary-label
= t("split_checkout.step1.address.zipcode.label")
%span.summary-value
= address.zipcode
%div.summary
%span.summary-label
= t("split_checkout.step1.address.country_id.label")
%span.summary-value
= address.country

2
app/views/split_checkout/_terms_and_conditions.html.haml
View File

@@ -1,4 +1,4 @@
%div.checkout-substep.medium-6
%div.checkout-substep
%div.checkout-input
- if platform_terms_required? && distributor_terms_required?
= f.check_box :accept_terms, { name: "accept_terms", checked: all_terms_and_conditions_already_accepted? }, 1, nil

104
app/webpacker/css/darkswarm/split-checkout.scss
View File

@@ -62,8 +62,9 @@
}
.already-ordered {
margin-left: 20px;
.panel {
margin-top: 3rem;
background-color: $grey-250;
border: 1px solid $tiny-blue;
color: $grey-700;
@@ -203,42 +204,7 @@
@include force-wrap;
}
.checkout-step3 {
padding-left: 15px;
padding-right: 15px;
.checkout-submit {
margin-top: 0;
margin-bottom: 0;
padding-top: 2rem;
.button {
margin-bottom: 1rem;
}
}
&.sticked {
background-color: $white;
box-shadow: 0 -6px 12px -6px rgba(0, 0, 0, 0.33);
border-left: 1px solid $light-grey;
border-right: 1px solid $light-grey;
border-top: 1px solid $light-grey;
}
@media screen and (max-width: 700px) {
&.sticked {
width: auto;
margin-left: -15px;
margin-right: -15px;
box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.33);
.checkout-submit {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
}
}
.checkout-submit {
margin-top: 5rem;
@@ -291,24 +257,40 @@
}
}
.summary {
margin-bottom: 2px;
font-size: 0.875rem;
.checkout-summary {
margin-top: 0;
.summary-label {
font-weight: bold;
}
.summary-description {
@include force-wrap;
color: $min-accessible-grey;
.checkout-substep {
font-size: 0.875rem;
margin-top: 1rem;
.two-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}
}
.summary-edit {
color: $teal-400;
text-decoration: underline;
display: block;
margin-top: 5px;
display: inline-block;
margin-left: 15px;
font-size: 0.875rem;
font-weight: normal;
font-family: $body-font;
&:hover {
color: $teal-500;
text-decoration: underline;
&:after {
color: $teal-500;
}
}
&:after {
background-image: url("../images/edit-with-pen.svg");
content: " ";
@@ -321,6 +303,32 @@
top: 2px;
}
}
.summary-subtitle {
font-weight: bold;
margin-bottom: 20px;
}
}
.checkout-summary {
form {
display: flex;
justify-content: space-between;
.summary-main {
width: 66.66%;
border-right: 1px solid #DDD;
padding-right: 20px;
padding-top: 20px;
}
.summary-right {
width: calc(33.33% - 20px);
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid #DDD;
}
}
}
#line-items {

17
config/locales/en.yml
View File

@@ -1973,18 +1973,15 @@ en:
submit: Next - Order summary
cancel: Back to Your details
step3:
your_details:
title: Your details
edit: Edit your details
billing_address:
title: Billing address
shipping_address:
title: Shipping address
delivery_info:
title: Delivery info
delivery_details:
title: Delivery details
edit: Edit
address: Delivery address
instructions: Instructions
payment_method:
title: Payment method
edit: Edit payment method
edit: Edit
instructions: Instructions
order:
title: Order total
terms_and_conditions: