cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🎨 style: adjust responsive for deployment details card

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-08 09:58:26 +07:00
parent 6d861c71cc
commit c6ea3a8f53
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 102 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useCallback } from 'react';
import {
Deployment,
DeploymentStatus,
@ -60,9 +60,43 @@ const DeploymentDetailsCard = ({
}
};
const renderDeploymentMenu = useCallback(
(className?: string) => {
return (
<div className="flex lg:flex gap-2 lg:gap-2 2xl:gap-6 py-4 px-3 pb-6 mb-2 last:mb-0 last:pb-4 border-b border-border-separator last:border-b-transparent ">
<div className="flex-1 max-w-[30%] space-y-2">
<DeploymentMenu
className={className}
deployment={deployment}
currentDeployment={currentDeployment}
onUpdate={onUpdate}
project={project}
prodBranchDomains={prodBranchDomains}
/>
);
},
[deployment, currentDeployment, onUpdate, project, prodBranchDomains],
);
const renderDeploymentStatus = useCallback(
(className?: string) => {
return (
<div className={className}>
<Tag
leftIcon={getIconByDeploymentStatus(deployment.status)}
size="xs"
type={STATUS_COLORS[deployment.status] ?? 'neutral'}
>
{deployment.status}
</Tag>
</div>
);
},
[deployment.status, deployment.commitHash],
);
return (
<div className="flex md:flex-row flex-col gap-6 py-4 px-3 pb-6 mb-2 last:mb-0 last:pb-4 border-b border-border-separator last:border-b-transparent">
<div className="flex-1 flex justify-between w-full md:max-w-[25%] lg:max-w-[28%]">
<div className="flex-1 w-full space-y-2 max-w-[80%] sm:max-w-full">
{/* DEPLOYMENT URL */}
{deployment.url && (
<Heading
@ -80,25 +114,23 @@ const DeploymentDetailsCard = ({
: 'Preview'}
</span>
</div>
{/* DEPLOYMENT STATUS */}
<div className="w-[10%] max-w-[110px]">
<Tag
leftIcon={getIconByDeploymentStatus(deployment.status)}
size="xs"
type={STATUS_COLORS[deployment.status] ?? 'neutral'}
>
{deployment.status}
</Tag>
{/* MENU ON MOBILE */}
{renderDeploymentMenu('flex md:hidden ml-auto')}
</div>
{/* DEPLOYMENT STATUS */}
{renderDeploymentStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
{/* DEPLOYMENT COMMIT DETAILS */}
<div className="text-sm w-[25%] space-y-2 text-elements-low-em">
<div className="flex w-full justify-between md:w-[25%]">
<div className="text-sm max-w-[60%] md:max-w-full space-y-2 w-full text-elements-low-em">
<span className="flex gap-1.5 items-center">
<BranchStrokeIcon className="h-4 w-4" />
<OverflownText content={deployment.branch}>
{deployment.branch}
</OverflownText>
</span>
<span className="flex gap-2 items-center">
<span className="flex w-full gap-2 items-center">
<CommitIcon />
<OverflownText content={deployment.commitMessage}>
{deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
@ -106,14 +138,19 @@ const DeploymentDetailsCard = ({
</OverflownText>
</span>
</div>
{renderDeploymentStatus('flex md:hidden h-fit')}
</div>
{/* DEPLOYMENT INFOs */}
<div className="ml-auto max-w-[312px] w-[30%] gap-1 2xl:gap-5 flex items-center justify-between text-elements-low-em text-sm">
<div className="flex w-[70%] items-center gap-0.5 2xl:gap-2 flex-1">
<div className="md:ml-auto w-full md:max-w-[312px] md:w-[30%] gap-1 2xl:gap-5 flex items-center justify-between text-elements-low-em text-sm">
<div className="flex md:w-[70%] xl:items-center gap-2 flex-1 xl:flex-row md:flex-col">
<div className="flex gap-2 items-center">
<ClockOutlineIcon className="h-4 w-4" />
<OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
{relativeTimeMs(deployment.createdAt)}
</OverflownText>
</div>
<div className="flex gap-2 items-center">
<div>
<Avatar
type="orange"
@ -123,22 +160,14 @@ const DeploymentDetailsCard = ({
// imageSrc={deployment.createdBy.avatarUrl}
></Avatar>
</div>
<OverflownText
// className="min-w-[200px]"
content={formatAddress(deployment.createdBy?.name ?? '')}
>
{formatAddress(deployment.createdBy.name ?? '')}
</OverflownText>
</div>
<DeploymentMenu
className="ml-auto"
deployment={deployment}
currentDeployment={currentDeployment}
onUpdate={onUpdate}
project={project}
prodBranchDomains={prodBranchDomains}
/>
</div>
{renderDeploymentMenu('ml-auto hidden md:flex')}
</div>
</div>
);