Commit acc0d848 authored by Rémy Coutable's avatar Rémy Coutable Committed by Phil Hughes

Moves the Performance Bar to the top instead of being at the bottom

parent 15d00fc3
......@@ -315,6 +315,10 @@ header {
}
}
.with-performance-bar header.navbar-gitlab {
top: $performance-bar-height;
}
.navbar-nav {
li {
.badge {
......
......@@ -120,3 +120,7 @@ of the body element here, we negate cascading side effects but allow momentum sc
.page-with-sidebar {
-webkit-overflow-scrolling: auto;
}
.with-performance-bar .page-with-sidebar {
margin-top: $header-height + $performance-bar-height;
}
......@@ -347,6 +347,10 @@
}
}
.with-performance-bar .layout-nav {
margin-top: $header-height + $performance-bar-height;
}
.scrolling-tabs-container {
position: relative;
......@@ -441,6 +445,22 @@
}
}
.with-performance-bar .page-with-layout-nav {
.right-sidebar {
top: ($header-height + 1) * 2 + $performance-bar-height;
}
&.page-with-sub-nav {
.right-sidebar {
top: ($header-height + 1) * 3 + $performance-bar-height;
&.affix {
top: $header-height + $performance-bar-height;
}
}
}
}
.nav-block {
&.activities {
border-bottom: 1px solid $border-color;
......
......@@ -89,6 +89,10 @@
}
}
.with-performance-bar .right-sidebar.affix {
top: $header-height + $performance-bar-height;
}
@mixin maintain-sidebar-dimensions {
display: block;
width: $gutter-width;
......
......@@ -204,6 +204,7 @@ $divergence-graph-separator-bg: #ccc;
$general-hover-transition-duration: 100ms;
$general-hover-transition-curve: linear;
$highlight-changes-color: rgb(235, 255, 232);
$performance-bar-height: 35px;
/*
......
......@@ -118,7 +118,7 @@ $new-sidebar-width: 220px;
z-index: 400;
width: $new-sidebar-width;
transition: left $sidebar-transition-duration;
top: 50px;
top: $header-height;
bottom: 0;
left: 0;
overflow: auto;
......@@ -163,6 +163,10 @@ $new-sidebar-width: 220px;
}
}
.with-performance-bar .nav-sidebar {
top: $header-height + $performance-bar-height;
}
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
......@@ -260,7 +264,7 @@ $new-sidebar-width: 220px;
// Make issue boards full-height now that sub-nav is gone
.boards-list {
height: calc(100vh - 50px);
height: calc(100vh - #{$header-height});
@media (min-width: $screen-sm-min) {
height: 475px; // Needed for PhantomJS
......@@ -270,6 +274,10 @@ $new-sidebar-width: 220px;
}
}
.with-performance-bar .boards-list {
height: calc(100vh - #{$header-height} - #{$performance-bar-height});
}
// Change color of all horizontal tabs to match the new indigo color
.nav-links li.active a {
......
......@@ -64,10 +64,10 @@
color: $gl-text-color;
position: sticky;
position: -webkit-sticky;
top: 50px;
top: $header-height;
&.affix {
top: 50px;
top: $header-height;
}
// with sidebar
......@@ -171,6 +171,16 @@
}
}
.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 {
......
......@@ -445,6 +445,14 @@
}
}
.with-performance-bar .right-sidebar {
top: $header-height + $performance-bar-height;
.issuable-sidebar {
height: calc(100% - #{$header-height} - #{$performance-bar-height});
}
}
.detail-page-description {
padding: 16px 0;
......
......@@ -759,6 +759,10 @@
}
}
.with-performance-bar .merge-request-tabs-holder {
top: $header-height + $performance-bar-height;
}
.merge-request-tabs {
display: flex;
margin-bottom: 0;
......
......@@ -3,9 +3,16 @@
@import "peek/views/rblineprof";
#peek {
height: 35px;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 2000;
overflow-x: hidden;
height: $performance-bar-height;
background: $black;
line-height: 35px;
line-height: $performance-bar-height;
color: $perf-bar-text;
&.disabled {
......@@ -25,7 +32,8 @@
}
.wrapper {
width: 1000px;
width: 80%;
height: $performance-bar-height;
margin: 0 auto;
}
......
......@@ -264,7 +264,11 @@ module ApplicationHelper
end
def page_class
"issue-boards-page" if current_controller?(:boards)
class_names = []
class_names << 'issue-boards-page' if current_controller?(:boards)
class_names << 'with-performance-bar' if performance_bar_enabled?
class_names
end
# Returns active css class when condition returns true
......
module NavHelper
def page_with_sidebar_class
class_name = page_gutter_class
class_name << 'page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar
class_name
end
def page_gutter_class
if current_path?('merge_requests#show') ||
current_path?('projects/merge_requests/conflicts#show') ||
current_path?('issues#show') ||
current_path?('milestones#show')
if cookies[:collapsed_gutter] == 'true'
"page-gutter right-sidebar-collapsed"
%w[page-gutter right-sidebar-collapsed]
else
"page-gutter right-sidebar-expanded"
%w[page-gutter right-sidebar-expanded]
end
elsif current_path?('jobs#show')
"page-gutter build-sidebar right-sidebar-expanded"
%w[page-gutter build-sidebar right-sidebar-expanded]
elsif current_path?('wikis#show') ||
current_path?('wikis#edit') ||
current_path?('wikis#update') ||
current_path?('wikis#history') ||
current_path?('wikis#git_access')
"page-gutter wiki-sidebar right-sidebar-expanded"
%w[page-gutter wiki-sidebar right-sidebar-expanded]
else
[]
end
end
def nav_header_class
class_name = ''
class_name << " with-horizontal-nav" if defined?(nav) && nav
class_names = []
class_names << 'with-horizontal-nav' if defined?(nav) && nav
class_name
class_names
end
def layout_nav_class
class_name = ''
class_name << " page-with-layout-nav" if defined?(nav) && nav
class_name << " page-with-sub-nav" if content_for?(:sub_nav)
return [] if show_new_nav?
class_name
class_names = []
class_names << 'page-with-layout-nav' if defined?(nav) && nav
class_names << 'page-with-sub-nav' if content_for?(:sub_nav)
class_names
end
def nav_control_class
......
.page-with-sidebar{ class: "#{('page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar)} #{page_gutter_class}" }
.page-with-sidebar{ class: page_with_sidebar_class }
- if show_new_nav?
- if defined?(nav) && nav
= render "layouts/nav/#{nav}"
......@@ -9,7 +9,7 @@
= render "layouts/nav/#{nav}"
- if content_for?(:sub_nav)
= yield :sub_nav
.content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
.content-wrapper{ class: layout_nav_class }
- if show_new_nav?
.mobile-overlay
.alert-wrapper
......
!!! 5
%html{ lang: I18n.locale, class: "#{page_class}" }
%html{ lang: I18n.locale, class: page_class }
= render "layouts/head"
%body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } }
= render "layouts/init_auto_complete" if @gfm_form
= render 'peek/bar'
- if show_new_nav?
= render "layouts/header/new"
- else
......@@ -10,5 +11,3 @@
= render 'layouts/page', sidebar: sidebar, nav: nav
= yield :scripts_body
= render 'peek/bar'
%span.current-host
= truncate(view.hostname)
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