kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

improvements to positioning of the dropdown

This commit is contained in:
Phil Hughes 2017-07-24 16:14:29 +01:00
parent 4d2be5bbec
commit 72538b5f9f
3 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/fly_out_nav.js
View File

@ -2,7 +2,8 @@ export const calculateTop = (boundingRect, outerHeight) => {
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
const bottomOverflow = windowHeight - (boundingRect.top + outerHeight); const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
return bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top; return bottomOverflow < 0 ? (boundingRect.top - outerHeight) + boundingRect.height :
boundingRect.top;
}; };
export default () => { export default () => {
@ -13,10 +14,15 @@ export default () => {
if ($subitems.length) { if ($subitems.length) {
const boundingRect = $this.getBoundingClientRect(); const boundingRect = $this.getBoundingClientRect();
const top = calculateTop(boundingRect, $subitems.outerHeight()); const top = calculateTop(boundingRect, $subitems.outerHeight());
const isAbove = top < boundingRect.top;
$subitems.css({ $subitems.css({
transform: `translate3d(0, ${top}px, 0)`, transform: `translate3d(0, ${top}px, 0)`,
}); });
if (isAbove) {
$subitems.addClass('is-above');
}
} }
}).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide()); }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide().removeClass('is-above'));
}; };

11
app/assets/stylesheets/new_sidebar.scss
View File

@ -215,9 +215,18 @@ $new-sidebar-width: 220px;
position: absolute; position: absolute;
top: 44px; top: 44px;
left: -30px; left: -30px;
right: 0;
bottom: 0; bottom: 0;
height: 100%;
max-height: 150px;
width: 300px;
z-index: -1; z-index: -1;
transform: skew(33deg);
}
&.is-above::after {
top: auto;
bottom: 44px;
transform: skew(-30deg);
} }
a { a {

6
spec/javascripts/fly_out_nav_spec.js
View File

@ -5,6 +5,7 @@ describe('Fly out sidebar navigation', () => {
it('returns boundingRect top', () => { it('returns boundingRect top', () => {
const boundingRect = { const boundingRect = {
top: 100, top: 100,
height: 100,
}; };
expect( expect(
@ -14,12 +15,13 @@ describe('Fly out sidebar navigation', () => {
it('returns boundingRect - bottomOverflow', () => { it('returns boundingRect - bottomOverflow', () => {
const boundingRect = { const boundingRect = {
top: window.innerHeight, top: window.innerHeight - 50,
height: 100,
}; };
expect( expect(
calculateTop(boundingRect, 100), calculateTop(boundingRect, 100),
).toBe(window.innerHeight - 100); ).toBe(window.innerHeight - 50);
}); });
}); });
}); });