Skip to content

G
gitlab-ce
Commit 1f472c72 authored by Jacob Schatz's avatar Jacob Schatz
Browse files
Options

Merge branch '18438-ios-scrolling' into 'master' 

Resolve "Scrolling horz on iOS for the secondary nav is broken"

## What does this MR do?
Moves absolutely positioned `div`s outside of the scrolling container because mobile safari causes those elements to jump around on scroll.

## Are there points in the code the reviewer needs to double check?
Check on a real iPhone (was only able to check in iOS simulator)

## Why was this MR needed?
Mobile Safari.

## What are the relevant issue numbers?
Closes #18438 

## Screenshots (if relevant)
![mobile-safari-fix](/uploads/b38bba735530eb11507fe03036292dd8/mobile-safari-fix.gif)

See merge request !4869
parents c390555f 640323e4
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 125 deletions
CHANGELOG
View file @ 1f472c72
......@@ -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
......
app/assets/javascripts/layout_nav.js.coffee
View file @ 1f472c72
......@@ -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)
app/assets/stylesheets/framework/nav.scss
View file @ 1f472c72
......@@ -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;
}
}
}
......
app/views/layouts/nav/_admin.html.haml
View file @ 1f472c72
%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')
app/views/layouts/nav/_group.html.haml
View file @ 1f472c72
%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')
app/views/layouts/nav/_profile.html.haml
View file @ 1f472c72
%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
app/views/layouts/nav/_project.html.haml
View file @ 1f472c72
......@@ -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')
app/views/projects/commits/_head.html.haml
View file @ 1f472c72
.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')
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7