Commit 2d02e5b8 authored by Simon Knox's avatar Simon Knox Committed by Filipa Lacerda

Fix Pod Log topbar position when perf bar is disabled

parent 8598c343
...@@ -272,7 +272,7 @@ ...@@ -272,7 +272,7 @@
} }
} }
@mixin build-trace-top-bar($height, $top-position) { @mixin build-trace-top-bar($height) {
height: $height; height: $height;
min-height: $height; min-height: $height;
background: $gray-light; background: $gray-light;
...@@ -280,8 +280,12 @@ ...@@ -280,8 +280,12 @@
color: $gl-text-color; color: $gl-text-color;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: $top-position; top: $header-height;
padding: $grid-size; padding: $grid-size;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
}
} }
/* /*
......
...@@ -247,7 +247,6 @@ $input-horizontal-padding: 12px; ...@@ -247,7 +247,6 @@ $input-horizontal-padding: 12px;
* Misc * Misc
*/ */
$header-height: 40px; $header-height: 40px;
$header-height-pod-logs: 75px;
$ide-statusbar-height: 25px; $ide-statusbar-height: 25px;
$fixed-layout-width: 1280px; $fixed-layout-width: 1280px;
$limited-layout-width: 990px; $limited-layout-width: 990px;
......
...@@ -55,29 +55,10 @@ ...@@ -55,29 +55,10 @@
} }
.top-bar { .top-bar {
@include build-trace-top-bar(35px, $header-height); @include build-trace-top-bar(35px);
&.affix { &.sidebar-expanded {
top: $header-height; margin-right: calc(#{$gutter-width} - 16px);
// with sidebar
&.sidebar-expanded {
right: 306px;
left: 16px;
}
// without sidebar
&.sidebar-collapsed {
right: 16px;
left: 16px;
}
}
&.affix-top {
position: absolute;
right: 0;
left: 0;
top: 0;
} }
.truncated-info { .truncated-info {
...@@ -159,16 +140,6 @@ ...@@ -159,16 +140,6 @@
} }
} }
.with-performance-bar .build-page {
.top-bar {
top: $header-height + $performance-bar-height;
&.affix {
top: $header-height + $performance-bar-height;
}
}
}
.build-header { .build-header {
.ci-header-container, .ci-header-container,
.header-action-buttons { .header-action-buttons {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- else - else
- search_path_url = search_path - search_path_url = search_path
%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.navbar-gitlab-new %header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.navbar-gitlab-new.js-navbar
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid .container-fluid
.header-content .header-content
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
} }
.top-bar { .top-bar {
@include build-trace-top-bar(48px, $header-height-pod-logs); @include build-trace-top-bar(48px);
display: flex; display: flex;
.truncated-info { .truncated-info {
......
---
title: Fix Pod Log topbar position when perf bar is disabled
merge_request:
author:
type: fixed
...@@ -3,6 +3,8 @@ require 'spec_helper' ...@@ -3,6 +3,8 @@ require 'spec_helper'
describe 'Environment > Pod Logs', :js do describe 'Environment > Pod Logs', :js do
include KubernetesHelpers include KubernetesHelpers
SCROLL_DISTANCE = 400
let(:pod_names) { %w(foo bar) } let(:pod_names) { %w(foo bar) }
let(:pod_name) { pod_names.first } let(:pod_name) { pod_names.first }
let(:project) { create(:project, :repository) } let(:project) { create(:project, :repository) }
...@@ -39,4 +41,49 @@ describe 'Environment > Pod Logs', :js do ...@@ -39,4 +41,49 @@ describe 'Environment > Pod Logs', :js do
expect(page).to have_content("Log 1\nLog 2\nLog 3") expect(page).to have_content("Log 1\nLog 2\nLog 3")
end end
end end
context 'with perf bar enabled' do
before do
allow_any_instance_of(WithPerformanceBar).to receive(:peek_enabled?).and_return(true)
end
it 'log header sticks to top' do
load_and_scroll_down
expect(log_header_top).to eq(navbar_height + perf_bar_height)
end
end
context 'with perf bar disabled' do
it 'log header sticks to top' do
load_and_scroll_down
expect(log_header_top).to eq(navbar_height)
end
end
def load_and_scroll_down
visit logs_project_environment_path(environment.project, environment, pod_name: pod_name)
wait_for_requests
scroll_down_build_log
end
def scroll_down_build_log
page.execute_script("$('.js-build-output').height('200vh')")
page.execute_script("window.scrollTo(0, #{SCROLL_DISTANCE})")
end
def perf_bar_height
page.evaluate_script("$('#js-peek').height()")
end
def navbar_height
page.evaluate_script("$('.js-navbar').height()")
end
def log_header_top
page.evaluate_script("$('.js-top-bar').offset().top") - SCROLL_DISTANCE
end
end end
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