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 calendar layout distortion because of scrollbar (#3770)

Browse Source
This commit is contained in:
rahulramesha 2024-02-23 19:06:47 +05:30 committed by GitHub
parent 9f055840ef
commit 5f6c9a4166
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -73,42 +73,44 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
<> <>
<div className="flex h-full w-full flex-col overflow-hidden"> <div className="flex h-full w-full flex-col overflow-hidden">
<CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} /> <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} /> <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
<div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg"> <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
{layout === "month" && ( <div className="h-full w-full">
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200"> {layout === "month" && (
{allWeeksOfActiveMonth && <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => ( {allWeeksOfActiveMonth &&
<CalendarWeekDays Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
issuesFilterStore={issuesFilterStore} <CalendarWeekDays
key={weekIndex} issuesFilterStore={issuesFilterStore}
week={week} key={weekIndex}
issues={issues} week={week}
groupedIssueIds={groupedIssueIds} issues={issues}
enableQuickIssueCreate groupedIssueIds={groupedIssueIds}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed} enableQuickIssueCreate
quickActions={quickActions} disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickAddCallback={quickAddCallback} quickActions={quickActions}
viewId={viewId} quickAddCallback={quickAddCallback}
readOnly={readOnly} viewId={viewId}
/> readOnly={readOnly}
))} />
</div> ))}
)} </div>
{layout === "week" && ( )}
<CalendarWeekDays {layout === "week" && (
issuesFilterStore={issuesFilterStore} <CalendarWeekDays
week={issueCalendarView.allDaysOfActiveWeek} issuesFilterStore={issuesFilterStore}
issues={issues} week={issueCalendarView.allDaysOfActiveWeek}
groupedIssueIds={groupedIssueIds} issues={issues}
enableQuickIssueCreate groupedIssueIds={groupedIssueIds}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed} enableQuickIssueCreate
quickActions={quickActions} disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickAddCallback={quickAddCallback} quickActions={quickActions}
viewId={viewId} quickAddCallback={quickAddCallback}
readOnly={readOnly} viewId={viewId}
/> readOnly={readOnly}
)} />
)}
</div>
</div> </div>
</div> </div>
</> </>

2
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -91,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6 snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
? "bg-custom-background-90" ? "bg-custom-background-90"
: "bg-custom-background-100" : "bg-custom-background-100"
} ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`} } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}
> >

2
web/components/issues/issue-layouts/calendar/week-header.tsx
View File

@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
return ( return (
<div <div
className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${ className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
showWeekends ? "grid-cols-7" : "grid-cols-5" showWeekends ? "grid-cols-7" : "grid-cols-5"
}`} }`}
> >