home/gitlabhq
2
0
Fork 0
mirror of https://github.com/wahyd4/gitlabhq.git synced 2026-08-13 14:46:05 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add fade out to sub nav

Browse Source
This commit is contained in:
Annabel Dunstone
2016-05-25 17:14:28 -05:00
parent 1965ec6324
commit 79f890ca85
6 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/layout_nav.js.coffee
+4 -4
View File
@@ -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)
app/assets/stylesheets/framework/nav.scss
+36 -14
View File
@@ -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;
app/views/layouts/nav/_group.html.haml
+1 -1
View File
@@ -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
app/views/layouts/nav/_profile.html.haml
+1 -1
View File
@@ -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
app/views/layouts/nav/_project.html.haml
+1 -1
View File
@@ -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
app/views/shared/_event_filter.html.haml
+3 -1
View File
@@ -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