Merge branch 'fix-sidebar-with-scrollbars' into 'master'
Fixed the new sidebars width when browser has scrollbars Closes #37606 See merge request gitlab-org/gitlab-ce!14191
This commit is contained in:
commit
64664b645e
|
@ -77,10 +77,11 @@ export const hideMenu = (el) => {
|
|||
export const moveSubItemsToPosition = (el, subItems) => {
|
||||
const boundingRect = el.getBoundingClientRect();
|
||||
const top = calculateTop(boundingRect, subItems.offsetHeight);
|
||||
const left = sidebar ? sidebar.offsetWidth : 50;
|
||||
const isAbove = top < boundingRect.top;
|
||||
|
||||
subItems.classList.add('fly-out-list');
|
||||
subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
|
||||
subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
|
||||
|
||||
const subItemsRect = subItems.getBoundingClientRect();
|
||||
|
||||
|
|
|
@ -105,7 +105,8 @@ $new-sidebar-collapsed-width: 50px;
|
|||
}
|
||||
|
||||
&.sidebar-icons-only {
|
||||
width: $new-sidebar-collapsed-width;
|
||||
width: auto;
|
||||
min-width: $new-sidebar-collapsed-width;
|
||||
|
||||
.nav-sidebar-inner-scroll {
|
||||
overflow-x: hidden;
|
||||
|
@ -124,6 +125,10 @@ $new-sidebar-collapsed-width: 50px;
|
|||
.fly-out-top-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-sidebar-expanded {
|
||||
|
@ -187,7 +192,7 @@ $new-sidebar-collapsed-width: 50px;
|
|||
.nav-sidebar-inner-scroll {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.with-performance-bar .nav-sidebar {
|
||||
|
@ -248,7 +253,7 @@ $new-sidebar-collapsed-width: 50px;
|
|||
@media (min-width: $screen-sm-min) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: $new-sidebar-width;
|
||||
left: 0;
|
||||
min-width: 150px;
|
||||
margin-top: -1px;
|
||||
padding: 4px 1px;
|
||||
|
@ -386,10 +391,6 @@ $new-sidebar-collapsed-width: 50px;
|
|||
}
|
||||
|
||||
.sidebar-sub-level-items {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
left: $new-sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
&:not(.flyout-list) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Fixed the sidebar scrollbar overlapping links
|
||||
merge_request:
|
||||
author:
|
||||
type: fixed
|
|
@ -271,12 +271,19 @@ describe('Fly out sidebar navigation', () => {
|
|||
});
|
||||
|
||||
it('sets transform of sub-items', () => {
|
||||
const sidebar = document.createElement('div');
|
||||
const subItems = el.querySelector('.sidebar-sub-level-items');
|
||||
|
||||
sidebar.style.width = '200px';
|
||||
|
||||
document.body.appendChild(sidebar);
|
||||
|
||||
setSidebar(sidebar);
|
||||
showSubLevelItems(el);
|
||||
|
||||
expect(
|
||||
subItems.style.transform,
|
||||
).toBe(`translate3d(0px, ${Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()}px, 0px)`);
|
||||
).toBe(`translate3d(200px, ${Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()}px, 0px)`);
|
||||
});
|
||||
|
||||
it('sets is-above when element is above', () => {
|
||||
|
|
Loading…
Reference in New Issue