summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacob Schatz <jschatz@gitlab.com>2016-06-22 16:14:53 +0000
committerJacob Schatz <jschatz@gitlab.com>2016-06-22 16:14:53 +0000
commit36e645c31ec2b663b4fdd9a263b26b80528be5fe (patch)
tree02e101d6ca06e61818dbb68c924ed92edba0bc7d
parent1d9bbb0b8ef4d67833fc99a5c6ffcdafa43a38d6 (diff)
parent94ac45cf0ec9ec6736c4c24e8dd693ab81fe3f22 (diff)
downloadgitlab-ce-36e645c31ec2b663b4fdd9a263b26b80528be5fe.tar.gz
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
-rw-r--r--app/assets/javascripts/layout_nav.js.coffee7
-rw-r--r--app/assets/stylesheets/framework/nav.scss16
-rw-r--r--app/views/shared/_event_filter.html.haml4
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')