Skip to content

Commit

Permalink
fix: pages layout and alignment issues (#1152)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 committed May 29, 2023
1 parent dce3c3f commit 022960d
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 286 deletions.
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/all-pages-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/favorite-pages-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/my-pages-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/other-pages-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
45 changes: 18 additions & 27 deletions apps/app/components/pages/pages-list/recent-pages-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,37 +37,28 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
<>
{pages ? (
Object.keys(pages).length > 0 && !isEmpty ? (
<div className="mt-4 space-y-4 flex flex-col gap-5">
{Object.keys(pages).map((key) => {
if (pages[key].length === 0) return null;
Object.keys(pages).map((key) => {
if (pages[key].length === 0) return null;

return (
<React.Fragment key={key}>
<div>
<h2 className="text-xl font-semibold capitalize mb-4">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesView
pages={pages[key as keyof RecentPagesResponse]}
viewType={viewType}
/>
</div>
</React.Fragment>
);
})}
</div>
return (
<div key={key}>
<h2 className="text-xl font-semibold capitalize mb-2">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
</div>
);
})
) : (
<div className="mt-4">
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
</div>
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)
) : (
<Loader className="mt-8 space-y-4">
<Loader className="space-y-4">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
Expand Down
110 changes: 56 additions & 54 deletions apps/app/components/pages/pages-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,61 +200,63 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
data={selectedPageToDelete}
/>
{pages ? (
pages.length > 0 ? (
viewType === "list" ? (
<ul role="list" className="divide-y divide-brand-base">
{pages.map((page) => (
<SinglePageListItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</ul>
) : viewType === "detailed" ? (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
<div className="space-y-4 h-full overflow-y-auto">
{pages.length > 0 ? (
viewType === "list" ? (
<ul role="list" className="divide-y divide-brand-base">
{pages.map((page) => (
<SinglePageListItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</ul>
) : viewType === "detailed" ? (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
) : (
<div className="rounded-[10px] border border-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
)
) : (
<div className="rounded-[10px] border border-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
)
) : (
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)}
</div>
) : viewType === "list" ? (
<Loader className="space-y-4">
<Loader.Item height="40px" />
Expand Down

1 comment on commit 022960d

@vercel
Copy link

@vercel vercel bot commented on 022960d May 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-git-develop-plane.vercel.app
plane-dev-plane.vercel.app
plane-dev.vercel.app

Please sign in to comment.