diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index 596376c3970b84e77d7ee414cd491f5ef08cc252..c44fa06fc537f79ae91bf60a21b6fa40c3b8d781 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -5,6 +5,7 @@ $gl-link-color: #446e9b;
$nprogress-color: #c0392b;
$gl-font-size: 14px;
$list-font-size: 15px;
+$sidebar_collapsed_width: 52px;
$sidebar_width: 230px;
$avatar_radius: 50%;
$code_font_size: 13px;
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 3b0ee264bc3444fc645e13a1203d0f23f858a8ec..5da4d14b3bac542138d092da6853567dccbc1598 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -2,7 +2,13 @@
* Application Header
*
*/
+$header-height: 46px;
+
header {
+ &.empty-header .container {
+ border-bottom: 1px solid #EEE;
+ }
+
&.navbar-gitlab {
z-index: 100;
margin-bottom: 0;
@@ -13,54 +19,9 @@ header {
.container {
width: 100% !important;
padding: 0;
- padding-right: 35px;
background: #FFF;
- border-bottom: 1px solid #EEE;
filter: none;
- .title {
- position: relative;
- float: left;
- margin: 0;
- margin-left: 25px;
- font-size: 18px;
- line-height: 44px;
- font-weight: bold;
- color: #444;
-
- @include str-truncated(37%);
-
- a {
- color: #444;
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .app_logo {
- border-bottom: 1px solid transparent;
- margin-bottom: -1px;
-
- a {
- padding: 5px 8px;
-
- img {
- float: left;
- }
-
- h3 {
- width: 158px;
- float: left;
- margin: 0;
- margin-left: 20px;
- font-size: 18px;
- line-height: 34px;
- font-weight: normal;
- }
- }
- }
-
.nav > li > a {
color: #888;
font-size: 14px;
@@ -80,7 +41,6 @@ header {
}
}
- /** NAV block with links and profile **/
.nav {
float: right;
margin-right: 0;
@@ -96,73 +56,68 @@ header {
}
}
}
-
- .turbolink-spinner {
- font-size: 20px;
- margin-right: 10px;
- }
-
- @media (max-width: $screen-xs-max) {
- border-width: 0;
- font-size: 18px;
-
- .title {
- @include str-truncated(70%);
- }
-
- .navbar-collapse {
- margin-top: 47px;
- }
-
- .navbar-nav {
- margin: 5px 0;
-
- .visible-xs, .visable-sm {
- display: table-cell !important;
- }
- }
-
- li {
- display: table-cell;
- width: 1%;
-
- a {
- text-align: center;
- font-size: 18px !important;
- }
- }
- }
}
- /**
- *
- * Logo holder
- *
- */
- .app_logo {
+ .header-logo {
+ border-bottom: 1px solid transparent;
float: left;
- margin-right: 9px;
+ height: $header-height;
+ width: $sidebar_width;
a {
float: left;
- height: 46px;
+ height: $header-height;
width: 100%;
+ padding: 5px 8px;
+
+ h3 {
+ width: 158px;
+ float: left;
+ margin: 0;
+ margin-left: 20px;
+ font-size: 18px;
+ line-height: 34px;
+ font-weight: normal;
+ }
img {
width: 36px;
height: 36px;
+ float: left;
}
}
+
&:hover {
background-color: #EEE;
}
}
- /**
- *
- * Search box
- *
- */
+ .header-content {
+ border-bottom: 1px solid #EEE;
+ padding-right: 35px;
+ height: $header-height;
+
+ .title {
+ position: relative;
+ float: left;
+ margin: 0;
+ margin-left: 35px;
+ font-size: 18px;
+ line-height: 44px;
+ font-weight: bold;
+ color: #444;
+
+ @include str-truncated(37%);
+
+ a {
+ color: #444;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+
.search {
margin-right: 10px;
margin-left: 10px;
@@ -198,6 +153,22 @@ header {
width: 300px;
}
+@mixin collapsed-header {
+ .header-logo {
+ width: $sidebar_collapsed_width;
+
+ h3 {
+ display: none;
+ }
+ }
+
+ .header-content {
+ .title {
+ margin-left: 30px;
+ }
+ }
+}
+
@media (max-width: 1200px) {
.search .search-input {
width: 200px;
@@ -212,23 +183,48 @@ header {
@media (max-width: $screen-md-max) {
.header-collapsed, .header-expanded {
- width: 52px;
-
- h3 {
- display: none;
- }
+ @include collapsed-header;
}
}
@media(min-width: $screen-md-max) {
.header-collapsed {
- width: 52px;
-
- h3 {
- display: none;
- }
+ @include collapsed-header;
}
.header-expanded {
}
}
+
+@media (max-width: $screen-xs-max) {
+ header .container {
+ border-width: 0;
+ font-size: 18px;
+
+ .title {
+ @include str-truncated(70%);
+ }
+
+ .navbar-collapse {
+ margin-top: 47px;
+ }
+
+ .navbar-nav {
+ margin: 5px 0;
+
+ .visible-xs, .visable-sm {
+ display: table-cell !important;
+ }
+ }
+
+ li {
+ display: table-cell;
+ width: 1%;
+
+ a {
+ text-align: center;
+ font-size: 18px !important;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index a80b58508035efafc2c38b2fbf8fdab80191302e..5d4dee5691a99fe01490370f4ebf36123c0f4e43 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -102,13 +102,13 @@
padding-left: 50px;
.sidebar-wrapper {
- width: 52px;
+ width: $sidebar_collapsed_width;
.nav-sidebar {
margin-top: 29px;
position: fixed;
top: 45px;
- width: 52px;
+ width: $sidebar_collapsed_width;
li a {
padding-left: 18px;
@@ -125,7 +125,7 @@
.collapse-nav a {
left: 0px;
- width: 52px;
+ width: $sidebar_collapsed_width;
}
.sidebar-user {
diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss
index 9b8e3d8e291cc3e6939e497b1859d7be545e064b..a52c847da692d45c30f1f792d1f18d5cf5d1729a 100644
--- a/app/assets/stylesheets/themes/gitlab-theme.scss
+++ b/app/assets/stylesheets/themes/gitlab-theme.scss
@@ -1,8 +1,9 @@
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
header {
&.navbar-gitlab {
- .app_logo {
+ .header-logo {
background-color: $color-darker;
+ border-color: $color-darker;
a {
color: $color-light;
diff --git a/app/views/layouts/_empty_head_panel.html.haml b/app/views/layouts/_empty_head_panel.html.haml
index 358caa3868b826350bc9460b3348a83eb5989ed4..4939634dec9f71baff4d061a764e088a2c9e8801 100644
--- a/app/views/layouts/_empty_head_panel.html.haml
+++ b/app/views/layouts/_empty_head_panel.html.haml
@@ -1,4 +1,4 @@
-%header.navbar.navbar-fixed-top.navbar-gitlab
+%header.navbar.navbar-fixed-top.navbar-gitlab.empty-header
.container
%h4.center
= image_tag 'logo-white.png', width: 32, height: 32
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index ddf1ffc761693c091fd3ddc03653c74bfeb04b59..43076ee8869ccb400d9ec03149d041f8391cd3c3 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -1,42 +1,43 @@
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
.container
- %div.app_logo
+ .header-logo
= link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
= brand_header_logo
%h3 GitLab
- %h1.title
- = title
+ .header-content
+ %h1.title
+ = title
- %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}}
- %span.sr-only Toggle navigation
- = icon('bars')
+ %button.navbar-toggle{type: 'button', data: {target: '.navbar-collapse', toggle: 'collapse'}}
+ %span.sr-only Toggle navigation
+ = icon('bars')
- .navbar-collapse.collapse
- %ul.nav.navbar-nav
- %li.hidden-sm.hidden-xs
- = render 'layouts/search'
- %li.visible-sm.visible-xs
- = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('search')
- %li
- = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('question-circle fw')
- %li
- = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('globe fw')
- %li
- = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('clipboard fw')
- - if current_user.is_admin?
+ .navbar-collapse.collapse
+ %ul.nav.navbar-nav
+ %li.hidden-sm.hidden-xs
+ = render 'layouts/search'
+ %li.visible-sm.visible-xs
+ = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('search')
%li
- = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('wrench fw')
- - if current_user.can_create_project?
+ = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('question-circle fw')
%li
- = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('plus fw')
- %li
- = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do
- = icon('cog fw')
+ = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('globe fw')
+ %li
+ = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('clipboard fw')
+ - if current_user.is_admin?
+ %li
+ = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('wrench fw')
+ - if current_user.can_create_project?
+ %li
+ = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('plus fw')
+ %li
+ = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do
+ = icon('cog fw')
= render 'shared/outdated_browser'
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index 8a297566d6c156da6949041bb88888a69156534f..5cccf9a6ad20c3d354f778c00cebe41854bf746f 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -1,22 +1,23 @@
%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
.container
- %div.app_logo
+ .header-logo
= link_to explore_root_path, class: "home" do
= brand_header_logo
%h3 GitLab
- %h1.title= title
+ .header-content
+ %h1.title= title
- %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
- %span.sr-only Toggle navigation
- %i.fa.fa-bars
+ %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
+ %span.sr-only Toggle navigation
+ %i.fa.fa-bars
- - unless current_controller?('sessions')
- .pull-right.hidden-xs
- = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new append-right-10'
+ - unless current_controller?('sessions')
+ .pull-right.hidden-xs
+ = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new append-right-10'
- .navbar-collapse.collapse
- %ul.nav.navbar-nav
- %li.visible-xs
- = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes')
+ .navbar-collapse.collapse
+ %ul.nav.navbar-nav
+ %li.visible-xs
+ = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes')
= render 'shared/outdated_browser'