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) -> ...@@ -4,10 +4,9 @@ hideEndFade = ($scrollingTabs) ->
$this $this
.find('.fade-right') .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')) hideEndFade($('.scrolling-tabs'))
...@@ -21,5 +20,5 @@ $ -> ...@@ -21,5 +20,5 @@ $ ->
currentPosition = $this.scrollLeft() currentPosition = $this.scrollLeft()
maxPosition = $this.prop('scrollWidth') - $this.outerWidth() maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
$this.find('.fade-left').toggleClass('end-scroll', currentPosition is 0) $this.find('.fade-left').toggleClass('scrolling', currentPosition > 0)
$this.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition) $this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
@mixin fade($gradient-direction, $rgba, $gradient-color) { @mixin fade($gradient-direction, $rgba, $gradient-color) {
visibility: visible; visibility: hidden;
opacity: 1; opacity: 0;
z-index: 2; z-index: 2;
position: absolute; position: absolute;
bottom: 12px; bottom: 12px;
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
&.end-scroll { &.scrolling {
visibility: hidden; visibility: visible;
opacity: 0; opacity: 1;
transition-duration: .3s; transition-duration: .3s;
} }
...@@ -272,7 +272,7 @@ ...@@ -272,7 +272,7 @@
float: right; float: right;
padding: 7px 0 0; padding: 7px 0 0;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-sm-max) {
display: none; display: none;
} }
...@@ -377,9 +377,7 @@ ...@@ -377,9 +377,7 @@
.nav-control { .nav-control {
.fade-right { .fade-right {
@media (min-width: $screen-xs-max) {
right: 68px;
}
@media (max-width: $screen-xs-min) { @media (max-width: $screen-xs-min) {
right: 0; right: 0;
} }
......
%ul.nav-links.event-filter.scrolling-tabs %ul.nav-links.event-filter.scrolling-tabs
%li.fade-left
= icon('arrow-left')
= event_filter_link EventFilter.push, 'Push events' = event_filter_link EventFilter.push, 'Push events'
= event_filter_link EventFilter.merged, 'Merge events' = event_filter_link EventFilter.merged, 'Merge events'
= event_filter_link EventFilter.comments, 'Comments' = event_filter_link EventFilter.comments, 'Comments'
= event_filter_link EventFilter.team, 'Team' = 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