💄 style(ui): Update mobile style

This commit is contained in:
web@ppanel 2024-11-15 14:30:52 +07:00
parent b023d0feff
commit eda18bc551
3 changed files with 9 additions and 12 deletions

View File

@ -1,6 +1,5 @@
import { Header } from '@/components/header';
import { SidebarLeft } from '@/components/sidebar-left';
import { ScrollArea } from '@shadcn/ui/scroll-area';
import { SidebarInset, SidebarProvider } from '@shadcn/ui/sidebar';
import { cookies } from 'next/headers';
@ -10,11 +9,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
return (
<SidebarProvider defaultOpen={defaultOpen}>
<SidebarLeft />
<SidebarInset className='flex-grow overflow-hidden'>
<SidebarInset className='relative flex-grow overflow-hidden'>
<Header />
<div className='flex h-[calc(100vh-56px)] flex-1 flex-col gap-4 p-4'>
<ScrollArea className='h-full flex-grow overflow-hidden'>{children}</ScrollArea>
</div>
<div className='h-[calc(100vh-56px)] gap-4 overflow-auto p-4'>{children}</div>
</SidebarInset>
</SidebarProvider>
);

View File

@ -76,11 +76,11 @@ export default function Purchase({
if (!open) setSubscribe(undefined);
}}
>
<DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none md:h-auto'>
<DialogHeader>
<DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none p-0 md:h-auto'>
<DialogHeader className='p-6 pb-0'>
<DialogTitle>{t('buySubscription')}</DialogTitle>
</DialogHeader>
<div className='grid w-full gap-3 lg:grid-cols-2'>
<div className='grid w-full flex-grow gap-3 overflow-auto p-6 pt-0 lg:grid-cols-2'>
<Card className='border-transparent shadow-none md:border-inherit md:shadow'>
<CardContent className='grid gap-3 p-0 text-sm md:p-6'>
<SubscribeDetail
@ -110,7 +110,7 @@ export default function Purchase({
quantity: Number(value),
});
}}
className='flex flex-wrap gap-2'
className='flex flex-wrap gap-0.5 *:w-20 md:gap-2'
>
<div className='relative'>
<RadioGroupItem value='1' id='1' className='peer sr-only' />
@ -154,7 +154,7 @@ export default function Purchase({
</div>
<div className='font-semibold'>{t('paymentMethod')}</div>
<RadioGroup
className='grid grid-cols-5 gap-2'
className='mb-6 grid grid-cols-5 gap-2'
value={params.payment}
onValueChange={(value) => {
setParams({

View File

@ -21,11 +21,11 @@ interface PaginationProps<TData> {
export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
return (
<div className='flex flex-wrap items-center justify-between gap-2'>
<div className='text-muted-foreground flex-1 whitespace-nowrap'>
<div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
{text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
`Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
</div>
<div className='flex items-center gap-2'>
<div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
<div className='flex items-center space-x-2'>
<p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
<Select