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

Merge branch 'nav-horizontal-alignment' into 'master'

Browse source 
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
This commit is contained in:
Jacob Schatz 2016-06-14 17:37:42 +00:00
commit 400b415974
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/assets/javascripts/layout_nav.js.coffee
View file

@ -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
hideEndFade = ($scrollingTabs) ->
$scrollingTabs.each ->
$this = $(@)
$el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
$el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
$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)

9
app/assets/stylesheets/framework/nav.scss
View file

@ -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;