schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: improve mobile display for tianji

Browse Source
This commit is contained in:
moonrailgun 2024-06-13 21:03:35 +08:00
parent cae0c1d6c0
commit e9a1b61a7f
4 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/DataTable.tsx
View File

@ -112,7 +112,7 @@ export function DataTable<TData>({
)}
{row.getVisibleCells().map((cell, i) => (
<TableCell key={cell.id}>
<TableCell key={cell.id} className="text-nowrap">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()

27
src/client/components/layout/Menu.tsx
View File

@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useRouterState } from '@tanstack/react-router';
import { useWatch } from '@/hooks/useWatch';
import { cn } from '@/utils/style';
export const MobileLayoutMenu: React.FC<{
list?: React.ReactNode;
@ -16,21 +17,19 @@ export const MobileLayoutMenu: React.FC<{
setOpen(false);
});
if (!props.list) {
return <div />;
}
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger>
<Button variant="outline" size="icon">
<LuMenu />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-11/12">
<ScrollArea className="h-full">{props.list}</ScrollArea>
</SheetContent>
</Sheet>
<div className={cn(props.list ? 'opacity-100' : 'opacity-0')}>
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger>
<Button variant="outline" size="icon">
<LuMenu />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-11/12">
<ScrollArea className="h-full">{props.list}</ScrollArea>
</SheetContent>
</Sheet>
</div>
);
});
MobileLayoutMenu.displayName = 'MobileLayoutMenu';

2
src/client/components/monitor/StatusPage/index.tsx
View File

@ -106,7 +106,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
<div
className={clsx(
'mx-auto overflow-auto px-4 py-8',
!editMode ? 'w-4/5' : 'w-2/3'
!editMode ? 'w-4/5 sm:w-full' : 'w-2/3'
)}
>
<div className="flex">

25
src/client/routes/page/add.tsx
View File

@ -10,6 +10,7 @@ import {
MonitorStatusPageEditForm,
MonitorStatusPageEditFormValues,
} from '@/components/monitor/StatusPage/EditForm';
import { ScrollArea } from '@/components/ui/scroll-area';
export const Route = createFileRoute('/page/add')({
beforeLoad: routeAuthBeforeLoad,
@ -47,17 +48,19 @@ function PageAddComponent() {
<CommonWrapper
header={<h1 className="text-xl font-bold">{t('Add Page')}</h1>}
>
<div className="p-4">
<Card>
<CardContent className="pt-4">
<MonitorStatusPageEditForm
saveButtonLabel="Next"
isLoading={createPageMutation.isLoading}
onFinish={handleSubmit}
/>
</CardContent>
</Card>
</div>
<ScrollArea className="h-full">
<div className="p-4">
<Card>
<CardContent className="pt-4">
<MonitorStatusPageEditForm
saveButtonLabel="Next"
isLoading={createPageMutation.isLoading}
onFinish={handleSubmit}
/>
</CardContent>
</Card>
</div>
</ScrollArea>
</CommonWrapper>
);
}