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

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

@ -44,11 +44,16 @@ 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(
"min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && 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, "last:border-b-transparent": peekIssue?.issueId !== issue.id,
})} }
)}
> >
<div className="flex">
<div className="flex flex-grow items-center gap-3">
{displayProperties && displayProperties?.key && ( {displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300"> <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id} {projectIdentifier}-{issue.sequence_id}
@ -65,9 +70,9 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
</Tooltip> </Tooltip>
) : ( ) : (
<ControlLink <ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${ href={`/${workspaceSlug}/projects/${issue.project_id}/${
issue.id issue.archived_at ? "archived-issues" : "issues"
}`} }/${issue.id}`}
target="_blank" target="_blank"
onClick={() => handleIssuePeekOverview(issue)} onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
@ -78,19 +83,23 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
</Tooltip> </Tooltip>
</ControlLink> </ControlLink>
)} )}
</div>
<div className="ml-auto flex flex-shrink-0 items-center gap-2"> {!issue?.tempId && (
<div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
)}
</div>
<div className="ml-0 md:ml-auto flex flex-wrap md: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">