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">
<CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg">
{layout === "month" && (
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
{allWeeksOfActiveMonth &&
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
<CalendarWeekDays
issuesFilterStore={issuesFilterStore}
key={weekIndex}
week={week}
issues={issues}
groupedIssueIds={groupedIssueIds}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
))}
</div>
)}
{layout === "week" && (
<CalendarWeekDays
issuesFilterStore={issuesFilterStore}
week={issueCalendarView.allDaysOfActiveWeek}
issues={issues}
groupedIssueIds={groupedIssueIds}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
)}
<div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
<div className="h-full w-full">
{layout === "month" && (
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
{allWeeksOfActiveMonth &&
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
<CalendarWeekDays
issuesFilterStore={issuesFilterStore}
key={weekIndex}
week={week}
issues={issues}
groupedIssueIds={groupedIssueIds}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
))}
</div>
)}
{layout === "week" && (
<CalendarWeekDays
issuesFilterStore={issuesFilterStore}
week={issueCalendarView.allDaysOfActiveWeek}
issues={issues}
groupedIssueIds={groupedIssueIds}
enableQuickIssueCreate
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
)}
</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
? "bg-custom-background-90"
: "bg-custom-background-100"
} ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
} ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
{...provided.droppableProps}
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 (
<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"
}`}
>