diff options
-rw-r--r-- | CHANGELOG | 1 | ||||
-rw-r--r-- | app/assets/javascripts/layout_nav.js.coffee | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 92 | ||||
-rw-r--r-- | app/views/layouts/nav/_admin.html.haml | 11 | ||||
-rw-r--r-- | app/views/layouts/nav/_group.html.haml | 11 | ||||
-rw-r--r-- | app/views/layouts/nav/_profile.html.haml | 93 | ||||
-rw-r--r-- | app/views/layouts/nav/_project.html.haml | 10 | ||||
-rw-r--r-- | app/views/projects/commits/_head.html.haml | 10 |
8 files changed, 109 insertions, 125 deletions
diff --git a/CHANGELOG b/CHANGELOG index d7d9bd3d349..3fad823c800 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -16,6 +16,7 @@ v 8.9.1 - Fix false truncated warnings with ISO-8559 files - Fix unwanted label unassignment when doing bulk action on issues page - Fix 404 when accessing pipelines as guest user on public projects + - Fix mobile Safari bug where horizontal nav arrows would flicker on scroll v 8.9.0 - Fix builds API response not including commit data diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee index cad095daae1..f639f7f5892 100644 --- a/app/assets/javascripts/layout_nav.js.coffee +++ b/app/assets/javascripts/layout_nav.js.coffee @@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) -> $this = $(@) $this - .find('.fade-right') + .siblings('.fade-right') .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth')) $ -> @@ -20,5 +20,5 @@ $ -> currentPosition = $this.scrollLeft() maxPosition = $this.prop('scrollWidth') - $this.outerWidth() - $this.find('.fade-left').toggleClass('scrolling', currentPosition > 0) - $this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1) + $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0) + $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index f53e63606de..6211bc04597 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -32,6 +32,7 @@ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; + &::-webkit-scrollbar { display: none; } @@ -303,41 +304,9 @@ } .nav-links { - @include scrolling-links(); border-bottom: none; height: 51px; - svg { - position: relative; - top: 2px; - margin-right: 2px; - height: 15px; - width: auto; - - path, - polygon { - fill: $layout-link-gray; - } - } - - .fade-right { - @include fade(left, rgba(250, 250, 250, 0.4), $background-color); - right: 0; - - .fa { - right: -7px; - } - } - - .fade-left { - @include fade(right, rgba(250, 250, 250, 0.4), $background-color); - left: 0; - - .fa { - left: -7px; - } - } - li { a { @@ -373,16 +342,6 @@ } } } - - .nav-control { - - .fade-right { - - @media (max-width: $screen-xs-min) { - right: 0; - } - } - } } .scrolling-tabs-container { @@ -390,15 +349,42 @@ .nav-links { @include scrolling-links(); + } + + .fade-right { + @include fade(left, rgba(255, 255, 255, 0.4), $background-color); + right: -5px; + + .fa { + right: -7px; + } + } + + .fade-left { + @include fade(right, rgba(255, 255, 255, 0.4), $background-color); + left: -5px; + + .fa { + left: -7px; + } + } + + &.sub-nav-scroll { .fade-right { - @include fade(left, rgba(255, 255, 255, 0.4), $background-color); right: 0; + + .fa { + right: -23px; + } } .fade-left { - @include fade(right, rgba(255, 255, 255, 0.4), $background-color); left: 0; + + .fa { + left: 10px; + } } } } @@ -411,21 +397,19 @@ .fade-right { @include fade(left, rgba(255, 255, 255, 0.4), $white-light); - right: 0; + right: -5px; + + .fa { + right: -7px; + } } .fade-left { @include fade(right, rgba(255, 255, 255, 0.4), $white-light); - left: 0; - } - - &.event-filter { - .fade-right { - visibility: hidden; + left: -5px; - @media (max-width: $screen-xs-max) { - visibility: visible; - } + .fa { + left: -7px; } } } diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml index 66e5ec1ad1a..0f264cd2e06 100644 --- a/app/views/layouts/nav/_admin.html.haml +++ b/app/views/layouts/nav/_admin.html.haml @@ -1,9 +1,10 @@ -%div{ class: nav_control_class } +.scrolling-tabs-container{ class: nav_control_class } = render 'layouts/nav/admin_settings' - + .fade-left + = icon('arrow-left') + .fade-right + = icon('arrow-right') %ul.nav-links.scrolling-tabs - %li.fade-left - = icon('arrow-left') = nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do %span @@ -37,5 +38,3 @@ = link_to admin_spam_logs_path, title: "Spam Logs" do %span Spam Logs - %li.fade-right - = icon('arrow-right') diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml index f7aa9fab7cf..5d657a9ac84 100644 --- a/app/views/layouts/nav/_group.html.haml +++ b/app/views/layouts/nav/_group.html.haml @@ -1,9 +1,10 @@ -%div{ class: nav_control_class } +.scrolling-tabs-container{ class: nav_control_class } = render 'layouts/nav/group_settings' - + .fade-left + = icon('arrow-left') + .fade-right + = icon('arrow-right') %ul.nav-links.scrolling-tabs - %li.fade-left - = icon('arrow-left') = nav_link(path: 'groups#show', html_options: {class: 'home'}) do = link_to group_path(@group), title: 'Home' do %span @@ -32,5 +33,3 @@ = link_to group_group_members_path(@group), title: 'Members' do %span Members - %li.fade-right - = icon('arrow-right') diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml index 44ea939b7e4..f37f9b0f5a3 100644 --- a/app/views/layouts/nav/_profile.html.haml +++ b/app/views/layouts/nav/_profile.html.haml @@ -1,48 +1,49 @@ -%ul.nav-links.scrolling-tabs - %li.fade-left +.scrolling-tabs-container + .fade-left = icon('arrow-left') - = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do - = link_to profile_path, title: 'Profile Settings' do - %span - Profile - = nav_link(controller: [:accounts, :two_factor_auths]) do - = link_to profile_account_path, title: 'Account' do - %span - Account - - if current_application_settings.user_oauth_applications? - = nav_link(controller: 'oauth/applications') do - = link_to applications_profile_path, title: 'Applications' do - %span - Applications - = nav_link(controller: :personal_access_tokens) do - = link_to profile_personal_access_tokens_path, title: 'Personal Access Tokens' do - %span - Personal Access Tokens - = nav_link(controller: :emails) do - = link_to profile_emails_path, title: 'Emails' do - %span - Emails - - unless current_user.ldap_user? - = nav_link(controller: :passwords) do - = link_to edit_profile_password_path, title: 'Password' do - %span - Password - = nav_link(controller: :notifications) do - = link_to profile_notifications_path, title: 'Notifications' do - %span - Notifications - - = nav_link(controller: :keys) do - = link_to profile_keys_path, title: 'SSH Keys' do - %span - SSH Keys - = nav_link(controller: :preferences) do - = link_to profile_preferences_path, title: 'Preferences' do - %span - Preferences - = nav_link(path: 'profiles#audit_log') do - = link_to audit_log_profile_path, title: 'Audit Log' do - %span - Audit Log - %li.fade-right + .fade-right = icon('arrow-right') + %ul.nav-links.scrolling-tabs + = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do + = link_to profile_path, title: 'Profile Settings' do + %span + Profile + = nav_link(controller: [:accounts, :two_factor_auths]) do + = link_to profile_account_path, title: 'Account' do + %span + Account + - if current_application_settings.user_oauth_applications? + = nav_link(controller: 'oauth/applications') do + = link_to applications_profile_path, title: 'Applications' do + %span + Applications + = nav_link(controller: :personal_access_tokens) do + = link_to profile_personal_access_tokens_path, title: 'Personal Access Tokens' do + %span + Personal Access Tokens + = nav_link(controller: :emails) do + = link_to profile_emails_path, title: 'Emails' do + %span + Emails + - unless current_user.ldap_user? + = nav_link(controller: :passwords) do + = link_to edit_profile_password_path, title: 'Password' do + %span + Password + = nav_link(controller: :notifications) do + = link_to profile_notifications_path, title: 'Notifications' do + %span + Notifications + + = nav_link(controller: :keys) do + = link_to profile_keys_path, title: 'SSH Keys' do + %span + SSH Keys + = nav_link(controller: :preferences) do + = link_to profile_preferences_path, title: 'Preferences' do + %span + Preferences + = nav_link(path: 'profiles#audit_log') do + = link_to audit_log_profile_path, title: 'Audit Log' do + %span + Audit Log diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml index 27e840df503..a4bb56aa56f 100644 --- a/app/views/layouts/nav/_project.html.haml +++ b/app/views/layouts/nav/_project.html.haml @@ -24,10 +24,12 @@ data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do Leave Project -%div{ class: nav_control_class } +.scrolling-tabs-container{ class: nav_control_class } + .fade-left + = icon('arrow-left') + .fade-right + = icon('arrow-right') %ul.nav-links.scrolling-tabs - %li.fade-left - = icon('arrow-left') = nav_link(path: 'projects#show', html_options: {class: 'home'}) do = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do %span @@ -111,5 +113,3 @@ %li.hidden = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do Commits - %li.fade-right - = icon('arrow-right') diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml index 54dab4bff07..b11b6c24ccd 100644 --- a/app/views/projects/commits/_head.html.haml +++ b/app/views/projects/commits/_head.html.haml @@ -1,8 +1,10 @@ -.scrolling-tabs-container +.scrolling-tabs-container.sub-nav-scroll + .fade-left + = icon('arrow-left') + .fade-right + = icon('arrow-right') .nav-links.sub-nav.scrolling-tabs %ul{ class: (container_class) } - %li.fade-left - = icon('arrow-left') = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do = link_to project_files_path(@project) do Files @@ -26,5 +28,3 @@ = nav_link(controller: [:tags, :releases]) do = link_to namespace_project_tags_path(@project.namespace, @project) do Tags - %li.fade-right - = icon('arrow-right') |