Commit 36e645c3 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'arrow-nav-bug' into 'master'

Hide nav arrows by default

## What does this MR do?
- Fixes the arrow icon flashing on page load
- Removes settings dropdown at higher breakpoint
- Removes unneeded CSS

Closes #18941

## Screenshots (if relevant)
Arrow flashing bug:    
![icon](/uploads/3db95626acd0adb37438bdbc2c4aa154/icon.gif)

Settings dropdown breaking nav:    
<img src="/uploads/4351035f4cf8cb9fd892b621e6339e50/Screen_Shot_2016-06-21_at_4.25.50_PM.png" width="800px">

@alfredo1 would you mind double checking this to make sure the arrow flashing is definitely not happening? 

See merge request !4843
parents 1d9bbb0b 94ac45cf
......@@ -4,10 +4,9 @@ hideEndFade = ($scrollingTabs) ->
$this
.find('.fade-right')
.toggleClass('end-scroll', $this.width() is $this.prop('scrollWidth'))
.toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
$ ->
$('.fade-left').addClass('end-scroll')
hideEndFade($('.scrolling-tabs'))
......@@ -21,5 +20,5 @@ $ ->
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)
$this.find('.fade-left').toggleClass('scrolling', currentPosition > 0)
$this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
@mixin fade($gradient-direction, $rgba, $gradient-color) {
visibility: visible;
opacity: 1;
visibility: hidden;
opacity: 0;
z-index: 2;
position: absolute;
bottom: 12px;
......@@ -13,9 +13,9 @@
background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
&.end-scroll {
visibility: hidden;
opacity: 0;
&.scrolling {
visibility: visible;
opacity: 1;
transition-duration: .3s;
}
......@@ -272,7 +272,7 @@
float: right;
padding: 7px 0 0;
@media (max-width: $screen-xs-max) {
@media (max-width: $screen-sm-max) {
display: none;
}
......@@ -377,9 +377,7 @@
.nav-control {
.fade-right {
@media (min-width: $screen-xs-max) {
right: 68px;
}
@media (max-width: $screen-xs-min) {
right: 0;
}
......
%ul.nav-links.event-filter.scrolling-tabs
%li.fade-left
= icon('arrow-left')
= event_filter_link EventFilter.push, 'Push events'
= event_filter_link EventFilter.merged, 'Merge events'
= event_filter_link EventFilter.comments, 'Comments'
= event_filter_link EventFilter.team, 'Team'
%li.fade-right
= icon('arrow-right')
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment