From 79f890ca8549132699bc8169eff73b5c7ff25699 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Wed, 25 May 2016 11:42:43 -0500 Subject: Add fade out to sub nav --- app/assets/javascripts/layout_nav.js.coffee | 8 ++--- app/assets/stylesheets/framework/nav.scss | 50 +++++++++++++++++++++-------- app/views/layouts/nav/_group.html.haml | 2 +- app/views/layouts/nav/_profile.html.haml | 2 +- app/views/layouts/nav/_project.html.haml | 2 +- app/views/shared/_event_filter.html.haml | 4 ++- 6 files changed, 46 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee index 43dc941a82f..3c39ec32f26 100644 --- a/app/assets/javascripts/layout_nav.js.coffee +++ b/app/assets/javascripts/layout_nav.js.coffee @@ -1,13 +1,13 @@ class @LayoutNav $ -> $('.fade-left').addClass('end-scroll') - $('#scrolling-tabs').on 'scroll', -> + $('.scrolling-tabs').scroll (event) -> + el = $(event.target) currentPosition = $(this).scrollLeft() - $('.fade-left').toggleClass('end-scroll', currentPosition is 0) - mobileScreenWidth = 480 controlBtnWidth = $('.controls').width() maxPosition = $(this)[0].scrollWidth - $(this).parent().width() 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) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 59e9a036f71..fdd60d85db8 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -1,4 +1,4 @@ -@mixin fade($gradient-direction) { +@mixin fade($gradient-direction, $rgba, $gradient-color) { visibility: visible; opacity: 1; position: absolute; @@ -7,10 +7,10 @@ height: 30px; transition-duration: .3s; -webkit-transform: translateZ(0); - background: -webkit-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); - background: -o-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); - background: -moz-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%); - background: 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, $gradient-color 45%); + background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%); + background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%); &.end-scroll { visibility: hidden; @@ -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 { padding: 0; margin: 0; @@ -262,23 +272,17 @@ } .nav-links { + @include scrolling-links(); border-bottom: none; height: 51px; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - &::-webkit-scrollbar { - display: none; - } .fade-right { - @include fade(left); + @include fade(left, rgba(250, 250, 250, 0.4), $background-color); right: 0; } .fade-left { - @include fade(right); + @include fade(right, rgba(250, 250, 250, 0.4), $background-color); left: 0; } @@ -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 { margin-top: $header-height + 2; diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml index 9b8319c51ca..de15add3617 100644 --- a/app/views/layouts/nav/_group.html.haml +++ b/app/views/layouts/nav/_group.html.haml @@ -1,7 +1,7 @@ %div{ class: nav_control_class } = render 'layouts/nav/group_settings' - %ul.nav-links#scrolling-tabs + %ul.nav-links.scrolling-tabs .fade-left = nav_link(path: 'groups#show', html_options: {class: 'home'}) do = link_to group_path(@group), title: 'Home' do diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml index a31584c7f81..2efc6c48a48 100644 --- a/app/views/layouts/nav/_profile.html.haml +++ b/app/views/layouts/nav/_profile.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links#scrolling-tabs +%ul.nav-links.scrolling-tabs .fade-left = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = link_to profile_path, title: 'Profile Settings' do diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml index bffa583fda3..087b7472701 100644 --- a/app/views/layouts/nav/_project.html.haml +++ b/app/views/layouts/nav/_project.html.haml @@ -20,7 +20,7 @@ Leave Project %div{ class: nav_control_class } - %ul.nav-links#scrolling-tabs + %ul.nav-links.scrolling-tabs .fade-left = nav_link(path: 'projects#show', html_options: {class: 'home'}) do = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml index c38d9313dba..30055002213 100644 --- a/app/views/shared/_event_filter.html.haml +++ b/app/views/shared/_event_filter.html.haml @@ -1,5 +1,7 @@ -%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.merged, 'Merge events' = event_filter_link EventFilter.comments, 'Comments' = event_filter_link EventFilter.team, 'Team' + .fade-right -- cgit v1.2.1