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 (
<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
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
value={form.watch('locationId')}
@@ -106,11 +110,6 @@ export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: Store
</p>
</div>
)}
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:locations.description'} />
</p>
</div>
)
}

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

@@ -17,7 +17,7 @@ export default function CartItem({ item, currencyCode }: {
return (
<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
className="txt-medium-plus text-ui-fg-base"
data-testid="product-title"
@@ -26,11 +26,11 @@ export default function CartItem({ item, currencyCode }: {
</p>
</TableCell>
<TableCell className="px-6">
<TableCell className="px-4 sm:px-6">
{item.quantity}
</TableCell>
<TableCell className="min-w-[80px] px-6">
<TableCell className="min-w-[80px] px-4 sm:px-6">
{formatCurrency({
value: item.unit_price,
currencyCode,
@@ -38,7 +38,7 @@ export default function CartItem({ item, currencyCode }: {
})}
</TableCell>
<TableCell className="min-w-[80px] px-6">
<TableCell className="min-w-[80px] px-4 sm:px-6 text-right">
{formatCurrency({
value: item.total,
currencyCode,
@@ -46,7 +46,7 @@ export default function CartItem({ item, currencyCode }: {
})}
</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]">
<CartItemDelete id={item.id} />
</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">
<TableHeader className="text-ui-fg-subtle txt-medium-plus">
<TableRow>
<TableHead className="px-6">
<TableHead className="px-4 sm:px-6">
<Trans i18nKey={productColumnLabelKey} />
</TableHead>
<TableHead className="px-6">
<TableHead className="px-4 sm:px-6">
<Trans i18nKey="cart:table.quantity" />
</TableHead>
<TableHead className="px-6 min-w-[100px]">
<TableHead className="px-4 sm:px-6 min-w-[100px]">
<Trans i18nKey="cart:table.price" />
</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" />
</TableHead>
<TableHead className="px-6">
<TableHead className="px-4 sm:px-6">
</TableHead>
</TableRow>
</TableHeader>

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

@@ -69,11 +69,15 @@ export default function DiscountCode({ cart }: {
});
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
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
name={'code'}
@@ -89,14 +93,14 @@ export default function DiscountCode({ cart }: {
<Button
type="submit"
variant="secondary"
className="h-full"
className="h-min"
>
<Trans i18nKey={'cart:discountCode.apply'} />
</Button>
</form>
</Form>
{promotions.length > 0 ? (
{promotions.length > 0 && (
<div className="w-full flex items-center mt-4">
<div className="flex flex-col w-full gap-y-2">
<p>
@@ -110,12 +114,12 @@ export default function DiscountCode({ cart }: {
className="flex items-center justify-between w-full max-w-full mb-2"
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">
<Badge
color={promotion.is_automatic ? "green" : "grey"}
size="small"
className="px-4"
className="px-4 text-sm"
>
{promotion.code}
</Badge>{" "}
@@ -166,10 +170,6 @@ export default function DiscountCode({ cart }: {
})}
</div>
</div>
) : (
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:discountCode.subtitle'} />
</p>
)}
</div>
)

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

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