Skip to content

Commit cb20cc8

Browse files
zxh326zxh326
authored
update layout (#315)
* update layout Signed-off-by: Zzde <zhangxh1997@gmail.com> * fix Signed-off-by: Zzde <zhangxh1997@gmail.com> --------- Signed-off-by: Zzde <zhangxh1997@gmail.com>
1 parent 337d544 commit cb20cc8

File tree

5 files changed

+176
-176
lines changed

5 files changed

+176
-176
lines changed

‎ui/src/App.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,12 @@ function AppContent() {
6464
<>
6565
<SidebarProvider>
6666
<AppSidebar variant="inset" />
67-
<SidebarInset>
67+
<SidebarInset className="h-screen overflow-y-auto scrollbar-hide">
6868
<SiteHeader />
69-
<div className="flex flex-1 flex-col overflow-auto">
70-
<div className="@container/main flex flex-1 flex-col gap-2">
71-
<div className="flex flex-col gap-4 py-4 md:gap-6">
72-
<div className="px-4 lg:px-6">
73-
<Outlet />
74-
</div>
69+
<div className="@container/main">
70+
<div className="flex flex-col gap-4 py-4 md:gap-6">
71+
<div className="px-4 lg:px-6">
72+
<Outlet />
7573
</div>
7674
</div>
7775
</div>

‎ui/src/components/pod-file-browser.tsx‎

Lines changed: 107 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -123,16 +123,6 @@ export function PodFileBrowser({
123123
}
124124
}
125125

126-
if (error) {
127-
return (
128-
<ErrorMessage
129-
resourceName={'pod files'}
130-
error={error}
131-
refetch={refetch}
132-
/>
133-
)
134-
}
135-
136126
return (
137127
<div className="space-y-4">
138128
<div className="flex items-center gap-4">
@@ -205,114 +195,122 @@ export function PodFileBrowser({
205195
</div>
206196
</div>
207197

208-
<div className="border rounded-md min-w-full max-h-[calc(100dvh-250px)] overflow-y-auto overscroll-y-contain">
209-
<Table>
210-
<TableHeader>
211-
<TableRow>
212-
<TableHead className="w-[50px]"></TableHead>
213-
<TableHead>Name</TableHead>
214-
<TableHead className="w-[100px]">UID</TableHead>
215-
<TableHead className="w-[100px]">GID</TableHead>
216-
<TableHead className="w-[100px]">Size</TableHead>
217-
<TableHead className="w-[150px]">Mode</TableHead>
218-
<TableHead className="w-[200px]">Modified</TableHead>
219-
<TableHead className="w-[120px]">Actions</TableHead>
220-
</TableRow>
221-
</TableHeader>
222-
<TableBody>
223-
{isLoading ? (
224-
<TableRow>
225-
<TableCell colSpan={8} className="h-24 text-center">
226-
<div className="flex items-center justify-center gap-2">
227-
<IconLoader className="animate-spin" />
228-
<span>Loading files...</span>
229-
</div>
230-
</TableCell>
231-
</TableRow>
232-
) : (files ?? []).length === 0 ? (
198+
{error ? (
199+
<ErrorMessage
200+
resourceName={'pod files'}
201+
error={error}
202+
refetch={refetch}
203+
/>
204+
) : (
205+
<div className="border rounded-md min-w-full max-h-[calc(100dvh-250px)] overflow-y-auto overscroll-y-contain scrollbar-hide">
206+
<Table>
207+
<TableHeader>
233208
<TableRow>
234-
<TableCell colSpan={8} className="h-24 text-center">
235-
No files found
236-
</TableCell>
209+
<TableHead className="w-[50px]"></TableHead>
210+
<TableHead>Name</TableHead>
211+
<TableHead className="w-[100px]">UID</TableHead>
212+
<TableHead className="w-[100px]">GID</TableHead>
213+
<TableHead className="w-[100px]">Size</TableHead>
214+
<TableHead className="w-[150px]">Mode</TableHead>
215+
<TableHead className="w-[200px]">Modified</TableHead>
216+
<TableHead className="w-[120px]">Actions</TableHead>
237217
</TableRow>
238-
) : (
239-
files &&
240-
files.map((file) => (
241-
<TableRow key={file.name}>
242-
<TableCell>
243-
{file.isDir ? (
244-
<IconFolder className="w-4 h-4 text-blue-500" />
245-
) : (
246-
<IconFile className="w-4 h-4 text-gray-500" />
247-
)}
248-
</TableCell>
249-
<TableCell>
250-
{file.isDir ? (
251-
<Button
252-
variant="link"
253-
className="text-foreground font-medium hover:underline text-left p-0 h-auto"
254-
onClick={() => handleEnterDirectory(file.name)}
255-
aria-label={`Enter directory ${file.name}`}
256-
>
257-
{file.name}
258-
</Button>
259-
) : (
260-
<span>{file.name}</span>
261-
)}
262-
</TableCell>
263-
<TableCell className="font-mono text-xs">
264-
{file.uid}
265-
</TableCell>
266-
<TableCell className="font-mono text-xs">
267-
{file.gid}
268-
</TableCell>
269-
<TableCell className="font-mono text-xs">
270-
{file.size}
271-
</TableCell>
272-
<TableCell className="font-mono text-xs">
273-
{file.mode}
218+
</TableHeader>
219+
<TableBody>
220+
{isLoading ? (
221+
<TableRow>
222+
<TableCell colSpan={8} className="h-24 text-center">
223+
<div className="flex items-center justify-center gap-2">
224+
<IconLoader className="animate-spin" />
225+
<span>Loading files...</span>
226+
</div>
274227
</TableCell>
275-
<TableCell className="text-xs text-muted-foreground">
276-
{file.modTime}
228+
</TableRow>
229+
) : (files ?? []).length === 0 ? (
230+
<TableRow>
231+
<TableCell colSpan={8} className="h-24 text-center">
232+
No files found
277233
</TableCell>
278-
<TableCell>
279-
<div className="flex items-center gap-1">
280-
{!file.isDir && (
234+
</TableRow>
235+
) : (
236+
files &&
237+
files.map((file) => (
238+
<TableRow key={file.name}>
239+
<TableCell>
240+
{file.isDir ? (
241+
<IconFolder className="w-4 h-4 text-blue-500" />
242+
) : (
243+
<IconFile className="w-4 h-4 text-gray-500" />
244+
)}
245+
</TableCell>
246+
<TableCell>
247+
{file.isDir ? (
248+
<Button
249+
variant="link"
250+
className="text-foreground font-medium hover:underline text-left p-0 h-auto"
251+
onClick={() => handleEnterDirectory(file.name)}
252+
aria-label={`Enter directory ${file.name}`}
253+
>
254+
{file.name}
255+
</Button>
256+
) : (
257+
<span>{file.name}</span>
258+
)}
259+
</TableCell>
260+
<TableCell className="font-mono text-xs">
261+
{file.uid}
262+
</TableCell>
263+
<TableCell className="font-mono text-xs">
264+
{file.gid}
265+
</TableCell>
266+
<TableCell className="font-mono text-xs">
267+
{file.size}
268+
</TableCell>
269+
<TableCell className="font-mono text-xs">
270+
{file.mode}
271+
</TableCell>
272+
<TableCell className="text-xs text-muted-foreground">
273+
{file.modTime}
274+
</TableCell>
275+
<TableCell>
276+
<div className="flex items-center gap-1">
277+
{!file.isDir && (
278+
<Button
279+
variant="ghost"
280+
size="sm"
281+
title="Preview file"
282+
aria-label="Preview file"
283+
onClick={() => handlePreview(file.name)}
284+
>
285+
<IconEye className="w-4 h-4" />
286+
</Button>
287+
)}
281288
<Button
282289
variant="ghost"
283290
size="sm"
284-
title="Preview file"
285-
aria-label="Preview file"
286-
onClick={() => handlePreview(file.name)}
291+
title={
292+
file.isDir
293+
? 'Download directory as .tar archive'
294+
: 'Download file'
295+
}
296+
aria-label={
297+
file.isDir
298+
? 'Download directory as .tar archive'
299+
: 'Download file'
300+
}
301+
onClick={() => handleDownload(file.name)}
287302
>
288-
<IconEye className="w-4 h-4" />
303+
<IconDownload className="w-4 h-4" />
289304
</Button>
290-
)}
291-
<Button
292-
variant="ghost"
293-
size="sm"
294-
title={
295-
file.isDir
296-
? 'Download directory as .tar archive'
297-
: 'Download file'
298-
}
299-
aria-label={
300-
file.isDir
301-
? 'Download directory as .tar archive'
302-
: 'Download file'
303-
}
304-
onClick={() => handleDownload(file.name)}
305-
>
306-
<IconDownload className="w-4 h-4" />
307-
</Button>
308-
</div>
309-
</TableCell>
310-
</TableRow>
311-
))
312-
)}
313-
</TableBody>
314-
</Table>
315-
</div>
305+
</div>
306+
</TableCell>
307+
</TableRow>
308+
))
309+
)}
310+
</TableBody>
311+
</Table>
312+
</div>
313+
)}
316314
</div>
317315
)
318316
}

0 commit comments

Comments
 (0)