Commit 45d28fe5 authored by Simon Knox's avatar Simon Knox Committed by Filipa Lacerda
Browse files

Backport ee 7203 sticky logs topbar

parent 50a005ea9229
......@@ -250,6 +250,100 @@
max-width: 100%;
}
/*
* Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
*/
@mixin build-trace {
background: $black;
color: $gray-darkest;
white-space: pre;
overflow-x: auto;
font-size: 12px;
border-radius: 0;
border: 0;
padding: $grid-size;
.bash {
display: block;
}
&.build-trace-rounded {
border-radius: $border-radius-base;
}
}
@mixin build-trace-top-bar($height) {
height: $height;
min-height: $height;
background: $gray-light;
border: 1px solid $border-color;
color: $gl-text-color;
position: sticky;
position: -webkit-sticky;
top: $header-height;
padding: $grid-size;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
}
}
/*
* Mixin that handles the position of the controls placed on the top bar
*/
@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size) {
display: flex;
font-size: $control-font-size;
justify-content: $flex-direction;
align-items: center;
align-self: baseline;
@if $with-grow {
flex-grow: $flex-grow-size;
}
svg {
width: 15px;
height: 15px;
display: block;
fill: $gl-text-color;
}
.controllers-buttons {
color: $gl-text-color;
margin: 0 $grid-size;
&:last-child {
margin-right: 0;
}
}
.btn-scroll.animate {
.first-triangle {
animation: blinking-scroll-button 1s ease infinite;
animation-delay: 0.3s;
}
.second-triangle {
animation: blinking-scroll-button 1s ease infinite;
animation-delay: 0.2s;
}
.third-triangle {
animation: blinking-scroll-button 1s ease infinite;
}
&:disabled {
opacity: 1;
}
}
.btn-scroll:disabled,
.btn-refresh:disabled {
opacity: 0.35;
cursor: not-allowed;
}
}
@mixin build-loader-animation {
position: relative;
white-space: initial;
......
......@@ -50,35 +50,13 @@
position: relative;
}
.build-trace {
background: $black;
color: $gray-darkest;
white-space: pre;
overflow-x: auto;
font-size: 12px;
border-radius: 0;
border: 0;
padding: $grid-size;
.bash {
display: block;
}
&.build-trace-rounded {
border-radius: $border-radius-base;
}
.build-trace {
@include build-trace();
}
.top-bar {
height: 35px;
min-height: 35px;
background: $gray-light;
border: 1px solid $border-color;
color: $gl-text-color;
position: sticky;
position: -webkit-sticky;
top: $header-height;
padding: $grid-size;
@include build-trace-top-bar(35px);
&.affix {
top: $header-height;
......@@ -116,49 +94,7 @@
}
.controllers {
display: flex;
justify-content: center;
align-items: center;
svg {
height: 15px;
display: block;
fill: $gl-text-color;
}
.controllers-buttons {
color: $gl-text-color;
margin: 0 $grid-size;
&:last-child {
margin-right: 0;
}
}
.btn-scroll.animate {
.first-triangle {
animation: blinking-scroll-button 1s ease infinite;
animation-delay: 0.3s;
}
.second-triangle {
animation: blinking-scroll-button 1s ease infinite;
animation-delay: 0.2s;
}
.third-triangle {
animation: blinking-scroll-button 1s ease infinite;
}
&:disabled {
opacity: 1;
}
}
.btn-scroll:disabled {
opacity: 0.35;
cursor: not-allowed;
}
@include build-controllers(15px, center, false, 0);
}
}
......@@ -183,12 +119,8 @@
}
.with-performance-bar .build-page {
.top-bar {
.top-bar.affix {
top: $header-height + $performance-bar-height;
&.affix {
top: $header-height + $performance-bar-height;
}
}
}
......
......@@ -5,7 +5,7 @@
- else
- search_path_url = search_path
%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm
%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.js-navbar
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid
.header-content
......
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