Commit 9a2cbf0a authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '224637-milestones-list-has-an-incorrect-height-value-with-1-milestone' into 'master'

Change timeline height to a uniform value

See merge request gitlab-org/gitlab!35394
parents 139ba879 cd3954d4
...@@ -38,7 +38,6 @@ export default { ...@@ -38,7 +38,6 @@ export default {
v-for="timeframeItem in timeframe" v-for="timeframeItem in timeframe"
:key="timeframeItem.id" :key="timeframeItem.id"
class="milestone-timeline-cell gl-display-table-cell gl-relative border-right border-bottom" class="milestone-timeline-cell gl-display-table-cell gl-relative border-right border-bottom"
:class="{ 'milestone-timeline-cell-empty': !milestonesExpanded }"
data-qa-selector="milestone_timeline_cell" data-qa-selector="milestone_timeline_cell"
> >
<current-day-indicator :preset-type="presetType" :timeframe-item="timeframeItem" /> <current-day-indicator :preset-type="presetType" :timeframe-item="timeframeItem" />
......
...@@ -115,13 +115,9 @@ export default { ...@@ -115,13 +115,9 @@ export default {
</script> </script>
<template> <template>
<div :style="sectionContainerStyles" class="milestones-list-section gl-display-table">
<div <div
:style="sectionContainerStyles" class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-px-3 gl-pt-2"
class="milestones-list-section gl-display-table"
:class="{ 'milestones-list-section-collapsed': !milestonesExpanded }"
>
<div
class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-p-3"
> >
<div class="gl-display-flex gl-align-items-center"> <div class="gl-display-flex gl-align-items-center">
<span <span
......
$header-item-height: 60px; $header-item-height: 60px;
$item-height: 50px; $item-height: 50px;
$milestones-collapsed-height: 38px;
$details-cell-width: 320px; $details-cell-width: 320px;
$timeline-cell-height: 32px;
$timeline-cell-width: 180px; $timeline-cell-width: 180px;
$border-style: 1px solid $border-gray-normal; $border-style: 1px solid $border-gray-normal;
$roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15); $roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
...@@ -409,21 +409,14 @@ html.group-epics-roadmap-html { ...@@ -409,21 +409,14 @@ html.group-epics-roadmap-html {
} }
.milestones-list-section { .milestones-list-section {
&.milestones-list-section-collapsed {
height: $milestones-collapsed-height;
}
.milestones-list-items { .milestones-list-items {
.milestone-timeline-cell { .milestone-timeline-cell {
height: $timeline-cell-height;
width: $timeline-cell-width; width: $timeline-cell-width;
} }
.milestone-timeline-cell-empty {
height: $milestones-collapsed-height;
}
.timeline-bar-wrapper { .timeline-bar-wrapper {
height: 32px; height: $timeline-cell-height;
color: $gray-700; color: $gray-700;
} }
......
...@@ -30,24 +30,17 @@ describe('MilestoneTimelineComponent', () => { ...@@ -30,24 +30,17 @@ describe('MilestoneTimelineComponent', () => {
}); });
}; };
const findMilestoneTimelineCell = () => wrapper.find('.milestone-timeline-cell');
const findMilestoneItem = () => wrapper.find(MilestoneItem); const findMilestoneItem = () => wrapper.find(MilestoneItem);
describe.each` describe.each`
props | hasCellEmpty | hasMilestoneItem props | hasMilestoneItem
${{}} | ${false} | ${true} ${{}} | ${true}
${{ milestonesExpanded: false }} | ${true} | ${false} ${{ milestonesExpanded: false }} | ${false}
`('with $props', ({ props, hasCellEmpty, hasMilestoneItem }) => { `('with $props', ({ props, hasMilestoneItem }) => {
beforeEach(() => { beforeEach(() => {
createWrapper(props); createWrapper(props);
}); });
it(`renders timeline cell with empty class = ${hasCellEmpty}`, () => {
expect(findMilestoneTimelineCell().classes('milestone-timeline-cell-empty')).toBe(
hasCellEmpty,
);
});
it(`renders MilestoneItem component = ${hasMilestoneItem}`, () => { it(`renders MilestoneItem component = ${hasMilestoneItem}`, () => {
expect(findMilestoneItem().exists()).toBe(hasMilestoneItem); expect(findMilestoneItem().exists()).toBe(hasMilestoneItem);
}); });
......
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