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

fix: layout of tabs on Pages is not adaptable to mobile screens #1380 (#1400)

Browse Source 
* fix: layout of tabs on Pages is not adaptable to mobile screens #1380

* fix: scrolling experience on page
This commit is contained in:
Chandan Jal 2023-07-04 23:13:31 +05:30 committed by GitHub
parent 4c3e2c252a
commit e530533f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,7 +124,29 @@ const ProjectPages: NextPage = () => {
} }
> >
<div className="space-y-5 p-8 h-full overflow-hidden flex flex-col"> <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
<h3 className="text-2xl font-semibold text-brand-base">Pages</h3> <div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
<div className="flex gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "list" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setViewType("list")}
>
<ListBulletIcon className="h-4 w-4" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "detailed" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setViewType("detailed")}
>
<Squares2X2Icon className="h-4 w-4" />
</button>
</div>
</div>
<Tab.Group <Tab.Group
as={Fragment} as={Fragment}
defaultIndex={currentTabValue(pageTab)} defaultIndex={currentTabValue(pageTab)}
@ -147,7 +169,7 @@ const ProjectPages: NextPage = () => {
}} }}
> >
<Tab.List as="div" className="mb-6 flex items-center justify-between"> <Tab.List as="div" className="mb-6 flex items-center justify-between">
<div className="flex gap-4"> <div className="flex gap-4 items-center flex-wrap">
{tabsList.map((tab, index) => ( {tabsList.map((tab, index) => (
<Tab <Tab
key={`${tab}-${index}`} key={`${tab}-${index}`}
@ -163,26 +185,6 @@ const ProjectPages: NextPage = () => {
</Tab> </Tab>
))} ))}
</div> </div>
<div className="flex gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "list" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setViewType("list")}
>
<ListBulletIcon className="h-4 w-4" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
viewType === "detailed" ? "bg-brand-surface-2" : ""
}`}
onClick={() => setViewType("detailed")}
>
<Squares2X2Icon className="h-4 w-4" />
</button>
</div>
</Tab.List> </Tab.List>
<Tab.Panels as={Fragment}> <Tab.Panels as={Fragment}>
<Tab.Panel as="div" className="h-full overflow-y-auto space-y-5"> <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">