mirror of
https://github.com/snowball-tools/snowballtools-base.git
synced 2024-12-22 20:47:44 +00:00
Merge pull request #161 from snowball-tools/ayungavis/T-4936-make-deployed-lines-responsive
[T-4936: style] Make deployed lines responsive
This commit is contained in:
commit
93fb696d5c
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Deployment,
|
Deployment,
|
||||||
DeploymentStatus,
|
DeploymentStatus,
|
||||||
@ -60,79 +60,97 @@ const DeploymentDetailsCard = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const renderDeploymentStatus = useCallback(
|
||||||
<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 ">
|
(className?: string) => {
|
||||||
<div className="flex-1 max-w-[30%] space-y-2">
|
return (
|
||||||
{/* DEPLOYMENT URL */}
|
<div className={className}>
|
||||||
{deployment.url && (
|
<Tag
|
||||||
<Heading
|
leftIcon={getIconByDeploymentStatus(deployment.status)}
|
||||||
className="text-sm font-medium text-elements-high-em tracking-tight"
|
size="xs"
|
||||||
as="h2"
|
type={STATUS_COLORS[deployment.status] ?? 'neutral'}
|
||||||
>
|
>
|
||||||
<OverflownText content={deployment.url}>
|
{deployment.status}
|
||||||
{deployment.url}
|
</Tag>
|
||||||
</OverflownText>
|
</div>
|
||||||
</Heading>
|
);
|
||||||
)}
|
},
|
||||||
<span className="text-sm text-elements-low-em tracking-tight">
|
[deployment.status, deployment.commitHash],
|
||||||
{deployment.environment === Environment.Production
|
);
|
||||||
? `Production ${deployment.isCurrent ? '(Current)' : ''}`
|
|
||||||
: 'Preview'}
|
return (
|
||||||
</span>
|
<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 relative">
|
||||||
|
<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-[90%] sm:max-w-full">
|
||||||
|
{/* DEPLOYMENT URL */}
|
||||||
|
{deployment.url && (
|
||||||
|
<Heading
|
||||||
|
className="text-sm font-medium text-elements-high-em tracking-tight"
|
||||||
|
as="h2"
|
||||||
|
>
|
||||||
|
<OverflownText content={deployment.url}>
|
||||||
|
{deployment.url}
|
||||||
|
</OverflownText>
|
||||||
|
</Heading>
|
||||||
|
)}
|
||||||
|
<span className="text-sm text-elements-low-em tracking-tight">
|
||||||
|
{deployment.environment === Environment.Production
|
||||||
|
? `Production ${deployment.isCurrent ? '(Current)' : ''}`
|
||||||
|
: 'Preview'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* DEPLOYMENT STATUS */}
|
{/* DEPLOYMENT STATUS */}
|
||||||
<div className="w-[10%] max-w-[110px]">
|
{renderDeploymentStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
|
||||||
<Tag
|
|
||||||
leftIcon={getIconByDeploymentStatus(deployment.status)}
|
|
||||||
size="xs"
|
|
||||||
type={STATUS_COLORS[deployment.status] ?? 'neutral'}
|
|
||||||
>
|
|
||||||
{deployment.status}
|
|
||||||
</Tag>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* DEPLOYMENT COMMIT DETAILS */}
|
{/* 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%]">
|
||||||
<span className="flex gap-1.5 items-center">
|
<div className="text-sm max-w-[60%] md:max-w-full space-y-2 w-full text-elements-low-em">
|
||||||
<BranchStrokeIcon className="h-4 w-4" />
|
<span className="flex gap-1.5 items-center">
|
||||||
{deployment.branch}
|
<BranchStrokeIcon className="h-4 w-4" />
|
||||||
</span>
|
<OverflownText content={deployment.branch}>
|
||||||
<span className="flex gap-2 items-center">
|
{deployment.branch}
|
||||||
<CommitIcon />
|
</OverflownText>
|
||||||
<OverflownText content={deployment.commitMessage}>
|
</span>
|
||||||
{deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
|
<span className="flex w-full gap-2 items-center">
|
||||||
{deployment.commitMessage}
|
<CommitIcon />
|
||||||
</OverflownText>
|
<OverflownText content={deployment.commitMessage}>
|
||||||
</span>
|
{deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
|
||||||
|
{deployment.commitMessage}
|
||||||
|
</OverflownText>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{renderDeploymentStatus('flex md:hidden h-fit')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* DEPLOYMENT INFOs */}
|
{/* 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="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 w-[70%] items-center gap-0.5 2xl:gap-2 flex-1">
|
<div className="flex md:w-[70%] xl:items-center gap-2 flex-1 xl:flex-row md:flex-col">
|
||||||
<ClockOutlineIcon className="h-4 w-4" />
|
<div className="flex gap-2 items-center">
|
||||||
<OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
|
<ClockOutlineIcon className="h-4 w-4" />
|
||||||
{relativeTimeMs(deployment.createdAt)}
|
<OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
|
||||||
</OverflownText>
|
{relativeTimeMs(deployment.createdAt)}
|
||||||
<div>
|
</OverflownText>
|
||||||
<Avatar
|
</div>
|
||||||
type="orange"
|
<div className="flex gap-2 items-center">
|
||||||
initials={getInitials(deployment.createdBy.name ?? '')}
|
<div>
|
||||||
className="lg:size-5 2xl:size-6"
|
<Avatar
|
||||||
// TODO: Add avatarUrl
|
type="orange"
|
||||||
// imageSrc={deployment.createdBy.avatarUrl}
|
initials={getInitials(deployment.createdBy.name ?? '')}
|
||||||
></Avatar>
|
className="lg:size-5 2xl:size-6"
|
||||||
|
// TODO: Add avatarUrl
|
||||||
|
// imageSrc={deployment.createdBy.avatarUrl}
|
||||||
|
></Avatar>
|
||||||
|
</div>
|
||||||
|
<OverflownText
|
||||||
|
content={formatAddress(deployment.createdBy?.name ?? '')}
|
||||||
|
>
|
||||||
|
{formatAddress(deployment.createdBy.name ?? '')}
|
||||||
|
</OverflownText>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<OverflownText
|
|
||||||
// className="min-w-[200px]"
|
|
||||||
content={formatAddress(deployment.createdBy?.name ?? '')}
|
|
||||||
>
|
|
||||||
{formatAddress(deployment.createdBy.name ?? '')}
|
|
||||||
</OverflownText>
|
|
||||||
</div>
|
</div>
|
||||||
<DeploymentMenu
|
<DeploymentMenu
|
||||||
className="ml-auto"
|
className="ml-auto md:static absolute top-4 right-0"
|
||||||
deployment={deployment}
|
deployment={deployment}
|
||||||
currentDeployment={currentDeployment}
|
currentDeployment={currentDeployment}
|
||||||
onUpdate={onUpdate}
|
onUpdate={onUpdate}
|
||||||
|
@ -75,7 +75,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="xl:grid xl:grid-cols-8 flex flex-col xl:gap-3 gap-0">
|
<div className="xl:grid xl:grid-cols-8 flex flex-col xl:gap-3 gap-3">
|
||||||
<div className="col-span-4 flex items-center">
|
<div className="col-span-4 flex items-center">
|
||||||
<Input
|
<Input
|
||||||
placeholder="Search branches"
|
placeholder="Search branches"
|
||||||
|
@ -36,11 +36,11 @@ export const tagTheme = tv(
|
|||||||
size: {
|
size: {
|
||||||
sm: {
|
sm: {
|
||||||
wrapper: ['px-2', 'py-2'],
|
wrapper: ['px-2', 'py-2'],
|
||||||
icon: ['h-4', 'w-4'],
|
icon: [],
|
||||||
},
|
},
|
||||||
xs: {
|
xs: {
|
||||||
wrapper: ['px-2', 'py-1'],
|
wrapper: ['px-2', 'py-1'],
|
||||||
icon: ['h-3', 'w-3'],
|
icon: [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user