fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 01:39:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mobile style tweaks

Browse Source
This commit is contained in:
Henry Dollman
2024-08-04 13:58:18 -04:00
parent 2a3b228668
commit b05184a654
3 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
hub/site/src/components/routes/home.tsx
View File

@@ -9,24 +9,22 @@ export default function () {
}, [])
return (
<>
<Card>
<CardHeader className="pb-5">
<CardTitle className={'mb-1.5'}>All Systems</CardTitle>
<CardDescription>
Updated in real time. Press{' '}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">⌘</span>K
</kbd>{' '}
to open the command palette.
</CardDescription>
</CardHeader>
<CardContent>
<Suspense>
<SystemsTable />
</Suspense>
</CardContent>
</Card>
</>
<Card>
<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
<CardTitle className="mb-1.5">All Systems</CardTitle>
<CardDescription>
Updated in real time. Press{' '}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">⌘</span>K
</kbd>{' '}
to open the command palette.
</CardDescription>
</CardHeader>
<CardContent className="max-sm:p-2">
<Suspense>
<SystemsTable />
</Suspense>
</CardContent>
</Card>
)
}

13
hub/site/src/components/routes/system.tsx
View File

@@ -147,9 +147,7 @@ export default function ServerDetail({ name }: { name: string }) {
dockerMemData.push(memData)
dockerNetData.push(netData)
}
console.log('dockerCpuData', dockerCpuData)
// console.log('dockerMemData', dockerMemData)
console.log('dockerNetData', dockerNetData)
setDockerCpuChartData(dockerCpuData)
setDockerMemChartData(dockerMemData)
setDockerNetChartData(dockerNetData)
@@ -170,7 +168,7 @@ export default function ServerDetail({ name }: { name: string }) {
return (
<div className="grid gap-4 mb-10">
<Card>
<div className="grid gap-2 px-6 pt-4 pb-5">
<div className="grid gap-2 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
<h1 className="text-[1.6rem] font-semibold">{server.name}</h1>
<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
<div className="capitalize flex gap-2 items-center">
@@ -219,6 +217,7 @@ export default function ServerDetail({ name }: { name: string }) {
</>
)}
</div>
<ChartTimeSelect className="mt-2 -ml-1 sm:hidden" />
</div>
</Card>
@@ -279,15 +278,15 @@ function ChartCard({
children: React.ReactNode
}) {
return (
<Card className="pb-4 col-span-full">
<CardHeader className="pb-5 pt-4 relative space-y-1">
<Card className="pb-2 sm:pb-4 col-span-full">
<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
<div className="w-full pt-1 sm:w-40 sm:absolute top-1.5 right-3.5">
<div className="w-full pt-1 sm:w-40 hidden sm:block absolute top-1.5 right-3.5">
<ChartTimeSelect />
</div>
</CardHeader>
<CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}>
<CardContent className="pl-1 w-[calc(100%-1.6em)] h-52 relative">
<Suspense fallback={<Spinner />}>{children}</Suspense>
</CardContent>
</Card>

2
hub/site/src/main.tsx
View File

@@ -122,7 +122,7 @@ const Layout = () => {
return (
<>
<div className="container">
<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-4">
<div className="flex items-center h-14 md:h-16 bg-card px-6 border bt-0 rounded-md my-4">
<Link
href="/"
aria-label="Home"