Add arrow in horizontal scroll fade

7 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index a55918f8711..06f517b8f2e 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -18,6 +18,13 @@
     opacity: 0;
     transition-duration: .3s;
   }
+
+  .fa {
+    position: relative;
+    top: 3px;
+    font-size: 13px;
+    color: $btn-placeholder-gray;
+  }
 }
 
 @mixin scrolling-links() {
@@ -319,11 +326,19 @@
     .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 {
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index 4722c9d9353..8b1acd8d52a 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -3,6 +3,7 @@
 
   %ul.nav-links.scrolling-tabs
     .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,3 +38,4 @@
           %span
             Spam Logs
     .fade-right
+      = icon('arrow-right')
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 66361a644dd..42052373cee 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -3,6 +3,7 @@
 
   %ul.nav-links.scrolling-tabs
     .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,3 +33,4 @@
         %span
           Members
     .fade-right
+      = icon('arrow-right')
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index bb6f14a6225..7fc68398870 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -1,5 +1,6 @@
 %ul.nav-links.scrolling-tabs
   .fade-left
+    = icon('arrow-left')
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       %span
@@ -44,3 +45,4 @@
       %span
         Audit Log
   .fade-right
+    = icon('arrow-right')
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 39ea4920ccc..840777920a5 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -26,6 +26,7 @@
 %div{ class: nav_control_class }
   %ul.nav-links.scrolling-tabs
     .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
@@ -110,3 +111,4 @@
         = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
           Commits
     .fade-right
+      = icon('arrow-right')
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index c8aa849c217..7236b299efc 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -2,6 +2,7 @@
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       .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,3 +27,4 @@
         = link_to namespace_project_tags_path(@project.namespace, @project) do
           Tags
       .fade-right
+        = icon('arrow-right')
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index 30055002213..f96cc981c8d 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,7 +1,9 @@
 %ul.nav-links.event-filter.scrolling-tabs
   .fade-left
+    = icon('arrow-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
+    = icon('arrow-right')