Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: improve domains page UX and button placement consistency

Browse Source
This commit is contained in:
Ali Issa
2025-01-31 02:59:23 -05:00
parent dc9a194bbe
commit 777980618f
2 changed files with 107 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/dokploy/components/dashboard/application/domains/show-domains.tsx
View File

@@ -7,7 +7,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react"; import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@@ -74,26 +73,25 @@ export const ShowDomains = ({ applicationId }: Props) => {
return ( return (
<div <div
key={item.domainId} key={item.domainId}
className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg" className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
> >
<Link <Link
className="md:basis-1/2 flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full"
target="_blank" target="_blank"
href={`${item.https ? "https" : "http"}://${item.host}${item.path}`} href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
> >
<ExternalLink className="size-5" /> <span className="truncate max-w-full">{item.host}</span>
<ExternalLink className="size-4 min-w-4" />
</Link> </Link>
<Input disabled value={item.host} /> <div className="flex gap-8">
<Button variant="outline" disabled> <div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
{item.path} <span>{item.path}</span>
</Button> <span>{item.port}</span>
<Button variant="outline" disabled> <span>{item.https ? "HTTPS" : "HTTP"}</span>
{item.port} </div>
</Button>
<Button variant="outline" disabled> <div className="flex gap-2">
{item.https ? "HTTPS" : "HTTP"}
</Button>
<div className="flex flex-row gap-1">
<AddDomain <AddDomain
applicationId={applicationId} applicationId={applicationId}
domainId={item.domainId} domainId={item.domainId}
@@ -114,7 +112,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
await deleteDomain({ await deleteDomain({
domainId: item.domainId, domainId: item.domainId,
}) })
.then((data) => { .then(() => {
refetch(); refetch();
toast.success("Domain deleted successfully"); toast.success("Domain deleted successfully");
}) })
@@ -134,6 +132,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
</DialogAction> </DialogAction>
</div> </div>
</div> </div>
</div>
); );
})} })}
</div> </div>

42
apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
View File

@@ -7,7 +7,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react"; import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@@ -74,25 +73,31 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
return ( return (
<div <div
key={item.domainId} key={item.domainId}
className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg" className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
> >
<Link target="_blank" href={`http://${item.host}`}> <div className="md:basis-1/2 flex gap-6 w-full items-center">
<ExternalLink className="size-5" /> <span className="opacity-50 text-center font-medium text-sm">
</Link>
<Button variant="outline" disabled>
{item.serviceName} {item.serviceName}
</Button> </span>
<Input disabled value={item.host} />
<Button variant="outline" disabled> <Link
{item.path} className="flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
</Button> target="_blank"
<Button variant="outline" disabled> href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
{item.port} >
</Button> <span className="truncate ">{item.host}</span>
<Button variant="outline" disabled> <ExternalLink className="size-4 min-w-4" />
{item.https ? "HTTPS" : "HTTP"} </Link>
</Button> </div>
<div className="flex flex-row gap-1">
<div className="flex gap-8">
<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
<span>{item.path}</span>
<span>{item.port}</span>
<span>{item.https ? "HTTPS" : "HTTP"}</span>
</div>
<div className="flex gap-2">
<AddDomainCompose <AddDomainCompose
composeId={composeId} composeId={composeId}
domainId={item.domainId} domainId={item.domainId}
@@ -133,6 +138,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
</DialogAction> </DialogAction>
</div> </div>
</div> </div>
</div>
); );
})} })}
</div> </div>