Add horizontal scrolling to all sub-navs on mobile viewports
This commit is contained in:
parent
501b570dee
commit
4d6dfeee1a
|
@ -11,6 +11,7 @@ v 8.12.0 (unreleased)
|
|||
- Add Sentry logging to API calls
|
||||
- Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)
|
||||
- Fix groups sort dropdown alignment (ClemMakesApps)
|
||||
- Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
|
||||
- Added tests for diff notes
|
||||
- Add delimiter to project stars and forks count (ClemMakesApps)
|
||||
- Fix badge count alignment (ClemMakesApps)
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@mixin fade($gradient-direction, $rgba, $gradient-color) {
|
||||
@mixin fade($gradient-direction, $gradient-color) {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
|
@ -8,10 +8,10 @@
|
|||
height: 30px;
|
||||
transition-duration: .3s;
|
||||
-webkit-transform: translateZ(0);
|
||||
background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
|
||||
background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
|
||||
background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
|
||||
background: 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, 0.4), $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, 0.4), $gradient-color 45%);
|
||||
|
||||
&.scrolling {
|
||||
visibility: visible;
|
||||
|
@ -356,7 +356,7 @@
|
|||
}
|
||||
|
||||
.fade-right {
|
||||
@include fade(left, rgba(255, 255, 255, 0.4), $background-color);
|
||||
@include fade(left, $background-color);
|
||||
right: -5px;
|
||||
|
||||
.fa {
|
||||
|
@ -365,7 +365,7 @@
|
|||
}
|
||||
|
||||
.fade-left {
|
||||
@include fade(right, rgba(255, 255, 255, 0.4), $background-color);
|
||||
@include fade(right, $background-color);
|
||||
left: -5px;
|
||||
|
||||
.fa {
|
||||
|
@ -376,6 +376,7 @@
|
|||
&.sub-nav-scroll {
|
||||
|
||||
.fade-right {
|
||||
@include fade(left, $dark-background-color);
|
||||
right: 0;
|
||||
|
||||
.fa {
|
||||
|
@ -384,6 +385,7 @@
|
|||
}
|
||||
|
||||
.fade-left {
|
||||
@include fade(right, $dark-background-color);
|
||||
left: 0;
|
||||
|
||||
.fa {
|
||||
|
@ -400,7 +402,7 @@
|
|||
@include scrolling-links();
|
||||
|
||||
.fade-right {
|
||||
@include fade(left, rgba(255, 255, 255, 0.4), $white-light);
|
||||
@include fade(left, $white-light);
|
||||
right: -5px;
|
||||
|
||||
.fa {
|
||||
|
@ -409,7 +411,7 @@
|
|||
}
|
||||
|
||||
.fade-left {
|
||||
@include fade(right, rgba(255, 255, 255, 0.4), $white-light);
|
||||
@include fade(right, $white-light);
|
||||
left: -5px;
|
||||
|
||||
.fa {
|
||||
|
|
|
@ -1,22 +1,24 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(controller: :system_info) do
|
||||
= link_to admin_system_info_path, title: 'System Info' do
|
||||
%span
|
||||
System Info
|
||||
= nav_link(controller: :background_jobs) do
|
||||
= link_to admin_background_jobs_path, title: 'Background Jobs' do
|
||||
%span
|
||||
Background Jobs
|
||||
= nav_link(controller: :logs) do
|
||||
= link_to admin_logs_path, title: 'Logs' do
|
||||
%span
|
||||
Logs
|
||||
= nav_link(controller: :health_check) do
|
||||
= link_to admin_health_check_path, title: 'Health Check' do
|
||||
%span
|
||||
Health Check
|
||||
= nav_link(controller: :requests_profiles) do
|
||||
= link_to admin_requests_profiles_path, title: 'Requests Profiles' do
|
||||
%span
|
||||
Requests Profiles
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(controller: :system_info) do
|
||||
= link_to admin_system_info_path, title: 'System Info' do
|
||||
%span
|
||||
System Info
|
||||
= nav_link(controller: :background_jobs) do
|
||||
= link_to admin_background_jobs_path, title: 'Background Jobs' do
|
||||
%span
|
||||
Background Jobs
|
||||
= nav_link(controller: :logs) do
|
||||
= link_to admin_logs_path, title: 'Logs' do
|
||||
%span
|
||||
Logs
|
||||
= nav_link(controller: :health_check) do
|
||||
= link_to admin_health_check_path, title: 'Health Check' do
|
||||
%span
|
||||
Health Check
|
||||
= nav_link(controller: :requests_profiles) do
|
||||
= link_to admin_requests_profiles_path, title: 'Requests Profiles' do
|
||||
%span
|
||||
Requests Profiles
|
||||
|
|
|
@ -1,26 +1,28 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(controller: :dashboard, html_options: {class: 'home'}) do
|
||||
= link_to admin_root_path, title: 'Overview' do
|
||||
%span
|
||||
Overview
|
||||
= nav_link(controller: [:admin, :projects]) do
|
||||
= link_to admin_namespaces_projects_path, title: 'Projects' do
|
||||
%span
|
||||
Projects
|
||||
= nav_link(controller: :users) do
|
||||
= link_to admin_users_path, title: 'Users' do
|
||||
%span
|
||||
Users
|
||||
= nav_link(controller: :groups) do
|
||||
= link_to admin_groups_path, title: 'Groups' do
|
||||
%span
|
||||
Groups
|
||||
= nav_link path: 'builds#index' do
|
||||
= link_to admin_builds_path, title: 'Builds' do
|
||||
%span
|
||||
Builds
|
||||
= nav_link path: ['runners#index', 'runners#show'] do
|
||||
= link_to admin_runners_path, title: 'Runners' do
|
||||
%span
|
||||
Runners
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(controller: :dashboard, html_options: {class: 'home'}) do
|
||||
= link_to admin_root_path, title: 'Overview' do
|
||||
%span
|
||||
Overview
|
||||
= nav_link(controller: [:admin, :projects]) do
|
||||
= link_to admin_namespaces_projects_path, title: 'Projects' do
|
||||
%span
|
||||
Projects
|
||||
= nav_link(controller: :users) do
|
||||
= link_to admin_users_path, title: 'Users' do
|
||||
%span
|
||||
Users
|
||||
= nav_link(controller: :groups) do
|
||||
= link_to admin_groups_path, title: 'Groups' do
|
||||
%span
|
||||
Groups
|
||||
= nav_link path: 'builds#index' do
|
||||
= link_to admin_builds_path, title: 'Builds' do
|
||||
%span
|
||||
Builds
|
||||
= nav_link path: ['runners#index', 'runners#show'] do
|
||||
= link_to admin_runners_path, title: 'Runners' do
|
||||
%span
|
||||
Runners
|
||||
|
|
|
@ -1,8 +1,5 @@
|
|||
.scrolling-tabs-container.sub-nav-scroll
|
||||
.fade-left
|
||||
= icon('angle-left')
|
||||
.fade-right
|
||||
= icon('angle-right')
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
|
||||
|
|
|
@ -1,16 +1,18 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_tag('lib/chart.js')
|
||||
= page_specific_javascript_tag('graphs/graphs_bundle.js')
|
||||
= nav_link(action: :show) do
|
||||
= link_to 'Contributors', namespace_project_graph_path
|
||||
= nav_link(action: :commits) do
|
||||
= link_to 'Commits', commits_namespace_project_graph_path
|
||||
= nav_link(action: :languages) do
|
||||
= link_to 'Languages', languages_namespace_project_graph_path
|
||||
- if @project.builds_enabled?
|
||||
= nav_link(action: :ci) do
|
||||
= link_to ci_namespace_project_graph_path do
|
||||
Continuous Integration
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_tag('lib/chart.js')
|
||||
= page_specific_javascript_tag('graphs/graphs_bundle.js')
|
||||
= nav_link(action: :show) do
|
||||
= link_to 'Contributors', namespace_project_graph_path
|
||||
= nav_link(action: :commits) do
|
||||
= link_to 'Commits', commits_namespace_project_graph_path
|
||||
= nav_link(action: :languages) do
|
||||
= link_to 'Languages', languages_namespace_project_graph_path
|
||||
- if @project.builds_enabled?
|
||||
= nav_link(action: :ci) do
|
||||
= link_to ci_namespace_project_graph_path do
|
||||
Continuous Integration
|
||||
|
|
|
@ -1,30 +1,32 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
- if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
|
||||
= nav_link(controller: :issues) do
|
||||
= link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues' do
|
||||
%span
|
||||
Issues
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
- if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
|
||||
= nav_link(controller: :issues) do
|
||||
= link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues' do
|
||||
%span
|
||||
Issues
|
||||
|
||||
= nav_link(controller: :boards) do
|
||||
= link_to namespace_project_board_path(@project.namespace, @project), title: 'Board' do
|
||||
%span
|
||||
Board
|
||||
= nav_link(controller: :boards) do
|
||||
= link_to namespace_project_board_path(@project.namespace, @project), title: 'Board' do
|
||||
%span
|
||||
Board
|
||||
|
||||
- if project_nav_tab?(:merge_requests) && current_controller?(:merge_requests)
|
||||
= nav_link(controller: :merge_requests) do
|
||||
= link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests' do
|
||||
%span
|
||||
Merge Requests
|
||||
- if project_nav_tab?(:merge_requests) && current_controller?(:merge_requests)
|
||||
= nav_link(controller: :merge_requests) do
|
||||
= link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests' do
|
||||
%span
|
||||
Merge Requests
|
||||
|
||||
- if project_nav_tab? :labels
|
||||
= nav_link(controller: :labels) do
|
||||
= link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
|
||||
%span
|
||||
Labels
|
||||
- if project_nav_tab? :labels
|
||||
= nav_link(controller: :labels) do
|
||||
= link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
|
||||
%span
|
||||
Labels
|
||||
|
||||
- if project_nav_tab? :milestones
|
||||
= nav_link(controller: :milestones) do
|
||||
= link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
|
||||
%span
|
||||
Milestones
|
||||
- if project_nav_tab? :milestones
|
||||
= nav_link(controller: :milestones) do
|
||||
= link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
|
||||
%span
|
||||
Milestones
|
|
@ -1,19 +1,21 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
- if project_nav_tab? :pipelines
|
||||
= nav_link(controller: :pipelines) do
|
||||
= link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
|
||||
%span
|
||||
Pipelines
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
- if project_nav_tab? :pipelines
|
||||
= nav_link(controller: :pipelines) do
|
||||
= link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
|
||||
%span
|
||||
Pipelines
|
||||
|
||||
- if project_nav_tab? :builds
|
||||
= nav_link(controller: %w(builds)) do
|
||||
= link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
|
||||
%span
|
||||
Builds
|
||||
- if project_nav_tab? :builds
|
||||
= nav_link(controller: %w(builds)) do
|
||||
= link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
|
||||
%span
|
||||
Builds
|
||||
|
||||
- if project_nav_tab? :environments
|
||||
= nav_link(controller: %w(environments)) do
|
||||
= link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
|
||||
%span
|
||||
Environments
|
||||
- if project_nav_tab? :environments
|
||||
= nav_link(controller: %w(environments)) do
|
||||
= link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
|
||||
%span
|
||||
Environments
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
.nav-links.sub-nav
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
|
||||
= link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
|
||||
.scrolling-tabs-container.sub-nav-scroll
|
||||
= render 'shared/nav_scroll'
|
||||
.nav-links.sub-nav.scrolling-tabs
|
||||
%ul{ class: (container_class) }
|
||||
= nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
|
||||
= link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
|
||||
|
||||
= nav_link(path: 'wikis#pages') do
|
||||
= link_to 'Pages', namespace_project_wiki_pages_path(@project.namespace, @project)
|
||||
= nav_link(path: 'wikis#pages') do
|
||||
= link_to 'Pages', namespace_project_wiki_pages_path(@project.namespace, @project)
|
||||
|
||||
= nav_link(path: 'wikis#git_access') do
|
||||
= link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
|
||||
Git Access
|
||||
= nav_link(path: 'wikis#git_access') do
|
||||
= link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
|
||||
Git Access
|
||||
|
||||
= render 'projects/wikis/new'
|
||||
= render 'projects/wikis/new'
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
.fade-left
|
||||
= icon('angle-left')
|
||||
.fade-right
|
||||
= icon('angle-right')
|
Loading…
Reference in New Issue