Commit d63de44d authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '30975-fixed-top-nav-POC' into 'master'

Add fixed positioning to top level navbar

Closes #30975

See merge request !10751
parents 09ca4c92 c757000e
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
import _ from 'underscore';
(function() {
var hideEndFade;
......@@ -45,4 +46,13 @@
}
});
});
function applyScrollNavClass() {
const scrollOpacityHeight = 40;
$('.navbar-border').css('opacity', Math.min($(window).scrollTop() / scrollOpacityHeight, 1));
}
$(() => {
$(window).on('scroll', _.throttle(applyScrollNavClass, 100));
});
}).call(window);
......@@ -353,6 +353,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
initAffix() {
const $tabs = $('.js-tabs-affix');
const $fixedNav = $('.navbar-gitlab');
// Screen space on small screens is usually very sparse
// So we dont affix the tabs on these
......@@ -371,7 +372,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
.affix({
offset: {
top: () => (
$diffTabs.offset().top - $tabs.height()
$diffTabs.offset().top - $tabs.height() - $fixedNav.height()
),
},
})
......
......@@ -30,13 +30,17 @@ header {
background-color: $gray-light;
border: none;
border-bottom: 1px solid $border-color;
position: fixed;
top: 0;
left: 0;
right: 0;
@media (max-width: $screen-xs-min) {
padding: 0 16px;
}
&.with-horizontal-nav {
border-bottom: none;
border-color: transparent;
}
.container-fluid {
......@@ -110,6 +114,16 @@ header {
}
}
.navbar-border {
height: 1px;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: $border-color;
opacity: 0;
}
.global-dropdown {
position: absolute;
left: -10px;
......
......@@ -25,6 +25,10 @@ body {
.content-wrapper {
padding-bottom: 100px;
&:not(.page-with-layout-nav) {
margin-top: $header-height;
}
}
.container {
......
......@@ -291,6 +291,7 @@
border-bottom: 1px solid $border-color;
transition: padding $sidebar-transition-duration;
text-align: center;
margin-top: $header-height;
.container-fluid {
position: relative;
......@@ -428,7 +429,7 @@
top: ($header-height + 1) * 3;
&.affix {
top: 0;
top: $header-height;
}
}
}
......
......@@ -80,6 +80,6 @@
&.affix {
position: fixed;
top: 0;
top: $header-height;
}
}
......@@ -689,7 +689,7 @@
}
.merge-request-tabs-holder {
top: 0;
top: $header-height;
z-index: 10;
background-color: $white-light;
......
%header.navbar.navbar-gitlab{ class: nav_header_class }
.navbar-border
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid
.header-content
......
- builds = @build.pipeline.builds.to_a
%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "153", "spy" => "affix" } }
%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
.block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
Job
%strong ##{@build.id}
......
%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" } }
%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
.block.wiki-sidebar-header.append-bottom-default
%a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
= icon('angle-double-right')
......
......@@ -3,7 +3,7 @@
= page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('sidebar')
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
.issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }
- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.block.issuable-sidebar-header
......
- affix_offset = local_assigns.fetch(:affix_offset, "102")
- affix_offset = local_assigns.fetch(:affix_offset, "50")
- project = local_assigns[:project]
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
......
......@@ -9,6 +9,7 @@ Feature: Search
Given I search for "Sho"
Then I should see "Shop" project link
@javascript
Scenario: I should see issues I am looking for
And project has issues
When I search for "Foo"
......@@ -16,6 +17,7 @@ Feature: Search
Then I should see "Foo" link in the search results
And I should not see "Bar" link in the search results
@javascript
Scenario: I should see merge requests I am looking for
And project has merge requests
When I search for "Foo"
......@@ -23,6 +25,7 @@ Feature: Search
Then I should see "Foo" link in the search results
And I should not see "Bar" link in the search results
@javascript
Scenario: I should see milestones I am looking for
And project has milestones
When I search for "Foo"
......@@ -78,6 +81,7 @@ Feature: Search
And I search for "Sho"
Then I should see "Shop" project link
@javascript
Scenario: I logout and should see issues I am looking for
Given project "Shop" is public
And I logout directly
......
......@@ -55,7 +55,7 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
merge_request_reference = merge_request.to_reference(full: true)
issue_reference = issue.to_reference(full: true)
click_link 'Mark all as done'
find('.js-todos-mark-all').trigger('click')
page.within('.todos-count') { expect(page).to have_content '0' }
expect(page).to have_content 'To do 0'
......@@ -69,7 +69,7 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
end
step 'I should see the todo marked as done' do
click_link 'Done 1'
find('.todos-done a').trigger('click')
expect(page).to have_link project.name_with_namespace
should_see_todo(1, "John Doe assigned you merge request #{merge_request.to_reference(full: true)}", merge_request.title, state: :done_irreversible)
......@@ -79,7 +79,7 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
merge_request_reference = merge_request.to_reference(full: true)
issue_reference = issue.to_reference(full: true)
click_link 'Done 4'
find('.todos-done a').trigger('click')
expect(page).to have_link project.name_with_namespace
should_see_todo(1, "John Doe assigned you merge request #{merge_request_reference}", merge_request.title, state: :done_irreversible)
......
......@@ -33,7 +33,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
end
step 'I click link "Merged"' do
click_link "Merged"
find('#state-merged').trigger('click')
end
step 'I click link "Closed"' do
......@@ -331,7 +331,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
step 'I click on the Discussion tab' do
page.within '.merge-request-tabs' do
click_link 'Discussion'
find('.notes-tab').trigger('click')
end
# Waits for load
......
......@@ -10,12 +10,12 @@ class Spinach::Features::Search < Spinach::FeatureSteps
step 'I search for "Foo"' do
fill_in "dashboard_search", with: "Foo"
click_button "Search"
find('.btn-search').trigger('click')
end
step 'I search for "rspec"' do
fill_in "dashboard_search", with: "rspec"
click_button "Search"
find('.btn-search').trigger('click')
end
step 'I search for "rspec" on project page' do
......@@ -25,7 +25,7 @@ class Spinach::Features::Search < Spinach::FeatureSteps
step 'I search for "Wiki content"' do
fill_in "dashboard_search", with: "content"
click_button "Search"
find('.btn-search').trigger('click')
end
step 'I click "Issues" link' do
......@@ -35,7 +35,7 @@ class Spinach::Features::Search < Spinach::FeatureSteps
end
step 'I click project "Shop" link' do
click_button 'Project'
find('.js-search-project-dropdown').trigger('click')
page.within '.project-filter' do
click_link project.name_with_namespace
end
......
......@@ -7,7 +7,7 @@ RSpec.describe 'Dashboard Group', feature: true do
it 'creates new group', js: true do
visit dashboard_groups_path
click_link 'New group'
find('.btn-new').trigger('click')
new_path = 'Samurai'
new_description = 'Tokugawa Shogunate'
......
......@@ -275,7 +275,7 @@ feature 'Diff notes resolve', feature: true, js: true do
end
page.within '.line-resolve-all-container' do
page.find('.discussion-next-btn').click
page.find('.discussion-next-btn').trigger('click')
end
expect(page.evaluate_script("$('body').scrollTop()")).to be > 0
......
......@@ -44,7 +44,7 @@ describe 'Profile > Preferences', feature: true do
expect(page.current_path).to eq starred_dashboard_projects_path
end
click_link 'Your projects'
find('.shortcuts-activity').trigger('click')
expect(page).not_to have_content("You don't have starred projects yet")
expect(page.current_path).to eq dashboard_projects_path
......
......@@ -17,14 +17,14 @@ feature 'Projects > Wiki > User previews markdown changes', feature: true, js: t
login_as(user)
visit namespace_project_path(project.namespace, project)
click_link 'Wiki'
find('.shortcuts-wiki').trigger('click')
WikiPages::CreateService.new(project, user, title: 'home', content: 'Home page').execute
end
context "while creating a new wiki page" do
context "when there are no spaces or hyphens in the page name" do
it "rewrites relative links as expected" do
click_link 'New page'
find('.add-new-wiki').trigger('click')
page.within '#modal-new-wiki' do
fill_in :new_wiki_path, with: 'a/b/c/d'
click_button 'Create page'
......@@ -91,7 +91,7 @@ feature 'Projects > Wiki > User previews markdown changes', feature: true, js: t
context "while editing a wiki page" do
def create_wiki_page(path)
click_link 'New page'
find('.add-new-wiki').trigger('click')
page.within '#modal-new-wiki' do
fill_in :new_wiki_path, with: path
......
require 'spec_helper'
feature 'Projects > Wiki > User creates wiki page', feature: true do
feature 'Projects > Wiki > User creates wiki page', js: true, feature: true do
let(:user) { create(:user) }
background do
......@@ -8,7 +8,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
login_as(user)
visit namespace_project_path(project.namespace, project)
click_link 'Wiki'
find('.shortcuts-wiki').trigger('click')
end
context 'in the user namespace' do
......
......@@ -27,7 +27,7 @@ describe "Search", feature: true do
end
it 'shows group name after filtering' do
find('.js-search-group-dropdown').click
find('.js-search-group-dropdown').trigger('click')
wait_for_ajax
page.within '.search-holder' do
......@@ -38,7 +38,7 @@ describe "Search", feature: true do
end
it 'filters by group projects after filtering by group' do
find('.js-search-group-dropdown').click
find('.js-search-group-dropdown').trigger('click')
wait_for_ajax
page.within '.search-holder' do
......@@ -48,7 +48,7 @@ describe "Search", feature: true do
expect(find('.js-search-group-dropdown')).to have_content(group.name)
page.within('.project-filter') do
find('.js-search-project-dropdown').click
find('.js-search-project-dropdown').trigger('click')
wait_for_ajax
expect(page).to have_link(group_project.name_with_namespace)
......@@ -57,7 +57,7 @@ describe "Search", feature: true do
it 'shows project name after filtering' do
page.within('.project-filter') do
find('.js-search-project-dropdown').click
find('.js-search-project-dropdown').trigger('click')
wait_for_ajax
click_link project.name_with_namespace
......
......@@ -251,7 +251,7 @@ describe 'Dashboard Todos', feature: true do
describe 'mark all as done', js: true do
before do
visit dashboard_todos_path
click_link 'Mark all as done'
find('.js-todos-mark-all').trigger('click')
end
it 'shows "All done" message!' do
......@@ -308,9 +308,9 @@ describe 'Dashboard Todos', feature: true do
end
def mark_all_and_undo
click_link 'Mark all as done'
find('.js-todos-mark-all').trigger('click')
wait_for_ajax
click_link 'Undo mark all as done'
find('.js-todos-undo-all').trigger('click')
wait_for_ajax
end
end
......
......@@ -20,7 +20,7 @@ describe 'User Callouts', js: true do
visit dashboard_projects_path
within('.user-callout') do
find('.close').click
find('.close').trigger('click')
end
visit dashboard_projects_path
......
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