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

Use two columns for contact info and first/last name

Browse Source 
For small screen, it's a one column
This commit is contained in:
Jean-Baptiste Bellet
2022-12-13 12:37:57 +01:00
parent d43f0331ac
commit 988dcc6081
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/views/split_checkout/_details.html.haml
View File

@@ -5,30 +5,32 @@
%div.checkout-title
= t("split_checkout.step1.contact_information.title")
%div.checkout-input
= f.label :email, t("split_checkout.step1.contact_information.email.label")
= f.text_field :email, { placeholder: t("split_checkout.step1.contact_information.email.placeholder") }
= f.error_message_on :email
.two-columns-inputs
%div.checkout-input
= f.label :email, t("split_checkout.step1.contact_information.email.label")
= f.text_field :email, { placeholder: t("split_checkout.step1.contact_information.email.placeholder") }
= f.error_message_on :email
%div.checkout-input
= bill_address.label :phone, t("split_checkout.step1.contact_information.phone.label")
= bill_address.text_field :phone, { placeholder: t("split_checkout.step1.contact_information.phone.placeholder") }
= f.error_message_on "bill_address.phone"
%div.checkout-input
= bill_address.label :phone, t("split_checkout.step1.contact_information.phone.label")
= bill_address.text_field :phone, { placeholder: t("split_checkout.step1.contact_information.phone.placeholder") }
= f.error_message_on "bill_address.phone"
%div.checkout-substep
-# BILLING ADDRESS
%div.checkout-title
= t("split_checkout.step1.billing_address.title")
%div.checkout-input
= bill_address.label :firstname, t("split_checkout.step1.billing_address.first_name.label")
= bill_address.text_field :firstname, { placeholder: t("split_checkout.step1.billing_address.first_name.placeholder") }
= f.error_message_on "bill_address.firstname"
.two-columns-inputs
%div.checkout-input
= bill_address.label :firstname, t("split_checkout.step1.billing_address.first_name.label")
= bill_address.text_field :firstname, { placeholder: t("split_checkout.step1.billing_address.first_name.placeholder") }
= f.error_message_on "bill_address.firstname"
%div.checkout-input
= bill_address.label :lastname, t("split_checkout.step1.billing_address.last_name.label")
= bill_address.text_field :lastname, { placeholder: t("split_checkout.step1.billing_address.last_name.placeholder") }
= f.error_message_on "bill_address.lastname"
%div.checkout-input
= bill_address.label :lastname, t("split_checkout.step1.billing_address.last_name.label")
= bill_address.text_field :lastname, { placeholder: t("split_checkout.step1.billing_address.last_name.placeholder") }
= f.error_message_on "bill_address.lastname"
%div.checkout-input
= bill_address.label :address1, t("split_checkout.step1.address.address1.label")

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

@@ -309,3 +309,25 @@
display: block;
overflow-x: auto;
}
.two-columns-inputs {
display: flex;
gap: 1rem;
justify-content: space-between;
> .checkout-input {
flex: 1;
}
&:last-child > .checkout-input {
margin-bottom: 0;
}
@media screen and (max-width: 700px) {
flex-direction: column;
gap: 0;
&:last-child > .checkout-input {
margin-bottom: 1.5rem;
}
}
}