diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-14 20:37:42 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-14 20:37:42 +0300 |
commit | 400b4159742a7d32961d3efaa411f34d5e3117fa (patch) | |
tree | 9f02d3a8439cdd5d466eb34c2653efedfe8a31c7 /app/assets | |
parent | a50af363f80c3557ac0f5628208acfcd7206eef7 (diff) | |
parent | 0b1eea8f970e170cd4314ec75aba9707ffa98127 (diff) |
Merge branch 'nav-horizontal-alignment' into 'master'
Aligned the two navs horizontally
## What does this MR do?
Previously the 2 top navs were not aligned horizontally together. The top nav would be slightly to the left due to the settings dropdown. This corrects that by putting `position: absolute` on the dropdown toggle.
## What are the relevant issue numbers?
Closes #18513
## Screenshots (if relevant)
![Screen_Shot_2016-06-13_at_10.20.22](/uploads/46f39a84dde74707578970f70ddda511/Screen_Shot_2016-06-13_at_10.20.22.png)
See merge request !4616
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/layout_nav.js.coffee | 39 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 9 |
2 files changed, 29 insertions, 19 deletions
diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee index 6adac6dac97..f8f0aea427e 100644 --- a/app/assets/javascripts/layout_nav.js.coffee +++ b/app/assets/javascripts/layout_nav.js.coffee @@ -1,14 +1,25 @@ -class @LayoutNav - $ -> - $('.fade-left').addClass('end-scroll') - $('.scrolling-tabs').on 'scroll', (event) -> - $this = $(this) - $el = $(event.target) - currentPosition = $this.scrollLeft() - size = bp.getBreakpointSize() - controlBtnWidth = $('.controls').width() - maxPosition = $this.get(0).scrollWidth - $this.parent().width() - maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length - - $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0) - $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition) +hideEndFade = ($scrollingTabs) -> + $scrollingTabs.each -> + $this = $(@) + + $this + .find('.fade-right') + .toggleClass('end-scroll', $this.width() is $this.prop('scrollWidth')) + +$ -> + $('.fade-left').addClass('end-scroll') + + hideEndFade($('.scrolling-tabs')) + + $(window) + .off 'resize.nav' + .on 'resize.nav', -> + hideEndFade($('.scrolling-tabs')) + + $('.scrolling-tabs').on 'scroll', (event) -> + $this = $(this) + currentPosition = $this.scrollLeft() + maxPosition = $this.prop('scrollWidth') - $this.outerWidth() + + $this.find('.fade-left').toggleClass('end-scroll', currentPosition is 0) + $this.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 4de89daeb36..1222dc9047a 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -280,11 +280,10 @@ } .dropdown { - margin-left: 7px; - - @media (max-width: $screen-xs-min) { - margin-left: 0; - } + position: absolute; + top: 7px; + right: 15px; + z-index: 2; li.active { font-weight: bold; |