github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-716] style: list view issues responsiveness (#3938)

Browse Source
This commit is contained in:
Ramesh Kumar Chandra 2024-03-12 12:29:00 +05:30 committed by GitHub
parent 578bd29f6f
commit 73c91654eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/components/issues/issue-layouts/list/block.tsx
View File

@ -44,53 +44,62 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return ( return (
<div <div
className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", { className={cn(
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id, "min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
"last:border-b-transparent": peekIssue?.issueId !== issue.id, {
})} "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id,
}
)}
> >
{displayProperties && displayProperties?.key && ( <div className="flex">
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300"> <div className="flex flex-grow items-center gap-3">
{projectIdentifier}-{issue.sequence_id} {displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id}
</div>
)}
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
{issue?.is_draft ? (
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
) : (
<ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/${
issue.archived_at ? "archived-issues" : "issues"
}/${issue.id}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</ControlLink>
)}
</div> </div>
)} {!issue?.tempId && (
<div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
{issue?.tempId !== undefined && ( )}
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" /> </div>
)} <div className="ml-0 md:ml-auto flex flex-wrap md:flex-shrink-0 items-center gap-2">
{issue?.is_draft ? (
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
) : (
<ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
issue.id
}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</ControlLink>
)}
<div className="ml-auto flex flex-shrink-0 items-center gap-2">
{!issue?.tempId ? ( {!issue?.tempId ? (
<> <>
<IssueProperties <IssueProperties
className="relative flex items-center gap-2 whitespace-nowrap" className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
issue={issue} issue={issue}
isReadOnly={!canEditIssueProperties} isReadOnly={!canEditIssueProperties}
updateIssue={updateIssue} updateIssue={updateIssue}
displayProperties={displayProperties} displayProperties={displayProperties}
activeLayout="List" activeLayout="List"
/> />
{quickActions(issue)} <div className="hidden md:block">{quickActions(issue)}</div>
</> </>
) : ( ) : (
<div className="h-4 w-4"> <div className="h-4 w-4">