Commit 350e57fd authored by Annabel Dunstone's avatar Annabel Dunstone Committed by Jacob Schatz

Move fade out divs outside of scrolling container on project view

parent d61c69f4
...@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) -> ...@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) ->
$this = $(@) $this = $(@)
$this $this
.find('.fade-right') .siblings('.fade-right')
.toggleClass('scrolling', $this.width() < $this.prop('scrollWidth')) .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
$ -> $ ->
...@@ -20,5 +20,5 @@ $ -> ...@@ -20,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('scrolling', currentPosition > 0) $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0)
$this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1) $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
...@@ -322,7 +323,7 @@ ...@@ -322,7 +323,7 @@
.fade-right { .fade-right {
@include fade(left, rgba(250, 250, 250, 0.4), $background-color); @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
right: 0; right: -5px;
.fa { .fa {
right: -7px; right: -7px;
...@@ -331,7 +332,7 @@ ...@@ -331,7 +332,7 @@
.fade-left { .fade-left {
@include fade(right, rgba(250, 250, 250, 0.4), $background-color); @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
left: 0; left: -5px;
.fa { .fa {
left: -7px; left: -7px;
...@@ -379,7 +380,7 @@ ...@@ -379,7 +380,7 @@
.fade-right { .fade-right {
@media (max-width: $screen-xs-min) { @media (max-width: $screen-xs-min) {
right: 0; right: -5px;
} }
} }
} }
...@@ -390,15 +391,23 @@ ...@@ -390,15 +391,23 @@
.nav-links { .nav-links {
@include scrolling-links(); @include scrolling-links();
}
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $background-color); @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
right: 0; right: -5px;
.fa {
right: -7px;
}
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $background-color); @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
left: 0; left: -5px;
.fa {
left: -7px;
} }
} }
} }
...@@ -411,12 +420,20 @@ ...@@ -411,12 +420,20 @@
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $white-light); @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
right: 0; right: -5px;
.fa {
right: -7px;
}
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $white-light); @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
left: 0; left: -5px;
.fa {
left: -7px;
}
} }
&.event-filter { &.event-filter {
......
...@@ -24,10 +24,12 @@ ...@@ -24,10 +24,12 @@
data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
Leave Project Leave Project
%div{ class: nav_control_class } .scrolling-tabs-container{ class: nav_control_class }
%ul.nav-links.scrolling-tabs .fade-left
%li.fade-left
= icon('arrow-left') = icon('arrow-left')
.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs
= nav_link(path: 'projects#show', html_options: {class: 'home'}) do = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
= link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
%span %span
...@@ -111,5 +113,3 @@ ...@@ -111,5 +113,3 @@
%li.hidden %li.hidden
= link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
Commits Commits
%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