binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: responsive title (#1683)

Browse source 
* style: responsive issue title added

* style: responsive breadcrumbs and app-header layout

* style: breadcrumbs styling

* fix: app header dropdown issue and limit app header title to 32 characters
This commit is contained in:
Anmol Singh Bhatia 2023-07-31 17:22:48 +05:30 • committed by GitHub
parent 81b1405448
commit e8f748a67d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 155 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
View file

@ -23,6 +23,8 @@ import { IIssue } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues = {
name: "",
@ -146,13 +148,15 @@ const ArchivedIssueDetailsPage: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
linkTruncate
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
issueDetails?.sequence_id ?? "..."
} Details`}
unshrinkTitle
/>
</Breadcrumbs>
}

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
View file

@ -4,6 +4,8 @@ import useSWR from "swr";
// services
import projectService from "services/project.service";
// hooks
import useIssuesView from "hooks/use-issues-view";
// layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// contexts
@ -21,8 +23,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS } from "constants/fetch-keys";
import useIssuesView from "hooks/use-issues-view";
import { useEffect } from "react";
const ProjectArchivedIssues: NextPage = () => {
const router = useRouter();
@ -44,7 +44,7 @@ const ProjectArchivedIssues: NextPage = () => {
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Archived Issues`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`}
/>
</Breadcrumbs>
}

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View file

@ -109,8 +109,9 @@ const SingleCycle: React.FC = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${cycleDetails?.project_detail.name ?? "Project"} Cycles`}
title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
link={`/${workspaceSlug}/projects/${projectId}/cycles`}
linkTruncate
/>
</Breadcrumbs>
}
@ -122,7 +123,7 @@ const SingleCycle: React.FC = () => {
{cycleDetails?.name && truncateText(cycleDetails.name, 40)}
</>
}
className="ml-1.5"
className="ml-1.5 flex-shrink-0"
width="auto"
>
{cycles?.map((cycle) => (
@ -137,7 +138,7 @@ const SingleCycle: React.FC = () => {
</CustomMenu>
}
right={
<div className={`flex items-center gap-2 duration-300`}>
<div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View file

@ -29,6 +29,8 @@ import emptyCycle from "public/empty-state/cycle.svg";
// types
import { SelectCycleType } from "types";
import type { NextPage } from "next";
// helper
import { truncateText } from "helpers/string.helper";
const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
@ -91,7 +93,7 @@ const ProjectCycles: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Cycles`} />
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Cycles`} />
</Breadcrumbs>
}
right={

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
View file

@ -31,7 +31,7 @@ const ProjectInbox: NextPage = () => {
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Inbox`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`}
/>
</Breadcrumbs>
}

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View file

@ -22,6 +22,8 @@ import { IIssue } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues = {
name: "",
@ -110,13 +112,15 @@ const IssueDetailsPage: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
linkTruncate
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
issueDetails?.sequence_id ?? "..."
} Details`}
unshrinkTitle
/>
</Breadcrumbs>
}

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View file

@ -54,7 +54,7 @@ const ProjectIssues: NextPage = () => {
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Issues`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`}
/>
</Breadcrumbs>
}

3
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file

@ -112,8 +112,9 @@ const SingleModule: React.FC = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
link={`/${workspaceSlug}/projects/${projectId}/modules`}
linkTruncate
/>
</Breadcrumbs>
}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
View file

@ -29,6 +29,8 @@ import { IModule, SelectModuleType } from "types/modules";
import type { NextPage } from "next";
// fetch-keys
import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const ProjectModules: NextPage = () => {
const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
@ -73,7 +75,7 @@ const ProjectModules: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Modules`} />
<BreadcrumbItem title={`${truncateText(activeProject?.name ?? "Project", 32)} Modules`} />
</Breadcrumbs>
}
right={

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View file

@ -43,7 +43,7 @@ import {
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
// helpers
import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
import type { NextPage } from "next";
@ -346,7 +346,7 @@ const SinglePage: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project",32)} Pages`} />
</Breadcrumbs>
}
>

8
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View file

@ -11,6 +11,7 @@ import { Tab } from "@headlessui/react";
import projectService from "services/project.service";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useUserAuth from "hooks/use-user-auth";
// icons
import { PlusIcon } from "components/icons";
// layouts
@ -27,7 +28,8 @@ import { TPageViewProps } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS } from "constants/fetch-keys";
import useUserAuth from "hooks/use-user-auth";
// helper
import { truncateText } from "helpers/string.helper";
const AllPagesList = dynamic<TPagesListProps>(
() => import("components/pages").then((a) => a.AllPagesList),
@ -107,7 +109,9 @@ const ProjectPages: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`}
/>
</Breadcrumbs>
}
right={

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
View file

@ -22,6 +22,8 @@ import type { NextPage } from "next";
import { IProject } from "types";
// constant
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const AutomationsSettings: NextPage = () => {
const router = useRouter();
@ -65,10 +67,11 @@ const AutomationsSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Automations Settings" />
<BreadcrumbItem title="Automations Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
View file

@ -23,6 +23,8 @@ import { IProject, IUserLite, IWorkspace } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues: Partial<IProject> = {
project_lead: null,
@ -103,10 +105,11 @@ const ControlSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectId}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Control Settings" />
<BreadcrumbItem title="Control Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View file

@ -29,6 +29,8 @@ import { IEstimate, IProject } from "types";
import type { NextPage } from "next";
// fetch-keys
import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const EstimatesSettings: NextPage = () => {
const [estimateFormOpen, setEstimateFormOpen] = useState(false);
@ -115,10 +117,11 @@ const EstimatesSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Estimates Settings" />
<BreadcrumbItem title="Estimates Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View file

@ -25,6 +25,8 @@ import { IProject } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const featuresList = [
{
@ -139,10 +141,11 @@ const FeaturesSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Features Settings" />
<BreadcrumbItem title="Features Settings" unshrinkTitle />
</Breadcrumbs>
}
>

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View file

@ -29,6 +29,7 @@ import {
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
import { truncateText } from "helpers/string.helper";
// types
import { IProject, IWorkspace } from "types";
import type { NextPage } from "next";
@ -161,10 +162,11 @@ const GeneralSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="General Settings" />
<BreadcrumbItem title="General Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View file

@ -23,6 +23,8 @@ import { IProject } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const ProjectIntegrations: NextPage = () => {
const router = useRouter();
@ -48,10 +50,11 @@ const ProjectIntegrations: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectId}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Integrations" />
<BreadcrumbItem title="Integrations" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View file

@ -32,6 +32,8 @@ import { IIssueLabels } from "types";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const LabelsSettings: NextPage = () => {
// create/edit label form
@ -103,10 +105,11 @@ const LabelsSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Labels Settings" />
<BreadcrumbItem title="Labels Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View file

@ -29,6 +29,8 @@ import type { NextPage } from "next";
import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
// constants
import { ROLE } from "constants/workspace";
// helper
import { truncateText } from "helpers/string.helper";
const MembersSettings: NextPage = () => {
const [inviteModal, setInviteModal] = useState(false);
@ -94,10 +96,11 @@ const MembersSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="Members Settings" />
<BreadcrumbItem title="Members Settings" unshrinkTitle />
</Breadcrumbs>
}
>

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View file

@ -26,6 +26,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { PlusIcon } from "@heroicons/react/24/outline";
// helpers
import { getStatesList, orderStateGroups } from "helpers/state.helper";
import { truncateText } from "helpers/string.helper";
// types
import type { NextPage } from "next";
// fetch-keys
@ -64,10 +65,11 @@ const StatesSettings: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${projectDetails?.name ?? "Project"}`}
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
/>
<BreadcrumbItem title="States Settings" />
<BreadcrumbItem title="States Settings" unshrinkTitle />
</Breadcrumbs>
}
>

7
apps/app/pages/[workspaceSlug]/projects/index.tsx
View file

@ -26,6 +26,8 @@ import emptyProject from "public/empty-state/project.svg";
import type { NextPage } from "next";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const ProjectsPage: NextPage = () => {
// router
@ -44,7 +46,10 @@ const ProjectsPage: NextPage = () => {
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
<BreadcrumbItem
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Projects`}
unshrinkTitle={false}
/>
</Breadcrumbs>
}
right={