Commit b09b82f1 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '7203-sticky-logs-topbar' into 'master'

Fix Pod Log topbar position when perf bar is disabled

Closes #7203

See merge request gitlab-org/gitlab-ee!7853
parents 8598c343 2d02e5b8
......@@ -272,7 +272,7 @@
}
}
@mixin build-trace-top-bar($height, $top-position) {
@mixin build-trace-top-bar($height) {
height: $height;
min-height: $height;
background: $gray-light;
......@@ -280,8 +280,12 @@
color: $gl-text-color;
position: sticky;
position: -webkit-sticky;
top: $top-position;
top: $header-height;
padding: $grid-size;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
}
}
/*
......
......@@ -247,7 +247,6 @@ $input-horizontal-padding: 12px;
* Misc
*/
$header-height: 40px;
$header-height-pod-logs: 75px;
$ide-statusbar-height: 25px;
$fixed-layout-width: 1280px;
$limited-layout-width: 990px;
......
......@@ -55,29 +55,10 @@
}
.top-bar {
@include build-trace-top-bar(35px, $header-height);
@include build-trace-top-bar(35px);
&.affix {
top: $header-height;
// 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;
margin-right: calc(#{$gutter-width} - 16px);
}
.truncated-info {
......@@ -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 {
.ci-header-container,
.header-action-buttons {
......
......@@ -5,7 +5,7 @@
- else
- 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
.container-fluid
.header-content
......
......@@ -8,7 +8,7 @@
}
.top-bar {
@include build-trace-top-bar(48px, $header-height-pod-logs);
@include build-trace-top-bar(48px);
display: flex;
.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'
describe 'Environment > Pod Logs', :js do
include KubernetesHelpers
SCROLL_DISTANCE = 400
let(:pod_names) { %w(foo bar) }
let(:pod_name) { pod_names.first }
let(:project) { create(:project, :repository) }
......@@ -39,4 +41,49 @@ describe 'Environment > Pod Logs', :js do
expect(page).to have_content("Log 1\nLog 2\nLog 3")
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
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