Commit daa555ee authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '5658-fix-epic-timeline-misalignment' into 'master'

Fix Epic timeline bar misalignment when start date is in last timeframe month and end date is out of range

Closes #5658

See merge request gitlab-org/gitlab-ee!5360
parents 7cefa187 5ef313c0
......@@ -104,9 +104,18 @@
// Set offset to 0.
offset = 'left: 0;';
} else {
// Calculate proportional offset based on startDate and total days in
// current month.
offset = `left: ${Math.floor((startDate / daysInMonth) * 100)}%;`;
// If Epic end date is out of range
const lastTimeframeItem = this.timeframe[this.timeframe.length - 1];
// Check if Epic start date falls within last month of the timeframe
if (this.epic.startDate.getMonth() === lastTimeframeItem.getMonth() &&
this.epic.startDate.getFullYear() === lastTimeframeItem.getFullYear()) {
// Compensate for triangle size
offset = `right: ${TIMELINE_END_OFFSET_HALF}px;`;
} else {
// Calculate proportional offset based on startDate and total days in
// current month.
offset = `left: ${(startDate / daysInMonth) * 100}%;`;
}
}
return offset;
......
......@@ -10,6 +10,6 @@ export const SHELL_MIN_WIDTH = 1620;
export const SCROLL_BAR_SIZE = 15;
export const TIMELINE_END_OFFSET_HALF = 6;
export const TIMELINE_END_OFFSET_HALF = 8;
export const TIMELINE_END_OFFSET_FULL = 16;
---
title: Fix Epic timeline bar misalignment when start date is in last timeframe month
and end date is out of range
merge_request: 5360
author:
type: fixed
......@@ -108,6 +108,16 @@ describe('EpicItemTimelineComponent', () => {
expect(vm.getTimelineBarStartOffset()).toBe('left: 0;');
});
it('returns `right: 8px;` when Epic startDate is in last timeframe month and endDate is out of range', () => {
vm = createComponent({
epic: Object.assign({}, mockEpic, {
startDate: mockTimeframe[mockTimeframe.length - 1],
endDateOutOfRange: true,
}),
});
expect(vm.getTimelineBarStartOffset()).toBe('right: 8px;');
});
it('returns proportional `left` value based on Epic startDate and days in the month', () => {
vm = createComponent({
epic: Object.assign({}, mockEpic, {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment