Commit 4d6dfeee authored by Clement Ho's avatar Clement Ho

Add horizontal scrolling to all sub-navs on mobile viewports

parent 501b570d
...@@ -11,6 +11,7 @@ v 8.12.0 (unreleased) ...@@ -11,6 +11,7 @@ v 8.12.0 (unreleased)
- Add Sentry logging to API calls - Add Sentry logging to API calls
- Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling) - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)
- Fix groups sort dropdown alignment (ClemMakesApps) - Fix groups sort dropdown alignment (ClemMakesApps)
- Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
- Added tests for diff notes - Added tests for diff notes
- Add delimiter to project stars and forks count (ClemMakesApps) - Add delimiter to project stars and forks count (ClemMakesApps)
- Fix badge count alignment (ClemMakesApps) - Fix badge count alignment (ClemMakesApps)
......
@mixin fade($gradient-direction, $rgba, $gradient-color) { @mixin fade($gradient-direction, $gradient-color) {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
height: 30px; height: 30px;
transition-duration: .3s; transition-duration: .3s;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: -webkit-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: -o-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: -moz-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%); background: linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
&.scrolling { &.scrolling {
visibility: visible; visibility: visible;
...@@ -356,7 +356,7 @@ ...@@ -356,7 +356,7 @@
} }
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $background-color); @include fade(left, $background-color);
right: -5px; right: -5px;
.fa { .fa {
...@@ -365,7 +365,7 @@ ...@@ -365,7 +365,7 @@
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $background-color); @include fade(right, $background-color);
left: -5px; left: -5px;
.fa { .fa {
...@@ -376,6 +376,7 @@ ...@@ -376,6 +376,7 @@
&.sub-nav-scroll { &.sub-nav-scroll {
.fade-right { .fade-right {
@include fade(left, $dark-background-color);
right: 0; right: 0;
.fa { .fa {
...@@ -384,6 +385,7 @@ ...@@ -384,6 +385,7 @@
} }
.fade-left { .fade-left {
@include fade(right, $dark-background-color);
left: 0; left: 0;
.fa { .fa {
...@@ -400,7 +402,7 @@ ...@@ -400,7 +402,7 @@
@include scrolling-links(); @include scrolling-links();
.fade-right { .fade-right {
@include fade(left, rgba(255, 255, 255, 0.4), $white-light); @include fade(left, $white-light);
right: -5px; right: -5px;
.fa { .fa {
...@@ -409,7 +411,7 @@ ...@@ -409,7 +411,7 @@
} }
.fade-left { .fade-left {
@include fade(right, rgba(255, 255, 255, 0.4), $white-light); @include fade(right, $white-light);
left: -5px; left: -5px;
.fa { .fa {
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
= nav_link(controller: :system_info) do = nav_link(controller: :system_info) do
= link_to admin_system_info_path, title: 'System Info' do = link_to admin_system_info_path, title: 'System Info' do
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
= nav_link(controller: :dashboard, html_options: {class: 'home'}) do = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
= link_to admin_root_path, title: 'Overview' do = link_to admin_root_path, title: 'Overview' do
......
.scrolling-tabs-container.sub-nav-scroll .scrolling-tabs-container.sub-nav-scroll
.fade-left = render 'shared/nav_scroll'
= icon('angle-left')
.fade-right
= icon('angle-right')
.nav-links.sub-nav.scrolling-tabs .nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
= 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
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
- content_for :page_specific_javascripts do - content_for :page_specific_javascripts do
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
- if project_nav_tab?(:issues) && !current_controller?(:merge_requests) - if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
= nav_link(controller: :issues) do = nav_link(controller: :issues) do
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
- if project_nav_tab? :pipelines - if project_nav_tab? :pipelines
= nav_link(controller: :pipelines) do = nav_link(controller: :pipelines) do
......
.nav-links.sub-nav .scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) } %ul{ class: (container_class) }
= nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
= link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home) = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
......
.fade-left
= icon('angle-left')
.fade-right
= icon('angle-right')
\ No newline at end of file
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