From 4860c4dc07181b97e50558c43b1e35a97677beb8 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 22 Apr 2015 16:48:39 +0300 Subject: Fix toggle of sidebar Signed-off-by: Dmitriy Zaporozhets --- app/assets/javascripts/sidebar.js.coffee | 1 + app/assets/stylesheets/generic/header.scss | 29 +++- app/assets/stylesheets/generic/nav_sidebar.scss | 169 ------------------------ app/assets/stylesheets/generic/sidebar.scss | 169 ++++++++++++++++++++++++ app/helpers/application_helper.rb | 8 -- app/helpers/nav_helper.rb | 16 +++ app/views/layouts/_head_panel.html.haml | 2 +- app/views/layouts/_public_head_panel.html.haml | 3 +- 8 files changed, 212 insertions(+), 185 deletions(-) delete mode 100644 app/assets/stylesheets/generic/nav_sidebar.scss create mode 100644 app/assets/stylesheets/generic/sidebar.scss diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index 2e3f5608257..fb08016fbae 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -4,6 +4,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) -> expanded = 'page-sidebar-expanded' $('.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: '/' }) ) diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 72870d2ff96..a86c01d4ce5 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -36,12 +36,6 @@ header { } .app_logo { - @media (max-width: $screen-md-max) { - width: 52px; - h3 { - display: none; - } - } border-bottom: 1px solid transparent; margin-bottom: -1px; @@ -229,3 +223,26 @@ header { right: 35px !important; } } + +@media (max-width: $screen-md-max) { + .header-collapsed, .header-expanded { + width: 52px; + + h3 { + display: none; + } + } +} + +@media(min-width: $screen-md-max) { + .header-collapsed { + width: 52px; + + h3 { + display: none; + } + } + + .header-expanded { + } +} diff --git a/app/assets/stylesheets/generic/nav_sidebar.scss b/app/assets/stylesheets/generic/nav_sidebar.scss deleted file mode 100644 index 36552083851..00000000000 --- a/app/assets/stylesheets/generic/nav_sidebar.scss +++ /dev/null @@ -1,169 +0,0 @@ -.page-with-sidebar { - background: $background-color; - - .sidebar-wrapper { - position: fixed; - top: 0; - left: 0; - height: 100%; - } -} - -.sidebar-wrapper { - z-index: 99; - background: $background-color; -} - -.content-wrapper { - width: 100%; - padding: 15px; - background: #FFF; -} - -.nav-sidebar { - margin: 0; - list-style: none; - - &.navbar-collapse { - padding: 0px !important; - } -} - -.nav-sidebar li a .count { - float: right; - background: #eee; - padding: 0px 8px; - @include border-radius(6px); -} - -.nav-sidebar li { -} - -.nav-sidebar li { - &.separate-item { - padding-top: 10px; - margin-top: 10px; - } - - a { - color: $gray; - display: block; - text-decoration: none; - padding: 8px 15px; - font-size: 13px; - line-height: 20px; - padding-left: 20px; - - &:hover { - text-decoration: none; - } - - &:active, &:focus { - text-decoration: none; - } - - i { - width: 20px; - color: $gray-light; - margin-right: 23px; - } - } -} - -.sidebar-subnav { - margin-left: 0px; - padding-left: 0px; - - li { - list-style: none; - } -} - -@mixin expanded-sidebar { - padding-left: $sidebar_width; - - .sidebar-wrapper { - width: $sidebar_width; - - .nav-sidebar { - margin-top: 29px; - position: fixed; - top: 45px; - width: $sidebar_width; - } - } - - .content-wrapper { - padding: 20px; - } -} - -@mixin folded-sidebar { - padding-left: 50px; - - .sidebar-wrapper { - width: 52px; - - .nav-sidebar { - margin-top: 29px; - position: fixed; - top: 45px; - width: 52px; - - li a { - padding-left: 18px; - font-size: 14px; - padding: 8px 15px; - text-align: center; - - - & > span { - display: none; - } - } - } - - .collapse-nav a { - left: 0px; - padding: 7px 23px 3px 22px; - } - } -} - -.collapse-nav a { - position: fixed; - top: 46px; - padding: 5px 13px 5px 13px; - left: 198px; - font-size: 13px; - background: transparent; -} - -.collapse-nav a:hover { - text-decoration: none; - background: #f2f6f7; -} - -@media (max-width: $screen-md-max) { - .page-sidebar-collapsed { - @include folded-sidebar; - } - - .page-sidebar-expanded { - @include folded-sidebar; - } - - .collapse-nav { - display: none; - } -} - -@media(min-width: $screen-md-max) { - .page-sidebar-collapsed { - @include folded-sidebar; - } - - .page-sidebar-expanded { - @include expanded-sidebar; - } -} diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss new file mode 100644 index 00000000000..36552083851 --- /dev/null +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -0,0 +1,169 @@ +.page-with-sidebar { + background: $background-color; + + .sidebar-wrapper { + position: fixed; + top: 0; + left: 0; + height: 100%; + } +} + +.sidebar-wrapper { + z-index: 99; + background: $background-color; +} + +.content-wrapper { + width: 100%; + padding: 15px; + background: #FFF; +} + +.nav-sidebar { + margin: 0; + list-style: none; + + &.navbar-collapse { + padding: 0px !important; + } +} + +.nav-sidebar li a .count { + float: right; + background: #eee; + padding: 0px 8px; + @include border-radius(6px); +} + +.nav-sidebar li { +} + +.nav-sidebar li { + &.separate-item { + padding-top: 10px; + margin-top: 10px; + } + + a { + color: $gray; + display: block; + text-decoration: none; + padding: 8px 15px; + font-size: 13px; + line-height: 20px; + padding-left: 20px; + + &:hover { + text-decoration: none; + } + + &:active, &:focus { + text-decoration: none; + } + + i { + width: 20px; + color: $gray-light; + margin-right: 23px; + } + } +} + +.sidebar-subnav { + margin-left: 0px; + padding-left: 0px; + + li { + list-style: none; + } +} + +@mixin expanded-sidebar { + padding-left: $sidebar_width; + + .sidebar-wrapper { + width: $sidebar_width; + + .nav-sidebar { + margin-top: 29px; + position: fixed; + top: 45px; + width: $sidebar_width; + } + } + + .content-wrapper { + padding: 20px; + } +} + +@mixin folded-sidebar { + padding-left: 50px; + + .sidebar-wrapper { + width: 52px; + + .nav-sidebar { + margin-top: 29px; + position: fixed; + top: 45px; + width: 52px; + + li a { + padding-left: 18px; + font-size: 14px; + padding: 8px 15px; + text-align: center; + + + & > span { + display: none; + } + } + } + + .collapse-nav a { + left: 0px; + padding: 7px 23px 3px 22px; + } + } +} + +.collapse-nav a { + position: fixed; + top: 46px; + padding: 5px 13px 5px 13px; + left: 198px; + font-size: 13px; + background: transparent; +} + +.collapse-nav a:hover { + text-decoration: none; + background: #f2f6f7; +} + +@media (max-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include folded-sidebar; + } + + .collapse-nav { + display: none; + } +} + +@media(min-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include expanded-sidebar; + } +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 20457572a08..5c77af729d0 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -314,12 +314,4 @@ module ApplicationHelper profile_key_path(key) end end - - def nav_sidebar_class - if nav_menu_collapsed? - "page-sidebar-collapsed" - else - "page-sidebar-expanded" - end - end end diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index 2b03269800e..9b1dd8b8e54 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -2,4 +2,20 @@ module NavHelper def nav_menu_collapsed? cookies[:collapsed_nav] == 'true' end + + def nav_sidebar_class + if nav_menu_collapsed? + "page-sidebar-collapsed" + else + "page-sidebar-expanded" + end + end + + def nav_header_class + if nav_menu_collapsed? + "header-collapsed" + else + "header-expanded" + end + end end diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml index 6851dd64df5..281ce31fe9c 100644 --- a/app/views/layouts/_head_panel.html.haml +++ b/app/views/layouts/_head_panel.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab +%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } .navbar-inner .container %div.app_logo diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml index 3d6d2bfc00a..98a87a39bd4 100644 --- a/app/views/layouts/_public_head_panel.html.haml +++ b/app/views/layouts/_public_head_panel.html.haml @@ -1,9 +1,10 @@ -%header.navbar.navbar-fixed-top.navbar-gitlab +%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } .navbar-inner .container %div.app_logo = link_to explore_root_path, class: "home" do = brand_header_logo + %h3 GitLab %h1.title= title %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"} -- cgit v1.2.1