thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: ui and bug fix (#1043)

Browse Source 
* style: calendar border added

* fix: calendar issue ellipsis position fix

* fix: help section overflow fix

* fix: module card date overflow fix

* style: page detail padding and position fix

* fix: cycle and module sidebar fix
This commit is contained in:
Anmol Singh Bhatia 2023-05-15 11:32:50 +05:30 committed by GitHub
parent 37bb183bf0
commit dbbd9add99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/core/calendar-view/single-issue.tsx
View File

@ -120,11 +120,11 @@ export const SingleCalendarIssue: React.FC<Props> = ({
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={`w-full cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
className={`w-full relative cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
}`}
>
<div className="group/card relative flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
<div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
{!isNotAllowed && (
<div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
<CustomMenu width="auto" ellipsis>

4
apps/app/components/cycles/sidebar.tsx
View File

@ -133,9 +133,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<>
<DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
<div
className={`fixed top-0 ${
className={`fixed top-[66px] ${
isOpen ? "right-0" : "-right-[24rem]"
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
} h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
>
{cycle ? (
<>

4
apps/app/components/modules/sidebar.tsx
View File

@ -183,9 +183,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
data={module}
/>
<div
className={`fixed top-0 ${
className={`fixed top-[66px] ${
isOpen ? "right-0" : "-right-[24rem]"
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
} h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
>
{module ? (
<>

2
apps/app/components/modules/single-module-card.tsx
View File

@ -179,7 +179,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-4 text-brand-secondary">
<div className="grid grid-cols-2 gap-2 text-brand-secondary">
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" />
<span>Start:</span>

4
apps/app/components/pages/single-page-block.tsx
View File

@ -293,11 +293,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
>
<button
type="button"
className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
{...provided.dragHandleProps}
>
<EllipsisVerticalIcon className="h-[18px]" />
<EllipsisVerticalIcon className="-ml-3 h-[18px]" />
<EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
</button>
<div
ref={actionSectionRef}

2
apps/app/layouts/app-layout/app-sidebar.tsx
View File

@ -26,7 +26,7 @@ const Sidebar: React.FC<SidebarProps> = ({
return (
<div
className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
className={`z-30 h-full flex-shrink-0 border-r border-brand-base ${
sidebarCollapse ? "" : "w-auto md:w-[17rem]"
} fixed inset-y-0 top-0 ${
toggleSidebar ? "left-0" : "-left-full md:left-0"

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -147,9 +147,7 @@ const SingleCycle: React.FC = () => {
</CustomMenu>
}
right={
<div
className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
>
<div className={`flex items-center gap-2 duration-300`}>
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -150,9 +150,7 @@ const SingleModule: React.FC = () => {
</CustomMenu>
}
right={
<div
className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
>
<div className={`flex items-center gap-2 duration-300`}>
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}

5
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -303,7 +303,7 @@ const SinglePage: NextPage = () => {
{pageDetails ? (
<div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
<div className="h-full w-full overflow-y-auto">
<div className="flex items-center justify-between gap-2">
<div className="flex items-start justify-between gap-2">
<div className="flex w-full flex-col gap-2">
<div className="flex w-full items-center gap-2">
<button
@ -324,6 +324,7 @@ const SinglePage: NextPage = () => {
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
role="textbox"
noPadding
/>
</div>
@ -502,7 +503,7 @@ const SinglePage: NextPage = () => {
</div>
</div>
<div className="mt-4 h-full w-full">
<div className="mt-5 h-full w-full">
{pageBlocks ? (
<>
<DragDropContext onDragEnd={handleOnDragEnd}>

6
apps/app/styles/react-datepicker.css
View File

@ -23,8 +23,8 @@
.react-datepicker {
font-family: "Inter" !important;
border: none !important;
background-color: rgba(var(--color-bg-base)) !important;
border: 1px solid rgba(var(--color-border)) !important;
}
.react-datepicker__month-container {
@ -116,3 +116,7 @@
background-color: #216ba5 !important;
color: white !important;
}
.react-datepicker__day--in-range {
color: white !important;
}