diff options
author | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-06-09 20:37:47 +0300 |
---|---|---|
committer | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-06-10 20:01:51 +0300 |
commit | a1fbdbb6b106bcf6a959eb8f9a2a89dec6a15c9c (patch) | |
tree | 21c8bde73f7cb9d0361150335e9fb64efcbbb57d | |
parent | 8f3c0490dd4b445dd4f97ddcfb1c051f93322401 (diff) |
Move tanuki icon to center of nav bar; keep nav closed by default; remove collapsed nav cookie
-rw-r--r-- | app/assets/javascripts/application.js.coffee | 7 | ||||
-rw-r--r-- | app/assets/javascripts/sidebar.js.coffee | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 18 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 27 | ||||
-rw-r--r-- | app/views/layouts/_collapse_button.html.haml | 5 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 7 | ||||
-rw-r--r-- | app/views/layouts/header/_default.html.haml | 6 |
8 files changed, 44 insertions, 36 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index e0ca546350b..35b7d4a044a 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -241,7 +241,6 @@ $ -> $this.attr 'value', $this.val() $sidebarGutterToggle = $('.js-sidebar-toggle') - $navIconToggle = $('.toggle-nav-collapse') $(document) .off 'breakpoint:change' @@ -251,10 +250,6 @@ $ -> if $gutterIcon.hasClass('fa-angle-double-right') $sidebarGutterToggle.trigger('click') - $navIcon = $navIconToggle.find('.fa') - if $navIcon.hasClass('fa-angle-left') - $navIconToggle.trigger('click') - fitSidebarForSize = -> oldBootstrapBreakpoint = bootstrapBreakpoint bootstrapBreakpoint = bp.getBreakpointSize() @@ -263,7 +258,7 @@ $ -> checkInitialSidebarSize = -> bootstrapBreakpoint = bp.getBreakpointSize() - if bootstrapBreakpoint is "xs" or "sm" + if bootstrapBreakpoint is "xs" $(document).trigger('breakpoint:change', [bootstrapBreakpoint]) $(window) diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index ea4ac52da31..2ce63c16428 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -4,8 +4,6 @@ expanded = 'page-sidebar-expanded' toggleSidebar = -> $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}") $('header').toggleClass("header-collapsed header-expanded") - $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left") - $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' }) setTimeout ( -> niceScrollBars = $('.nicescroll').niceScroll(); @@ -17,10 +15,3 @@ $(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) -> toggleSidebar() ) - -$ -> - size = bp.getBreakpointSize() - - if size is "xs" or size is "sm" - if $('.page-with-sidebar').hasClass(expanded) - toggleSidebar() diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index b8d4233537b..f883ad1b8db 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -122,9 +122,18 @@ header { margin-top: -5px; } + .header-logo { + position: absolute; + left: 50%; + margin-left: -18px; + top: 7px; + } + .title { margin: 0; font-size: 19px; + max-width: 250px; + display: inline-block; line-height: $header-height; font-weight: normal; color: $gl-text-color; @@ -190,6 +199,15 @@ header { } } +.tanuki-shape { + transition: all 0.8s; + + &:hover, &.highlight { + fill: rgb(255, 255, 255); + transition: all 0.1s; + } +} + @media (max-width: $screen-xs-max) { header .container-fluid { font-size: 18px; diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index a036799e15a..8982eaa6833 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -1,6 +1,7 @@ @mixin fade($gradient-direction, $rgba, $gradient-color) { visibility: visible; opacity: 1; + z-index: 2; position: absolute; bottom: 12px; width: 43px; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 06a688690f8..05c87cf0d49 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -66,19 +66,8 @@ } } - -.tanuki-shape { - transition: all 0.8s; - - &:hover, &.highlight { - fill: rgb(255, 255, 255); - transition: all 0.1s; - } -} - - .nav-sidebar { - margin-top: 22 + $header-height; + margin-top: 22px; margin-bottom: 116px; transition-duration: .3s; list-style: none; @@ -217,6 +206,20 @@ } } +.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; diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml index 2ed51d87ca1..61c0e71f031 100644 --- a/app/views/layouts/_collapse_button.html.haml +++ b/app/views/layouts/_collapse_button.html.haml @@ -1,4 +1 @@ -- if nav_menu_collapsed? - = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close" -- else - = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close" += link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close" diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 261038ef940..def874008f4 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,9 +1,8 @@ -.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" } +.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 - .header-logo - #logo - = brand_header_logo + .gitlab-text-container + %h3 GitLab - if defined?(sidebar) && sidebar = render "layouts/nav/#{sidebar}" diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index c33740e23fa..184dac32e5a 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } +%header.navbar.navbar-fixed-top.navbar-gitlab.header-collapsed %div{ class: fluid_layout ? "container-fluid" : "container-fluid" } .header-content %button.side-nav-toggle{type: 'button'} @@ -50,6 +50,10 @@ %h1.title= title + .header-logo + #logo + = brand_header_logo + = yield :header_content = render 'shared/outdated_browser' |