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

transform the position

Browse source 
correctly position the arrow
fix scss lint
This commit is contained in:
Phil Hughes 2017-07-19 08:38:20 +01:00
parent e35a56c5ae
commit ad633afdec
2 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/main.js
View file

@ -348,6 +348,9 @@ $(function () {
$(document).trigger('init.scrolling-tabs');
const style = document.createElement("style");
document.head.appendChild(style);
$('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
const windowHeight = window.innerHeight;
const $this = e.currentTarget;
@ -355,13 +358,20 @@ $(function () {
if ($subitems.length) {
const boundingRect = $this.getBoundingClientRect();
const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight());
const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
$subitems.css({
top,
transform: `translate3d(0, ${top}px, 0)`,
});
style.sheet.insertRule(`.sidebar-sub-level-items::before { transform: translate3d(0, ${boundingRect.top - top}px, 0); }`, 0);
}
}).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
}).on('mouseout', (e) => {
$('.sidebar-sub-level-items', e.currentTarget).hide();
if (style.sheet.rules.length) {
style.sheet.deleteRule(0);
}
});
});

43
app/assets/stylesheets/new_sidebar.scss
View file

@ -98,7 +98,6 @@ $new-sidebar-width: 220px;
}
li {
position: relative;
white-space: nowrap;
a {
@ -127,20 +126,6 @@ $new-sidebar-width: 220px;
padding-bottom: 8px;
> li {
&:not(.active) {
@media (min-width: $screen-sm-min) {
a {
padding: 11px 16px 11px 24px;
&:hover,
&:focus {
background: transparent;
font-weight: 600;
}
}
}
}
a {
padding: 8px 16px 8px 24px;
@ -170,13 +155,14 @@ $new-sidebar-width: 220px;
.sidebar-sub-level-items {
@media (min-width: $screen-sm-min) {
position: fixed;
top: 0;
left: 220px;
width: 150px;
margin-left: -1px;
padding-bottom: 0;
background-color: #fff;
box-shadow: 2px 1px 3px rgba(0,0,0,.1);
border: 1px solid #e5e5e5;
background-color: $white-light;
box-shadow: 2px 1px 3px $dropdown-shadow-color;
border: 1px solid $dropdown-border-color;
border-left: 0;
&::before {
@ -189,6 +175,27 @@ $new-sidebar-width: 220px;
border-style: solid;
border-width: 21px 12px;
border-color: transparent transparent transparent $hover-background;
pointer-events: none;
}
&::after {
content: "";
position: absolute;
top: 44px;
left: -20px;
right: 0;
bottom: 0;
z-index: -1;
}
a {
padding: 11px 16px 11px 24px;
&:hover,
&:focus {
background: transparent;
font-weight: 600;
}
}
}
}