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

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

parent 65c184b63a3d
......@@ -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 @@ def conditional_link_to(condition, options, html_options = {}, &block)
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