jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-09 22:41:50 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

hub(ui): style cleanup and mobile improvements

Browse Source
This commit is contained in:
henrygd
2026-03-27 12:26:00 -04:00
parent 3f4c3d51b6
commit c7261b56f1
12 changed files with 67 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
internal/site/src/components/charts/hooks.ts
View File

@@ -99,9 +99,9 @@ export function useYAxisWidth() {
clearTimeout(timeout) clearTimeout(timeout)
timeout = setTimeout(() => { timeout = setTimeout(() => {
document.body.appendChild(div) document.body.appendChild(div)
const width = div.offsetWidth + 24 const width = div.offsetWidth + 20
if (width > yAxisWidth) { if (width > yAxisWidth) {
setYAxisWidth(div.offsetWidth + 24) setYAxisWidth(width)
} }
document.body.removeChild(div) document.body.removeChild(div)
}) })

6
internal/site/src/components/containers-table/containers-table.tsx
View File

@@ -163,9 +163,9 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
const visibleColumns = table.getVisibleLeafColumns() const visibleColumns = table.getVisibleLeafColumns()
return ( return (
<Card className="p-6 @container w-full"> <Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
<CardHeader className="p-0 mb-4"> <CardHeader className="p-0 mb-3 sm:mb-4">
<div className="grid md:flex gap-5 w-full items-end"> <div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
<div className="px-2 sm:px-1"> <div className="px-2 sm:px-1">
<CardTitle className="mb-2"> <CardTitle className="mb-2">
<Trans>All Containers</Trans> <Trans>All Containers</Trans>

5
internal/site/src/components/navbar.tsx
View File

@@ -95,7 +95,10 @@ export default function Navbar() {
<DropdownMenuLabel className="max-w-40 truncate">{pb.authStore.record?.email}</DropdownMenuLabel> <DropdownMenuLabel className="max-w-40 truncate">{pb.authStore.record?.email}</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem onClick={() => navigate(getPagePath($router, "home"))} className="flex items-center"> <DropdownMenuItem
onClick={() => navigate(getPagePath($router, "containers"))}
className="flex items-center"
>
<ContainerIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} /> <ContainerIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
<Trans>All Containers</Trans> <Trans>All Containers</Trans>
</DropdownMenuItem> </DropdownMenuItem>

14
internal/site/src/components/routes/system/chart-card.tsx
View File

@@ -107,15 +107,19 @@ export function ChartCard({
return ( return (
<Card <Card
className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full min-h-full", { "col-span-full": !grid }, className)} className={cn(
"px-3 py-5 sm:py-6 sm:px-6 odd:last-of-type:col-span-full min-h-full",
{ "col-span-full": !grid },
className
)}
ref={ref} ref={ref}
> >
<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4"> <CardHeader className="gap-1.5 relative p-0 mb-3 sm:mb-4">
<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle> <CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
{cornerEl && <div className="py-1 grid sm:justify-end sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>} {cornerEl && <div className="grid sm:justify-end sm:absolute sm:top-0 sm:end-0 my-1 sm:my-0">{cornerEl}</div>}
</CardHeader> </CardHeader>
<div className={cn("ps-0 w-[calc(100%-1.3em)] relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}> <div className={cn("ps-0 -me-1 -ms-3.5 relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}>
{ {
<Spinner <Spinner
msg={empty ? t`Waiting for enough records to display` : undefined} msg={empty ? t`Waiting for enough records to display` : undefined}

2
internal/site/src/components/routes/system/cpu-sheet.tsx
View File

@@ -111,7 +111,7 @@ export default memo(function CpuCoresSheet({
title={t`View more`} title={t`View more`}
variant="outline" variant="outline"
size="icon" size="icon"
className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3" className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
> >
<MoreHorizontalIcon /> <MoreHorizontalIcon />
</Button> </Button>

8
internal/site/src/components/routes/system/info-bar.tsx
View File

@@ -135,10 +135,10 @@ export default function InfoBar({
return ( return (
<Card> <Card>
<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5"> <div className="grid xl:flex xl:gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
<div> <div className="min-w-0">
<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1> <h1 className="text-2xl sm:text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90"> <div className="flex xl:flex-wrap items-center py-4 xl:p-0 -mt-3 xl:mt-1 gap-3 text-sm text-nowrap opacity-90 overflow-x-auto scrollbar-hide -mx-4 px-4 xl:mx-0">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="capitalize flex gap-2 items-center"> <div className="capitalize flex gap-2 items-center">

2
internal/site/src/components/routes/system/network-sheet.tsx
View File

@@ -46,7 +46,7 @@ export default memo(function NetworkSheet({
title={t`View more`} title={t`View more`}
variant="outline" variant="outline"
size="icon" size="icon"
className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3" className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
> >
<MoreHorizontalIcon /> <MoreHorizontalIcon />
</Button> </Button>

6
internal/site/src/components/routes/system/smart-table.tsx
View File

@@ -532,9 +532,9 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
return ( return (
<div> <div>
<Card className="p-6 @container w-full"> <Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
<CardHeader className="p-0 mb-4"> <CardHeader className="p-0 mb-3 sm:mb-4">
<div className="grid md:flex gap-5 w-full items-end"> <div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
<div className="px-2 sm:px-1"> <div className="px-2 sm:px-1">
<CardTitle className="mb-2">S.M.A.R.T.</CardTitle> <CardTitle className="mb-2">S.M.A.R.T.</CardTitle>
<CardDescription className="flex"> <CardDescription className="flex">

46
internal/site/src/components/systems-table/systems-table.tsx
View File

@@ -134,8 +134,8 @@ export default function SystemsTable() {
const CardHead = useMemo(() => { const CardHead = useMemo(() => {
return ( return (
<CardHeader className="pb-4.5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1"> <CardHeader className="p-0 mb-3 sm:mb-4">
<div className="grid md:flex gap-5 w-full items-end"> <div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
<div className="px-2 sm:px-1"> <div className="px-2 sm:px-1">
<CardTitle className="mb-2"> <CardTitle className="mb-2">
<Trans>All Systems</Trans> <Trans>All Systems</Trans>
@@ -302,29 +302,27 @@ export default function SystemsTable() {
]) ])
return ( return (
<Card> <Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
{CardHead} {CardHead}
<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2"> {viewMode === "table" ? (
{viewMode === "table" ? ( // table layout
// table layout <div className="rounded-md">
<div className="rounded-md"> <AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} /> </div>
</div> ) : (
) : ( // grid layout
// grid layout <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"> {rows?.length ? (
{rows?.length ? ( rows.map((row) => {
rows.map((row) => { return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} /> })
}) ) : (
) : ( <div className="col-span-full text-center py-8">
<div className="col-span-full text-center py-8"> <Trans>No systems found.</Trans>
<Trans>No systems found.</Trans> </div>
</div> )}
)} </div>
</div> )}
)}
</div>
</Card> </Card>
) )
} }

6
internal/site/src/components/ui/card.tsx
View File

@@ -18,7 +18,11 @@ CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => ( ({ className, ...props }, ref) => (
<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} /> <h3
ref={ref}
className={cn("text-[1.4em] sm:text-2xl font-semibold leading-none tracking-tight", className)}
{...props}
/>
) )
) )
CardTitle.displayName = "CardTitle" CardTitle.displayName = "CardTitle"

10
internal/site/src/components/ui/dropdown-menu.tsx
View File

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
ref={ref} ref={ref}
className={cn( className={cn(
"flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70", "flex select-none items-center rounded-sm px-2.5 py-1.5 text-[.95em] outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
inset && "ps-8", inset && "ps-8",
className className
)} )}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "ps-8", inset && "ps-8",
className className
)} )}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className className
)} )}
checked={checked} checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className className
)} )}
{...props} {...props}
@@ -141,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => ( >(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
ref={ref} ref={ref}
className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "ps-8", className)} className={cn("px-2.5 py-1.5 text-[.95em] font-semibold", inset && "ps-8", className)}
{...props} {...props}
/> />
)) ))

8
internal/site/src/index.css
View File

@@ -169,6 +169,14 @@
min-width: 30.3rem; min-width: 30.3rem;
} }
@utility scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.recharts-tooltip-wrapper { .recharts-tooltip-wrapper {
z-index: 51; z-index: 51;
@apply tabular-nums; @apply tabular-nums;