ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

dashboard recents 2 cols unless 2xl

Browse Source
This commit is contained in:
mbecker20
2024-05-20 22:46:21 -07:00
parent dd1fecf190
commit 2c65d924f9
6 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/resources/build/dashboard.tsx
View File

@@ -30,7 +30,7 @@ export const BuildDashboard = () => {
<Hammer className="w-4 h-4" /> <Hammer className="w-4 h-4" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="hidden xl:flex h-[200px] items-center justify-between gap-4"> <CardContent className="flex h-[200px] items-center justify-between gap-4">
<div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap"> <div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap">
<CardDescription className="flex items-center gap-2"> <CardDescription className="flex items-center gap-2">
<span <span

2
frontend/src/components/resources/deployment/dashboard.tsx
View File

@@ -30,7 +30,7 @@ export const DeploymentsChart = () => {
<Rocket className="w-4 h-4" /> <Rocket className="w-4 h-4" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="hidden xl:flex h-[200px] items-center justify-between gap-4"> <CardContent className="flex h-[200px] items-center justify-between gap-4">
<div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap"> <div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap">
<CardDescription className="flex items-center gap-2"> <CardDescription className="flex items-center gap-2">
<span <span

2
frontend/src/components/resources/procedure/dashboard.tsx
View File

@@ -30,7 +30,7 @@ export const ProcedureDashboard = () => {
<Route className="w-4 h-4" /> <Route className="w-4 h-4" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="hidden xl:flex h-[200px] items-center justify-between gap-4"> <CardContent className="flex h-[200px] items-center justify-between gap-4">
<div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap"> <div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap">
<CardDescription className="flex items-center gap-2"> <CardDescription className="flex items-center gap-2">
<span <span

2
frontend/src/components/resources/repo/dashboard.tsx
View File

@@ -30,7 +30,7 @@ export const RepoDashboard = () => {
<GitBranch className="w-4 h-4" /> <GitBranch className="w-4 h-4" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="hidden xl:flex h-[200px] items-center justify-between gap-4"> <CardContent className="flex h-[200px] items-center justify-between gap-4">
<div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap"> <div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap">
<CardDescription className="flex items-center gap-2"> <CardDescription className="flex items-center gap-2">
<span <span

2
frontend/src/components/resources/server/dashboard.tsx
View File

@@ -29,7 +29,7 @@ export const ServersChart = () => {
<Server className="w-4 h-4" /> <Server className="w-4 h-4" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="hidden xl:flex h-[200px] items-center justify-between"> <CardContent className="flex h-[200px] items-center justify-between">
<div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap"> <div className="flex flex-col gap-2 text-muted-foreground w-full text-nowrap">
<CardDescription className="flex items-center gap-2"> <CardDescription className="flex items-center gap-2">
<span <span

28
frontend/src/pages/home/dashboard.tsx
View File

@@ -5,7 +5,7 @@ import { ResourceName } from "@components/resources/common";
import { TagsWithBadge } from "@components/tags"; import { TagsWithBadge } from "@components/tags";
import { AllUpdates } from "@components/updates/resource"; import { AllUpdates } from "@components/updates/resource";
import { useRead, useUser } from "@lib/hooks"; import { useRead, useUser } from "@lib/hooks";
import { usableResourcePath } from "@lib/utils"; import { cn, usableResourcePath } from "@lib/utils";
import { UsableResource } from "@types"; import { UsableResource } from "@types";
import { Card } from "@ui/card"; import { Card } from "@ui/card";
import { Separator } from "@ui/separator"; import { Separator } from "@ui/separator";
@@ -56,9 +56,14 @@ const ResourceRow = ({ type }: { type: UsableResource }) => {
<History className="w-4 h-4" /> <History className="w-4 h-4" />
<h3>Recent {type}s</h3> <h3>Recent {type}s</h3>
</div> </div>
<div className="grid grid-cols-3 grid-rows-2 gap-4 w-full h-full"> <div className="grid grid-rows-2 grid-cols-2 2xl:grid-cols-3 gap-4 w-full h-full">
{ids.map((id: string) => ( {ids.map((id, i) => (
<RecentCard key={type + id} type={type} id={id} /> <RecentCard
key={type + id}
type={type}
id={id}
className={i > 3 && "hidden 2xl:block"}
/>
))} ))}
</div> </div>
</div> </div>
@@ -66,11 +71,22 @@ const ResourceRow = ({ type }: { type: UsableResource }) => {
); );
}; };
const RecentCard = ({ type, id }: { type: UsableResource; id: string }) => { const RecentCard = ({
type,
id,
className,
}: {
type: UsableResource;
id: string;
className: string | false;
}) => {
const Components = ResourceComponents[type]; const Components = ResourceComponents[type];
const tags = Components.list_item(id)?.tags; const tags = Components.list_item(id)?.tags;
return ( return (
<Link to={`${usableResourcePath(type)}/${id}`} className="h-full"> <Link
to={`${usableResourcePath(type)}/${id}`}
className={cn("h-full", className)}
>
<Card className="h-full px-6 py-4 flex flex-col justify-between hover:bg-accent/50 transition-colors cursor-pointer"> <Card className="h-full px-6 py-4 flex flex-col justify-between hover:bg-accent/50 transition-colors cursor-pointer">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">