Commit 79f890ca authored by Annabel Dunstone's avatar Annabel Dunstone

Add fade out to sub nav

parent 1965ec63
class @LayoutNav class @LayoutNav
$ -> $ ->
$('.fade-left').addClass('end-scroll') $('.fade-left').addClass('end-scroll')
$('#scrolling-tabs').on 'scroll', -> $('.scrolling-tabs').scroll (event) ->
el = $(event.target)
currentPosition = $(this).scrollLeft() currentPosition = $(this).scrollLeft()
$('.fade-left').toggleClass('end-scroll', currentPosition is 0)
mobileScreenWidth = 480 mobileScreenWidth = 480
controlBtnWidth = $('.controls').width() controlBtnWidth = $('.controls').width()
maxPosition = $(this)[0].scrollWidth - $(this).parent().width() maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
$('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition) el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
@mixin fade($gradient-direction) { @mixin fade($gradient-direction, $rgba, $gradient-color) {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
height: 30px; height: 30px;
transition-duration: .3s; transition-duration: .3s;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
background: -webkit-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
background: -o-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
background: -moz-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
background: linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
&.end-scroll { &.end-scroll {
visibility: hidden; visibility: hidden;
...@@ -19,6 +19,16 @@ ...@@ -19,6 +19,16 @@
} }
} }
@mixin scrolling-links() {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
.nav-links { .nav-links {
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -262,23 +272,17 @@ ...@@ -262,23 +272,17 @@
} }
.nav-links { .nav-links {
@include scrolling-links();
border-bottom: none; border-bottom: none;
height: 51px; height: 51px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
.fade-right { .fade-right {
@include fade(left); @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
right: 0; right: 0;
} }
.fade-left { .fade-left {
@include fade(right); @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
left: 0; left: 0;
} }
...@@ -318,6 +322,24 @@ ...@@ -318,6 +322,24 @@
} }
} }
.nav-block {
position: relative;
.nav-links {
@include scrolling-links();
.fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $white-light);
right: 0;
}
.fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $white-light);
left: 0;
}
}
}
.page-with-layout-nav { .page-with-layout-nav {
margin-top: $header-height + 2; margin-top: $header-height + 2;
......
%div{ class: nav_control_class } %div{ class: nav_control_class }
= render 'layouts/nav/group_settings' = render 'layouts/nav/group_settings'
%ul.nav-links#scrolling-tabs %ul.nav-links.scrolling-tabs
.fade-left .fade-left
= nav_link(path: 'groups#show', html_options: {class: 'home'}) do = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
= link_to group_path(@group), title: 'Home' do = link_to group_path(@group), title: 'Home' do
......
%ul.nav-links#scrolling-tabs %ul.nav-links.scrolling-tabs
.fade-left .fade-left
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do = link_to profile_path, title: 'Profile Settings' do
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
Leave Project Leave Project
%div{ class: nav_control_class } %div{ class: nav_control_class }
%ul.nav-links#scrolling-tabs %ul.nav-links.scrolling-tabs
.fade-left .fade-left
= 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
......
%ul.nav-links.event-filter %ul.nav-links.event-filter.scrolling-tabs
.fade-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'
.fade-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