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

[WEB-327] chore: scrollbar implementation (#3703)

Browse source 
* style: custom scrollbar added

* chore: scrollbar added in issue layouts

* chore: scrollbar added in sidebar and workspace pages

* chore: calendar layout fix

* chore: project level scrollbar added

* chore: scrollbar added in command k modal

* fix: calendar layout alignment fix
This commit is contained in:
Anmol Singh Bhatia 2024-02-21 17:52:35 +05:30 • committed by GitHub
parent 7464c1090a
commit 48b55ef261
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 197 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View file

@ -67,7 +67,7 @@ const CycleDetailPage: NextPageWithLayout = observer(() => {
</div>
{cycleId && !isSidebarCollapsed && (
<div
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

2
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file

@ -66,7 +66,7 @@ const ModuleIssuesPage: NextPageWithLayout = observer(() => {
</div>
{moduleId && !isSidebarCollapsed && (
<div
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

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

@ -142,8 +142,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
projectId={projectId.toString()}
/>
)}
<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">
<div className="flex h-full flex-col md:space-y-5 overflow-hidden md:py-6">
<div className="justify-between gap-4 hidden md:flex px-6">
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
</div>
<Tab.Group
@ -171,7 +171,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
{windowWidth < 768 ? (
<MobileTabList />
) : (
<Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
<Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex px-6">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
<Tab
@ -192,22 +192,22 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
)}
<Tab.Panels as={Fragment}>
<Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
<Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto vertical-scrollbar scrollbar-lg pl-6">
<RecentPagesList />
</Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-hidden">
<Tab.Panel as="div" className="h-full overflow-hidden pl-6">
<AllPagesList />
</Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-hidden">
<Tab.Panel as="div" className="h-full overflow-hidden pl-6">
<FavoritePagesList />
</Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-hidden">
<Tab.Panel as="div" className="h-full overflow-hidden pl-6">
<PrivatePagesList />
</Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-hidden">
<Tab.Panel as="div" className="h-full overflow-hidden pl-6">
<SharedPagesList />
</Tab.Panel>
<Tab.Panel as="div" className="h-full overflow-hidden">
<Tab.Panel as="div" className="h-full overflow-hidden pl-6">
<ArchivedPagesList />
</Tab.Panel>
</Tab.Panels>