k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve cart mobile styles

Browse Source
This commit is contained in:
Karli
2025-09-10 06:34:34 +03:00
parent 8b3e58e833
commit 76433684e7
5 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/home/(user)/_components/cart/analysis-location.tsx
View File

@@ -55,11 +55,15 @@ export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: Store
} }
return ( return (
<div className="w-full bg-white flex flex-col txt-medium gap-y-2"> <div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:locations.description'} />
</p>
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit((data) => onSubmit(data))} onSubmit={form.handleSubmit((data) => onSubmit(data))}
className="w-full mb-2 flex gap-x-2" className="w-full mb-2 flex gap-x-2 flex-1"
> >
<Select <Select
value={form.watch('locationId')} value={form.watch('locationId')}
@@ -106,11 +110,6 @@ export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: Store
</p> </p>
</div> </div>
)} )}
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:locations.description'} />
</p>
</div> </div>
) )
} }

10
app/home/(user)/_components/cart/cart-item.tsx
View File

@@ -17,7 +17,7 @@ export default function CartItem({ item, currencyCode }: {
return ( return (
<TableRow className="w-full" data-testid="product-row"> <TableRow className="w-full" data-testid="product-row">
<TableCell className="text-left w-[100%] px-6"> <TableCell className="text-left w-[100%] px-4 sm:px-6">
<p <p
className="txt-medium-plus text-ui-fg-base" className="txt-medium-plus text-ui-fg-base"
data-testid="product-title" data-testid="product-title"
@@ -26,11 +26,11 @@ export default function CartItem({ item, currencyCode }: {
</p> </p>
</TableCell> </TableCell>
<TableCell className="px-6"> <TableCell className="px-4 sm:px-6">
{item.quantity} {item.quantity}
</TableCell> </TableCell>
<TableCell className="min-w-[80px] px-6"> <TableCell className="min-w-[80px] px-4 sm:px-6">
{formatCurrency({ {formatCurrency({
value: item.unit_price, value: item.unit_price,
currencyCode, currencyCode,
@@ -38,7 +38,7 @@ export default function CartItem({ item, currencyCode }: {
})} })}
</TableCell> </TableCell>
<TableCell className="min-w-[80px] px-6"> <TableCell className="min-w-[80px] px-4 sm:px-6 text-right">
{formatCurrency({ {formatCurrency({
value: item.total, value: item.total,
currencyCode, currencyCode,
@@ -46,7 +46,7 @@ export default function CartItem({ item, currencyCode }: {
})} })}
</TableCell> </TableCell>
<TableCell className="text-right px-6"> <TableCell className="text-right px-4 sm:px-6">
<span className="flex gap-x-1 justify-end w-[60px]"> <span className="flex gap-x-1 justify-end w-[60px]">
<CartItemDelete id={item.id} /> <CartItemDelete id={item.id} />
</span> </span>

10
app/home/(user)/_components/cart/cart-items.tsx
View File

@@ -22,19 +22,19 @@ export default function CartItems({ cart, items, productColumnLabelKey }: {
<Table className="rounded-lg border border-separate"> <Table className="rounded-lg border border-separate">
<TableHeader className="text-ui-fg-subtle txt-medium-plus"> <TableHeader className="text-ui-fg-subtle txt-medium-plus">
<TableRow> <TableRow>
<TableHead className="px-6"> <TableHead className="px-4 sm:px-6">
<Trans i18nKey={productColumnLabelKey} /> <Trans i18nKey={productColumnLabelKey} />
</TableHead> </TableHead>
<TableHead className="px-6"> <TableHead className="px-4 sm:px-6">
<Trans i18nKey="cart:table.quantity" /> <Trans i18nKey="cart:table.quantity" />
</TableHead> </TableHead>
<TableHead className="px-6 min-w-[100px]"> <TableHead className="px-4 sm:px-6 min-w-[100px]">
<Trans i18nKey="cart:table.price" /> <Trans i18nKey="cart:table.price" />
</TableHead> </TableHead>
<TableHead className="px-6 min-w-[100px]"> <TableHead className="px-4 sm:px-6 min-w-[100px] text-right">
<Trans i18nKey="cart:table.total" /> <Trans i18nKey="cart:table.total" />
</TableHead> </TableHead>
<TableHead className="px-6"> <TableHead className="px-4 sm:px-6">
</TableHead> </TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>

20
app/home/(user)/_components/cart/discount-code.tsx
View File

@@ -69,11 +69,15 @@ export default function DiscountCode({ cart }: {
}); });
return ( return (
<div className="w-full bg-white flex flex-col txt-medium"> <div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:discountCode.subtitle'} />
</p>
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))} onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2" className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2 flex-1"
> >
<FormField <FormField
name={'code'} name={'code'}
@@ -89,14 +93,14 @@ export default function DiscountCode({ cart }: {
<Button <Button
type="submit" type="submit"
variant="secondary" variant="secondary"
className="h-full" className="h-min"
> >
<Trans i18nKey={'cart:discountCode.apply'} /> <Trans i18nKey={'cart:discountCode.apply'} />
</Button> </Button>
</form> </form>
</Form> </Form>
{promotions.length > 0 ? ( {promotions.length > 0 && (
<div className="w-full flex items-center mt-4"> <div className="w-full flex items-center mt-4">
<div className="flex flex-col w-full gap-y-2"> <div className="flex flex-col w-full gap-y-2">
<p> <p>
@@ -110,12 +114,12 @@ export default function DiscountCode({ cart }: {
className="flex items-center justify-between w-full max-w-full mb-2" className="flex items-center justify-between w-full max-w-full mb-2"
data-testid="discount-row" data-testid="discount-row"
> >
<Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1"> <Text className="flex gap-x-1 items-baseline text-sm w-4/5 pr-1">
<span className="truncate" data-testid="discount-code"> <span className="truncate" data-testid="discount-code">
<Badge <Badge
color={promotion.is_automatic ? "green" : "grey"} color={promotion.is_automatic ? "green" : "grey"}
size="small" size="small"
className="px-4" className="px-4 text-sm"
> >
{promotion.code} {promotion.code}
</Badge>{" "} </Badge>{" "}
@@ -166,10 +170,6 @@ export default function DiscountCode({ cart }: {
})} })}
</div> </div>
</div> </div>
) : (
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:discountCode.subtitle'} />
</p>
)} )}
</div> </div>
) )

30
app/home/(user)/_components/cart/index.tsx
View File

@@ -78,14 +78,14 @@ export default function Cart({
</div> </div>
{hasCartItems && ( {hasCartItems && (
<> <>
<div className="flex justify-end gap-x-4 px-6 pt-4"> <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 pt-2 sm:pt-4">
<div className="mr-[36px]"> <div className="w-full sm:w-auto sm:mr-[42px]">
<p className="ml-0 font-bold text-sm text-muted-foreground"> <p className="ml-0 font-bold text-sm text-muted-foreground">
<Trans i18nKey="cart:order.subtotal" /> <Trans i18nKey="cart:order.subtotal" />
</p> </p>
</div> </div>
<div className="mr-[116px]"> <div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-sm"> <p className="text-sm text-right">
{formatCurrency({ {formatCurrency({
value: cart.subtotal, value: cart.subtotal,
currencyCode: cart.currency_code, currencyCode: cart.currency_code,
@@ -94,14 +94,14 @@ export default function Cart({
</p> </p>
</div> </div>
</div> </div>
<div className="flex justify-end gap-x-4 px-6 py-2"> <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6 py-2 sm:py-4">
<div className="mr-[36px]"> <div className="w-full sm:w-auto sm:mr-[42px]">
<p className="ml-0 font-bold text-sm text-muted-foreground"> <p className="ml-0 font-bold text-sm text-muted-foreground">
<Trans i18nKey="cart:order.promotionsTotal" /> <Trans i18nKey="cart:order.promotionsTotal" />
</p> </p>
</div> </div>
<div className="mr-[116px]"> <div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-sm"> <p className="text-sm text-right">
{formatCurrency({ {formatCurrency({
value: cart.discount_total, value: cart.discount_total,
currencyCode: cart.currency_code, currencyCode: cart.currency_code,
@@ -110,14 +110,14 @@ export default function Cart({
</p> </p>
</div> </div>
</div> </div>
<div className="flex justify-end gap-x-4 px-6"> <div className="flex sm:justify-end gap-x-4 px-4 sm:px-6">
<div className="mr-[36px]"> <div className="w-full sm:w-auto sm:mr-[42px]">
<p className="ml-0 font-bold text-sm"> <p className="ml-0 font-bold text-sm">
<Trans i18nKey="cart:order.total" /> <Trans i18nKey="cart:order.total" />
</p> </p>
</div> </div>
<div className="mr-[116px]"> <div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-sm"> <p className="text-sm text-right">
{formatCurrency({ {formatCurrency({
value: cart.total, value: cart.total,
currencyCode: cart.currency_code, currencyCode: cart.currency_code,
@@ -129,7 +129,7 @@ export default function Cart({
</> </>
)} )}
<div className="flex sm:flex-row flex-col gap-y-6 py-8 gap-x-4"> <div className="flex sm:flex-row flex-col gap-y-6 py-4 sm:py-8 gap-x-4">
{IS_DISCOUNT_SHOWN && ( {IS_DISCOUNT_SHOWN && (
<Card <Card
className="flex flex-col justify-between w-full sm:w-1/2" className="flex flex-col justify-between w-full sm:w-1/2"
@@ -139,7 +139,7 @@ export default function Cart({
<Trans i18nKey="cart:discountCode.title" /> <Trans i18nKey="cart:discountCode.title" />
</h5> </h5>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="h-full">
<DiscountCode cart={{ ...cart }} /> <DiscountCode cart={{ ...cart }} />
</CardContent> </CardContent>
</Card> </Card>
@@ -154,7 +154,7 @@ export default function Cart({
<Trans i18nKey="cart:locations.title" /> <Trans i18nKey="cart:locations.title" />
</h5> </h5>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="h-full">
<AnalysisLocation cart={{ ...cart }} synlabAnalyses={synlabAnalyses} /> <AnalysisLocation cart={{ ...cart }} synlabAnalyses={synlabAnalyses} />
</CardContent> </CardContent>
</Card> </Card>