fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix split-bill page height

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-23 17:34:32 +03:00
parent e41acced5f
commit 207541136f
1 changed files with 137 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/pages/split-bill/page.tsx
View File

@@ -1,4 +1,4 @@
import { Button } from "antd";
import { Button, Layout } from "antd";
import PeopleIcon from "components/Icons/PeopleIcon";
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader";
@@ -19,130 +19,146 @@ export default function SplitBillPage() {
return (
<>
<ProHeader>{t("checkout.splitBill")}</ProHeader>
<div
style={{
display: "flex",
flexDirection: "column",
height: "82vh",
padding: 16,
gap: 16,
overflow: "auto",
scrollbarWidth: "none",
}}
>
<ProInputCard title={t("checkout.splitBill")}>
<Layout>
<ProHeader>{t("checkout.splitBill")}</ProHeader>
<Layout.Content>
<div
style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
</div>
</div>
</ProInputCard>
<PaymentMethods />
<PaymentSummary />
</div>
<div
style={{
width: "100%",
padding: "16px 16px 0",
position: "fixed",
bottom: 0,
left: 0,
height: "80px",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
gap: "1rem",
backgroundColor: themeName === "light" ? "white" : ProBlack2,
}}
>
<Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
<Button
type="primary"
shape="round"
style={{
width: "100%",
height: 48,
marginBottom: 16,
boxShadow: "none",
display: "flex",
flexDirection: "column",
height: "82vh",
padding: 16,
gap: 16,
overflow: "auto",
scrollbarWidth: "none",
}}
>
{t("checkout.placeOrder")}
</Button>
</Link>
</div>
<ProInputCard title={t("checkout.splitBill")}>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
}}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
}}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
</div>
</div>
</ProInputCard>
<PaymentMethods />
<PaymentSummary />
</div>
<div
style={{
width: "100%",
padding: "16px 16px 0",
position: "fixed",
bottom: 0,
left: 0,
height: "80px",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
gap: "1rem",
backgroundColor: themeName === "light" ? "white" : ProBlack2,
}}
>
<Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
<Button
type="primary"
shape="round"
style={{
width: "100%",
height: 48,
marginBottom: 16,
boxShadow: "none",
}}
>
{t("checkout.placeOrder")}
</Button>
</Link>
</div>
</Layout.Content>
</Layout>
</>
);
}