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

3 files changed, 10 insertions, 17 deletions

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index f8f0aea427e..cad095daae1 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -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)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 0281b06d3ba..f53e63606de 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,6 +1,6 @@
 @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;
       }
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index aa18e6f236f..8824bcc158e 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,9 +1,5 @@
 %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')