Commit 1f472c72 authored by Jacob Schatz's avatar Jacob Schatz

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
...@@ -16,6 +16,7 @@ v 8.9.1 ...@@ -16,6 +16,7 @@ v 8.9.1
- Fix false truncated warnings with ISO-8559 files - Fix false truncated warnings with ISO-8559 files
- Fix unwanted label unassignment when doing bulk action on issues page - Fix unwanted label unassignment when doing bulk action on issues page
- Fix 404 when accessing pipelines as guest user on public projects - 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 v 8.9.0
- Fix builds API response not including commit data - Fix builds API response not including commit data
......
...@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) -> ...@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) ->
$this = $(@) $this = $(@)
$this $this
.find('.fade-right') .siblings('.fade-right')
.toggleClass('scrolling', $this.width() < $this.prop('scrollWidth')) .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
$ -> $ ->
...@@ -20,5 +20,5 @@ $ -> ...@@ -20,5 +20,5 @@ $ ->
currentPosition = $this.scrollLeft() currentPosition = $this.scrollLeft()
maxPosition = $this.prop('scrollWidth') - $this.outerWidth() maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
$this.find('.fade-left').toggleClass('scrolling', currentPosition > 0) $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0)
$this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1) $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
...@@ -303,41 +304,9 @@ ...@@ -303,41 +304,9 @@
} }
.nav-links { .nav-links {
@include scrolling-links();
border-bottom: none; border-bottom: none;
height: 51px; 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 { li {
a { a {
...@@ -373,16 +342,6 @@ ...@@ -373,16 +342,6 @@
} }
} }
} }
.nav-control {
.fade-right {
@media (max-width: $screen-xs-min) {
right: 0;
}
}
}
} }
.scrolling-tabs-container { .scrolling-tabs-container {
...@@ -390,15 +349,42 @@ ...@@ -390,15 +349,42 @@
.nav-links { .nav-links {
@include scrolling-links(); @include scrolling-links();
}
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $background-color); @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
right: 0; right: -5px;
.fa {
right: -7px;
}
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $background-color); @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
left: -5px;
.fa {
left: -7px;
}
}
&.sub-nav-scroll {
.fade-right {
right: 0;
.fa {
right: -23px;
}
}
.fade-left {
left: 0; left: 0;
.fa {
left: 10px;
}
} }
} }
} }
...@@ -411,21 +397,19 @@ ...@@ -411,21 +397,19 @@
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $white-light); @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
right: 0; right: -5px;
.fa {
right: -7px;
}
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $white-light); @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
left: 0; left: -5px;
}
&.event-filter { .fa {
.fade-right { left: -7px;
visibility: hidden;
@media (max-width: $screen-xs-max) {
visibility: visible;
}
} }
} }
} }
......
%div{ class: nav_control_class } .scrolling-tabs-container{ class: nav_control_class }
= render 'layouts/nav/admin_settings' = render 'layouts/nav/admin_settings'
.fade-left
%ul.nav-links.scrolling-tabs
%li.fade-left
= icon('arrow-left') = icon('arrow-left')
.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs
= nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do = 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 = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
%span %span
...@@ -37,5 +38,3 @@ ...@@ -37,5 +38,3 @@
= link_to admin_spam_logs_path, title: "Spam Logs" do = link_to admin_spam_logs_path, title: "Spam Logs" do
%span %span
Spam Logs Spam Logs
%li.fade-right
= icon('arrow-right')
%div{ class: nav_control_class } .scrolling-tabs-container{ class: nav_control_class }
= render 'layouts/nav/group_settings' = render 'layouts/nav/group_settings'
.fade-left
%ul.nav-links.scrolling-tabs
%li.fade-left
= icon('arrow-left') = icon('arrow-left')
.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs
= nav_link(path: 'groups#show', html_options: {class: 'home'}) do = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
= link_to group_path(@group), title: 'Home' do = link_to group_path(@group), title: 'Home' do
%span %span
...@@ -32,5 +33,3 @@ ...@@ -32,5 +33,3 @@
= link_to group_group_members_path(@group), title: 'Members' do = link_to group_group_members_path(@group), title: 'Members' do
%span %span
Members Members
%li.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs .scrolling-tabs-container
%li.fade-left .fade-left
= icon('arrow-left') = icon('arrow-left')
.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do = link_to profile_path, title: 'Profile Settings' do
%span %span
...@@ -44,5 +47,3 @@ ...@@ -44,5 +47,3 @@
= link_to audit_log_profile_path, title: 'Audit Log' do = link_to audit_log_profile_path, title: 'Audit Log' do
%span %span
Audit Log Audit Log
%li.fade-right
= icon('arrow-right')
...@@ -24,10 +24,12 @@ ...@@ -24,10 +24,12 @@
data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
Leave Project Leave Project
%div{ class: nav_control_class } .scrolling-tabs-container{ class: nav_control_class }
%ul.nav-links.scrolling-tabs .fade-left
%li.fade-left
= icon('arrow-left') = icon('arrow-left')
.fade-right
= icon('arrow-right')
%ul.nav-links.scrolling-tabs
= nav_link(path: 'projects#show', html_options: {class: 'home'}) do = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
= link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
%span %span
...@@ -111,5 +113,3 @@ ...@@ -111,5 +113,3 @@
%li.hidden %li.hidden
= link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
Commits Commits
%li.fade-right
= icon('arrow-right')
.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 .nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
%li.fade-left
= icon('arrow-left')
= nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
= link_to project_files_path(@project) do = link_to project_files_path(@project) do
Files Files
...@@ -26,5 +28,3 @@ ...@@ -26,5 +28,3 @@
= nav_link(controller: [:tags, :releases]) do = nav_link(controller: [:tags, :releases]) do
= link_to namespace_project_tags_path(@project.namespace, @project) do = link_to namespace_project_tags_path(@project.namespace, @project) do
Tags 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