mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
fix: improve domains page UX and button placement consistency
This commit is contained in:
parent
dc9a194bbe
commit
777980618f
@ -7,7 +7,6 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { api } from "@/utils/api";
|
||||
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@ -74,26 +73,25 @@ export const ShowDomains = ({ applicationId }: Props) => {
|
||||
return (
|
||||
<div
|
||||
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
|
||||
className="md:basis-1/2 flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full"
|
||||
target="_blank"
|
||||
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>
|
||||
|
||||
<Input disabled value={item.host} />
|
||||
<Button variant="outline" disabled>
|
||||
{item.path}
|
||||
</Button>
|
||||
<Button variant="outline" disabled>
|
||||
{item.port}
|
||||
</Button>
|
||||
<Button variant="outline" disabled>
|
||||
{item.https ? "HTTPS" : "HTTP"}
|
||||
</Button>
|
||||
<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">
|
||||
<AddDomain
|
||||
applicationId={applicationId}
|
||||
domainId={item.domainId}
|
||||
@ -114,7 +112,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
|
||||
await deleteDomain({
|
||||
domainId: item.domainId,
|
||||
})
|
||||
.then((data) => {
|
||||
.then(() => {
|
||||
refetch();
|
||||
toast.success("Domain deleted successfully");
|
||||
})
|
||||
@ -134,6 +132,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
|
||||
</DialogAction>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
@ -7,7 +7,6 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { api } from "@/utils/api";
|
||||
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@ -74,25 +73,31 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
|
||||
return (
|
||||
<div
|
||||
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}`}>
|
||||
<ExternalLink className="size-5" />
|
||||
</Link>
|
||||
<Button variant="outline" disabled>
|
||||
<div className="md:basis-1/2 flex gap-6 w-full items-center">
|
||||
<span className="opacity-50 text-center font-medium text-sm">
|
||||
{item.serviceName}
|
||||
</Button>
|
||||
<Input disabled value={item.host} />
|
||||
<Button variant="outline" disabled>
|
||||
{item.path}
|
||||
</Button>
|
||||
<Button variant="outline" disabled>
|
||||
{item.port}
|
||||
</Button>
|
||||
<Button variant="outline" disabled>
|
||||
{item.https ? "HTTPS" : "HTTP"}
|
||||
</Button>
|
||||
<div className="flex flex-row gap-1">
|
||||
</span>
|
||||
|
||||
<Link
|
||||
className="flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
|
||||
target="_blank"
|
||||
href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
|
||||
>
|
||||
<span className="truncate ">{item.host}</span>
|
||||
<ExternalLink className="size-4 min-w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<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
|
||||
composeId={composeId}
|
||||
domainId={item.domainId}
|
||||
@ -133,6 +138,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
|
||||
</DialogAction>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user