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

Merge pull request #961 from makeplane/style/issue_list_responsive

Browse Source 
style: responsive design for issue list in 'list' view
This commit is contained in:
guru_sainath 2023-04-28 10:49:54 +05:30 committed by GitHub
commit 6e5c85cd6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/app/components/core/list-view/single-issue.tsx
View File

@ -216,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <div
className="flex items-center justify-between gap-2 border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0" className="flex flex-wrap items-center justify-between gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu(true); setContextMenu(true);
@ -224,26 +224,28 @@ export const SingleListIssue: React.FC<Props> = ({
}} }}
> >
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2"> <div className="flex-grow cursor-pointer px-4 pt-2.5 md:py-2.5">
{properties.key && ( <a className="group relative flex items-center gap-2">
<Tooltip {properties.key && (
tooltipHeading="Issue ID" <Tooltip
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`} tooltipHeading="Issue ID"
> tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
<span className="flex-shrink-0 text-xs text-brand-secondary"> >
{issue.project_detail?.identifier}-{issue.sequence_id} <span className="flex-shrink-0 text-xs text-brand-secondary">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
</Tooltip>
)}
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-[0.825rem] text-brand-base">
{truncateText(issue.name, 50)}
</span> </span>
</Tooltip> </Tooltip>
)} </a>
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}> </div>
<span className="text-[0.825rem] text-brand-base">
{truncateText(issue.name, 50)}
</span>
</Tooltip>
</a>
</Link> </Link>
<div className="flex flex-wrap items-center gap-2 text-xs"> <div className="flex w-full flex-shrink flex-wrap items-center gap-2 px-4 pb-2.5 text-xs sm:w-auto md:px-0 md:py-2.5 md:pr-4">
{properties.priority && ( {properties.priority && (
<ViewPrioritySelect <ViewPrioritySelect
issue={issue} issue={issue}

4
apps/app/layouts/app-layout/app-header.tsx
View File

@ -9,8 +9,8 @@ type Props = {
}; };
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => ( const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
<div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4"> <div className="flex w-full flex-row flex-wrap items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<div className="block md:hidden"> <div className="block md:hidden">
<button <button
type="button" type="button"

9
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View File

@ -8,6 +8,8 @@ import projectService from "services/project.service";
import { ProjectAuthorizationWrapper } from "layouts/auth-layout"; import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// contexts // contexts
import { IssueViewContextProvider } from "contexts/issue-view.context"; import { IssueViewContextProvider } from "contexts/issue-view.context";
// helper
import { truncateText } from "helpers/string.helper";
// components // components
import { IssuesFilterView, IssuesView } from "components/core"; import { IssuesFilterView, IssuesView } from "components/core";
// ui // ui
@ -21,7 +23,6 @@ import type { NextPage } from "next";
import { PROJECT_DETAILS } from "constants/fetch-keys"; import { PROJECT_DETAILS } from "constants/fetch-keys";
const ProjectIssues: NextPage = () => { const ProjectIssues: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -38,7 +39,9 @@ const ProjectIssues: NextPage = () => {
breadcrumbs={ breadcrumbs={
<Breadcrumbs> <Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} /> <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Issues`} /> <BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Issues`}
/>
</Breadcrumbs> </Breadcrumbs>
} }
right={ right={
@ -51,7 +54,7 @@ const ProjectIssues: NextPage = () => {
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="h-4 w-4" />
Add Issue Add Issue
</PrimaryButton> </PrimaryButton>
</div> </div>