diff options
author | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-16 14:58:15 -0500 |
---|---|---|
committer | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-25 17:14:28 -0500 |
commit | 65a175bbd9d5e5a8f6937bcbee9505c67f168b38 (patch) | |
tree | 2633987d30a142fb4337fe2611a4b355984786a7 /app | |
parent | 84fee47a763b6f1dda8b58e66c893cd8cf6dda8e (diff) | |
download | gitlab-ce-65a175bbd9d5e5a8f6937bcbee9505c67f168b38.tar.gz |
Remove arrows from mobile scroll fade out
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/layout_nav.js.coffee | 24 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 34 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 2 | ||||
-rw-r--r-- | app/helpers/nav_helper.rb | 4 | ||||
-rw-r--r-- | app/views/layouts/nav/_group.html.haml | 75 | ||||
-rw-r--r-- | app/views/layouts/nav/_profile.html.haml | 3 |
6 files changed, 74 insertions, 68 deletions
diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee index 2f2f5aa85c5..4586702bc2c 100644 --- a/app/assets/javascripts/layout_nav.js.coffee +++ b/app/assets/javascripts/layout_nav.js.coffee @@ -1,19 +1,11 @@ class @LayoutNav - $(document).ready -> + $ -> $('#scrolling-tabs').on 'scroll', -> - cur = $(this).scrollLeft() - if cur == 0 - return + currentPosition = $(this).scrollLeft() + return if currentPosition == 0 + if $('.nav-control').length + maxPosition = $(this)[0].scrollWidth - $(this).parent().width() + 59 else - max = 289 - console.log "MAX:" + max - console.log "CUR:" + cur - if cur == max - $('.fa-arrow-right').addClass('end-scroll') - $('.nav-links').addClass('end-scroll') - else - $('.fa-arrow-right').removeClass('end-scroll') - $('.nav-links').removeClass('end-scroll') - return - $('#scrolling-tabs').trigger 'scroll' - return + maxPosition = $(this)[0].scrollWidth - $(this).parent().width() + + $('.fade-out').toggleClass('end-scroll', currentPosition is maxPosition) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 83c27eada3d..fe3a2aa26be 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -256,14 +256,18 @@ display: none; } - .fa-arrow-right { - display: none; + .fade-out { + opacity: 1; position: absolute; - color: #7e7c7c; - bottom: 11px; + bottom: 10px; right: 0; - padding: 10px 10px 10px 25px; + width: 43px; + height: 35px; + -webkit-transform: translateZ(0); background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); + background: -o-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); + background: -moz-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); + background: linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); &.end-scroll { opacity: 0; @@ -272,10 +276,7 @@ } @media (max-width: 790px) { - margin-right: 19px; - - .fa-arrow-right { - display: block; + .fade-out { transition-duration: .3s; } } @@ -300,13 +301,20 @@ color: $gl-icon-color; } } + } - &.end-scroll { - margin-right: 0; - transition-duration: .3s; + .nav-control { + .fade-out { + right: 58px; + + @media (min-width: $screen-xs-max) { + right: 67px; + } + @media (max-width: $screen-xs-min) { + right: 0; + } } } - } .page-with-layout-nav { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index f90d7a806d3..67f491b6d9c 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -324,7 +324,7 @@ .layout-nav { @media (max-width: $screen-xs-min) { - padding-right: 0;; + padding-right: 0; } @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) { diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index fbb799eecd3..597a12cd53b 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -51,4 +51,8 @@ module NavHelper def layout_dropdown_class "controls-dropdown-visible" if current_user end + + def nav_control_class + "nav-control" if current_user + end end diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml index 781c0651253..ba4a7092655 100644 --- a/app/views/layouts/nav/_group.html.haml +++ b/app/views/layouts/nav/_group.html.haml @@ -1,38 +1,39 @@ -= render 'layouts/nav/group_settings' +%div{ class: nav_control_class } + = render 'layouts/nav/group_settings' -%ul.nav-links#scrolling-tabs - = nav_link(path: 'groups#show', html_options: {class: 'home'}) do - = link_to group_path(@group), title: 'Home' do - = icon('group fw') - %span - Group - = nav_link(path: 'groups#activity') do - = link_to activity_group_path(@group), title: 'Activity' do - = icon('dashboard fw') - %span - Activity - = nav_link(controller: [:group, :milestones]) do - = link_to group_milestones_path(@group), title: 'Milestones' do - = icon('clock-o fw') - %span - Milestones - = nav_link(path: 'groups#issues') do - = link_to issues_group_path(@group), title: 'Issues' do - = icon('exclamation-circle fw') - %span - Issues - - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute - %span.badge.count= number_with_delimiter(issues.count) - = nav_link(path: 'groups#merge_requests') do - = link_to merge_requests_group_path(@group), title: 'Merge Requests' do - = icon('tasks fw') - %span - Merge Requests - - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute - %span.badge.count= number_with_delimiter(merge_requests.count) - = nav_link(controller: [:group_members]) do - = link_to group_group_members_path(@group), title: 'Members' do - = icon('users fw') - %span - Members - = icon('arrow-right') + %ul.nav-links#scrolling-tabs + = nav_link(path: 'groups#show', html_options: {class: 'home'}) do + = link_to group_path(@group), title: 'Home' do + = icon('group fw') + %span + Group + = nav_link(path: 'groups#activity') do + = link_to activity_group_path(@group), title: 'Activity' do + = icon('dashboard fw') + %span + Activity + = nav_link(controller: [:group, :milestones]) do + = link_to group_milestones_path(@group), title: 'Milestones' do + = icon('clock-o fw') + %span + Milestones + = nav_link(path: 'groups#issues') do + = link_to issues_group_path(@group), title: 'Issues' do + = icon('exclamation-circle fw') + %span + Issues + - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute + %span.badge.count= number_with_delimiter(issues.count) + = nav_link(path: 'groups#merge_requests') do + = link_to merge_requests_group_path(@group), title: 'Merge Requests' do + = icon('tasks fw') + %span + Merge Requests + - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute + %span.badge.count= number_with_delimiter(merge_requests.count) + = nav_link(controller: [:group_members]) do + = link_to group_group_members_path(@group), title: 'Members' do + = icon('users fw') + %span + Members + .fade-out diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml index d730840d63a..d3d733d5999 100644 --- a/app/views/layouts/nav/_profile.html.haml +++ b/app/views/layouts/nav/_profile.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links +%ul.nav-links#scrolling-tabs = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = link_to profile_path, title: 'Profile Settings' do = icon('user fw') @@ -47,3 +47,4 @@ = icon('history fw') %span Audit Log + .fade-out |