Commit 1c3b04dc authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'fix-top-calc-for-trigger-page-sidebar' into 'master'

Fix top calculation for trigger job page sidebar

See merge request gitlab-org/gitlab!78158
parents 9a210454 a2f2e203
......@@ -8,7 +8,6 @@ import CommitBlock from '../../components/commit_block.vue';
export default {
styles: {
top: '75px',
width: '290px',
},
name: 'BridgeSidebar',
......@@ -37,17 +36,37 @@ export default {
required: true,
},
},
data() {
return {
topPosition: 0,
};
},
computed: {
rootStyle() {
return { ...this.$options.styles, top: `${this.topPosition}px` };
},
},
mounted() {
this.setTopPosition();
},
methods: {
onSidebarButtonClick() {
this.$emit('toggleSidebar');
},
setTopPosition() {
const navbarEl = document.querySelector('.js-navbar');
if (navbarEl) {
this.topPosition = navbarEl.getBoundingClientRect().bottom;
}
},
},
};
</script>
<template>
<aside
class="gl-fixed gl-right-0 gl-px-5 gl-bg-gray-10 gl-h-full gl-border-l-solid gl-border-1 gl-border-gray-100 gl-z-index-200 gl-overflow-hidden"
:style="this.$options.styles"
:style="rootStyle"
>
<div class="gl-py-5 gl-display-flex gl-align-items-center">
<tooltip-on-truncate :title="bridgeJob.name" truncate-target="child"
......
......@@ -7,6 +7,14 @@ import { mockCommit, mockJob } from '../mock_data';
describe('Bridge Sidebar', () => {
let wrapper;
const MockHeaderEl = {
getBoundingClientRect() {
return {
bottom: '40',
};
},
};
const createComponent = ({ featureFlag } = {}) => {
wrapper = shallowMount(BridgeSidebar, {
provide: {
......@@ -44,6 +52,17 @@ describe('Bridge Sidebar', () => {
});
});
describe('styles', () => {
beforeEach(async () => {
jest.spyOn(document, 'querySelector').mockReturnValue(MockHeaderEl);
createComponent();
});
it('calculates root styles correctly', () => {
expect(wrapper.attributes('style')).toBe('width: 290px; top: 40px;');
});
});
describe('sidebar expansion', () => {
beforeEach(() => {
createComponent();
......
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