diff options
| -rw-r--r-- | app/assets/javascripts/application.js.coffee | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 39 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 19 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 64 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
| -rw-r--r-- | app/views/layouts/_page.html.haml | 4 |
7 files changed, 78 insertions, 56 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 35b7d4a044a..03bb7fc1f7b 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 2540ff497f2..bec0e514963 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 f883ad1b8db..7897e544af5 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 8982eaa6833..75f44d81614 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 05c87cf0d49..e461550984a 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 847b2f80bdf..6f724afa9df 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 def874008f4..6030613c8cf 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 |