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

Merge pull request #1249 from ali-issa/fix/domains-page-ux-improvements

Browse Source 
fix: improve domains page UX and button placement consistency
This commit is contained in:
Mauricio Siu
2025-02-01 13:32:45 -06:00
committed by GitHub
parent 79c6b7389c cd1c7e60bf
commit f14ed5170d
2 changed files with 109 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
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,27 @@ 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 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 text-sm">
{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 +114,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 +134,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 whitespace-nowrap">
</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 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 text-sm">{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>