diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 35b7d4a044a1cf06853528ee8ff29c18f4185275..03bb7fc1f7b07287b5fac4351b0e3d7f56522207 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -207,6 +207,7 @@ $ ->
$('.navbar-toggle').on 'click', ->
$('.header-content .title').toggle()
+ $('.header-content .header-logo').toggle()
$('.header-content .navbar-collapse').toggle()
$('.navbar-toggle').toggleClass('active')
$('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
@@ -258,7 +259,7 @@ $ ->
checkInitialSidebarSize = ->
bootstrapBreakpoint = bp.getBreakpointSize()
- if bootstrapBreakpoint is "xs"
+ if bootstrapBreakpoint is "xs" or "sm"
$(document).trigger('breakpoint:change', [bootstrapBreakpoint])
$(window)
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 2540ff497f204e5a11d34df4fba8ca20d534b36a..bec0e5149636121737d25880ceeb65e6be7092e5 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -8,7 +8,7 @@
*/
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
.page-with-sidebar {
- .header-logo {
+ .gitlab-text-container {
background: $color-darker;
a {
@@ -23,6 +23,7 @@
background-color: $color-dark;
a {
color: $white-light;
+ text-decoration: none;
h3 {
color: $white-light;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f883ad1b8db88c3cea9fcfa6c52221ade5ab33df..7897e544af5a142832eddbf81627dd240c19788c 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -109,15 +109,17 @@ header {
position: relative;
height: $header-height;
padding-right: 40px;
-
- @media (max-width: $screen-xs-min) {
- padding-left: 40px;
- }
+ padding-left: 30px;
+ transition-duration: .3s;
@media (min-width: $screen-sm-min) {
padding-right: 0;
}
+ @media (max-width: $screen-sm-max) {
+ padding-right: 30px;
+ }
+
.dropdown-menu {
margin-top: -5px;
}
@@ -127,6 +129,13 @@ header {
left: 50%;
margin-left: -18px;
top: 7px;
+ transition-duration: .3s;
+ z-index: 999;
+
+ @media (max-width: $screen-sm-min) {
+ right: 25px;
+ left: auto;
+ }
}
.title {
@@ -142,6 +151,10 @@ header {
vertical-align: top;
white-space: nowrap;
+ @media (max-width: $screen-sm-min) {
+ max-width: 220px;
+ }
+
a {
color: $gl-text-color;
&:hover {
@@ -169,6 +182,10 @@ header {
.navbar-collapse {
float: right;
border-top: none;
+
+ @media (max-width: $screen-sm-min) {
+ float: none;
+ }
}
}
@@ -185,17 +202,11 @@ header {
margin-left: 0;
.header-content {
- padding-left: 30px;
- transition-duration: .3s;
- }
-}
-.header-expanded {
- margin-left: 0;
-
- .header-content {
- margin-left: $sidebar_width;
- transition-duration: .3s;
+ @media (min-width: $screen-sm-max) {
+ padding-left: 30px;
+ transition-duration: .3s;
+ }
}
}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 8982eaa6833eeeec1589fce9afef2ccd1e474004..75f44d8161488586c1ee9c005cf360e0f9118d89 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -350,6 +350,8 @@
}
.nav-control {
+ padding-left: 0;
+ transition-duration: .3s;
.fade-right {
@media (min-width: $screen-xs-max) {
@@ -362,6 +364,23 @@
}
}
+.page-sidebar-collapsed {
+
+ .nav-control {
+ @media (min-width: $screen-md-min) {
+ padding-left: 32px;
+ transition-duration: .3s;
+ }
+ }
+
+ .layout-nav {
+
+ @media (max-width: $screen-sm-min) {
+ padding-left: 0;
+ }
+ }
+}
+
.scrolling-tabs-container {
position: relative;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 05c87cf0d49ddc17b0f0c1c363dd95f06e221304..e461550984add49d219a14dbd6e7ec761ce141b2 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -35,9 +35,9 @@
}
.sidebar-wrapper {
- .header-logo {
+ .gitlab-text-container {
height: $header-height;
- padding: 8px 26px;
+ padding: 0 19px;
width: $sidebar_width;
position: fixed;
z-index: 999;
@@ -47,6 +47,13 @@
&:hover {
background-color: #eee;
}
+
+ h3 {
+ font-size: 19px;
+ line-height: 50px;
+ font-weight: normal;
+ margin: 0;
+ }
}
.sidebar-user {
@@ -66,8 +73,19 @@
}
}
+
+.tanuki-shape {
+ transition: all 0.8s;
+
+ &:hover, &.highlight {
+ fill: rgb(255, 255, 255);
+ transition: all 0.1s;
+ }
+}
+
+
.nav-sidebar {
- margin-top: 22px;
+ margin-top: 22 + $header-height;
margin-bottom: 116px;
transition-duration: .3s;
list-style: none;
@@ -159,23 +177,15 @@
.sidebar-wrapper {
width: 0;
- .header-logo {
+ .gitlab-text-container {
width: 0;
- padding: 8px 0;
-
- a {
- padding-left: ($sidebar_collapsed_width - 36) / 2;
+ padding: 0;
- .gitlab-text-container {
- display: none;
- }
+ h3 {
+ display: none;
}
}
- #logo {
- display: none;
- }
-
.nav-sidebar {
width: $sidebar_collapsed_width;
@@ -206,24 +216,10 @@
}
}
-.gitlab-text-container {
- height: 50px;
- padding: 5px;
- text-align: center;
-
- h3 {
- color: white;
- margin: 0;
- font-size: 19px;
- line-height: 41px;
- font-weight: normal;
- }
-}
-
.page-sidebar-expanded {
padding-left: $sidebar_width;
- @media (max-width: $screen-xs-min) {
+ @media (max-width: $screen-sm-max) {
padding-left: 0;
}
@@ -246,13 +242,7 @@
}
.layout-nav {
- @media (max-width: $screen-xs-min) {
- padding-right: 0;
- }
-
- @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
- padding-right: 90px;
- }
+ padding-right: 0;
@media (min-width: $screen-md-min) {
padding-right: $sidebar_width;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 847b2f80bdf0e13b81a38893a8f89eb8c3db53b6..6f724afa9dfaa8a12695c489a18543a28218298b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,7 +1,7 @@
/*
* Layout
*/
-$sidebar_collapsed_width: 62px;
+$sidebar_collapsed_width: 0;
$sidebar_width: 90px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index def874008f4b8ea78b5c9b0a9f108ccfdc491316..6030613c8cf741b2ea9f797ad3ecbd5a08be96f5 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,7 +1,7 @@
.page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
.sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
- = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
- .gitlab-text-container
+ .gitlab-text-container
+ = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
%h3 GitLab
- if defined?(sidebar) && sidebar