Commit 94ac45cf authored by Annabel Dunstone's avatar Annabel Dunstone

Hide nav arrows by default; remove settings dropdown btn at larger breakpoint;...

Hide nav arrows by default; remove settings dropdown btn at larger breakpoint; remove unneccessary CSS
parent 15516150
...@@ -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;
} }
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,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;
} }
...@@ -381,9 +381,7 @@ ...@@ -381,9 +381,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