From 2fa560d658ec7c49df97daadae443568bc72bdce Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Wed, 26 Aug 2015 13:15:02 +0200
Subject: [PATCH] Align header with content container
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
CHANGELOG | 1 +
app/assets/stylesheets/generic/header.scss | 66 ++-----------------
app/assets/stylesheets/generic/sidebar.scss | 43 ++++++++++++
.../stylesheets/themes/gitlab-theme.scss | 26 ++++----
app/views/layouts/_page.html.haml | 5 ++
app/views/layouts/header/_default.html.haml | 7 +-
6 files changed, 67 insertions(+), 81 deletions(-)
diff --git a/CHANGELOG b/CHANGELOG
index 5222ab1e3e1..5ab0b5c3faf 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -17,6 +17,7 @@ v 8.0.0 (unreleased)
- Gracefully handle SMTP user input errors (e.g. incorrect email addresses) to prevent Sidekiq retries (Stan Hu)
- Improve abuse reports management from admin area
- Move dashboard activity to separate page
+ - Limit content width to 1200px for most of pages to improve readability on big screens
v 7.14.1 (unreleased)
- Only include base URL in OmniAuth full_host parameter (Stan Hu)
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 31e2ad86691..6a29b32e196 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -20,16 +20,16 @@ header {
}
&.navbar-gitlab {
+ padding: 0 20px;
z-index: 100;
margin-bottom: 0;
min-height: $header-height;
border: none;
- width: 100%;
+ border-bottom: 1px solid #EEE;
- .container {
+ .container-fluid {
background: #FFF;
width: 100% !important;
- padding: 0;
filter: none;
.nav > li > a {
@@ -64,55 +64,11 @@ header {
}
}
- .header-logo {
- border-bottom: 1px solid transparent;
- float: left;
- height: $header-height;
- width: $sidebar_width;
- overflow: hidden;
- transition-duration: .3s;
-
- a {
- float: left;
- height: $header-height;
- width: 100%;
- padding: ($header-height - 36 ) / 2 8px;
- overflow: hidden;
-
- img {
- width: 36px;
- height: 36px;
- float: left;
- }
-
- .gitlab-text-container {
- width: 230px;
-
- h3 {
- width: 158px;
- float: left;
- margin: 0;
- margin-left: 14px;
- font-size: 18px;
- line-height: $header-height - 14;
- font-weight: normal;
- }
- }
- }
-
- &:hover {
- background-color: #EEE;
- }
- }
-
.header-content {
- border-bottom: 1px solid #EEE;
- padding-right: 35px;
height: $header-height;
.title {
margin: 0;
- padding: 0 15px 0 35px;
overflow: hidden;
font-size: 18px;
line-height: $header-height;
@@ -168,15 +124,7 @@ header {
}
@mixin collapsed-header {
- .header-logo {
- width: $sidebar_collapsed_width;
- }
-
- .header-content {
- .title {
- margin-left: 30px;
- }
- }
+ margin-left: $sidebar_collapsed_width;
}
@media (max-width: $screen-md-max) {
@@ -191,16 +139,14 @@ header {
}
.header-expanded {
+ margin-left: $sidebar_width;
}
}
@media (max-width: $screen-xs-max) {
- header .container {
+ header .container-fluid {
font-size: 18px;
- .title {
- }
-
.navbar-nav {
margin: 0px;
float: none !important;
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index b96664d30db..320bdb1c765 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -188,3 +188,46 @@
width: $sidebar_width - 2 * 10px;
}
}
+
+.sidebar-wrapper {
+ .header-logo {
+ border-bottom: 1px solid transparent;
+ float: left;
+ height: $header-height;
+ width: $sidebar_width;
+ overflow: hidden;
+ transition-duration: .3s;
+
+ a {
+ float: left;
+ height: $header-height;
+ width: 100%;
+ padding: ($header-height - 36 ) / 2 8px;
+ overflow: hidden;
+
+ img {
+ width: 36px;
+ height: 36px;
+ float: left;
+ }
+
+ .gitlab-text-container {
+ width: 230px;
+
+ h3 {
+ width: 158px;
+ float: left;
+ margin: 0;
+ margin-left: 14px;
+ font-size: 18px;
+ line-height: $header-height - 14;
+ font-weight: normal;
+ }
+ }
+ }
+
+ &:hover {
+ background-color: #EEE;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss
index 3589cb88d03..77b62c3153f 100644
--- a/app/assets/stylesheets/themes/gitlab-theme.scss
+++ b/app/assets/stylesheets/themes/gitlab-theme.scss
@@ -7,27 +7,23 @@
* $color-dark -
*/
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
- header {
- &.navbar-gitlab {
- .header-logo {
- background-color: $color-darker;
- border-color: $color-darker;
+ .page-with-sidebar {
+ .header-logo {
+ background-color: $color-darker;
+ border-color: $color-darker;
- a {
- color: $color-light;
- }
+ a {
+ color: $color-light;
+ }
- &:hover {
- background-color: $color-dark;
- a {
- color: #FFF;
- }
+ &:hover {
+ background-color: $color-dark;
+ a {
+ color: #FFF;
}
}
}
- }
- .page-with-sidebar {
.collapse-nav a {
color: #FFF;
background: $color;
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3d58f993cac..0104d7198df 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,6 +1,11 @@
.page-with-sidebar{ class: nav_sidebar_class }
= render "layouts/broadcast"
.sidebar-wrapper.nicescroll
+ .header-logo
+ = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = brand_header_logo
+ .gitlab-text-container
+ %h3 GitLab
- if defined?(sidebar) && sidebar
= render "layouts/nav/#{sidebar}"
- elsif current_user
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 6086f36f07e..0b630b55c70 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,10 +1,5 @@
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
- .container
- .header-logo
- = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
- = brand_header_logo
- .gitlab-text-container
- %h3 GitLab
+ %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" }
.header-content
%button.navbar-toggle{type: 'button'}
%span.sr-only Toggle navigation
--
GitLab