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

fix: project-pages responsiveness (#3624)

Browse source 
* fix: pages responsiveness

* fix: build errors
This commit is contained in:
Lakhan Baheti 2024-02-12 17:01:58 +05:30 • committed by GitHub
parent e29edfc02b
commit 042ed04a03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 94 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View file

@ -102,6 +102,25 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const mobileTabList = (
<Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`text-sm outline-none pb-3 ${
selected ? "border-custom-primary-100 text-custom-primary-100 border-b" : ""
}`
}
>
{tab.title}
</Tab>
))}
</div>
</Tab.List>
);
if (loader || archivedPageLoader)
return (
<div className="flex items-center justify-center h-full w-full">
@ -120,8 +139,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
projectId={projectId.toString()}
/>
)}
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
<div className="flex justify-between gap-4">
<div className="flex h-full flex-col md:space-y-5 overflow-hidden md:p-6">
<div className="justify-between gap-4 hidden md:flex">
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
</div>
<Tab.Group
@ -146,7 +165,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
}
}}
>
<Tab.List as="div" className="mb-6 flex items-center justify-between">
<div className="md:hidden">{mobileTabList}</div>
<Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
<Tab