diff options
| -rw-r--r-- | app/assets/javascripts/new_sidebar.js | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 19 | ||||
| -rw-r--r-- | app/views/layouts/_page.html.haml | 2 | ||||
| -rw-r--r-- | app/views/layouts/nav/_breadcrumbs.html.haml | 5 | ||||
| -rw-r--r-- | app/views/layouts/nav/_new_admin_sidebar.html.haml | 11 | ||||
| -rw-r--r-- | app/views/layouts/nav/_new_group_sidebar.html.haml | 13 | ||||
| -rw-r--r-- | app/views/layouts/nav/_new_profile_sidebar.html.haml | 11 |
7 files changed, 47 insertions, 21 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js index 4aadeb6b462..ccf45fd7c97 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/app/assets/javascripts/new_sidebar.js @@ -1,5 +1,3 @@ -const SIDEBAR_EXPANDED_CLASS = 'nav-sidebar-expanded'; - export default class NewNavSidebar { constructor() { this.initDomElements(); @@ -8,6 +6,7 @@ export default class NewNavSidebar { initDomElements() { this.$sidebar = $('.nav-sidebar'); + this.$overlay = $('.mobile-overlay'); this.$openSidebar = $('.toggle-mobile-nav'); this.$closeSidebar = $('.close-nav-button'); } @@ -15,9 +14,11 @@ export default class NewNavSidebar { bindEvents() { this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true)); this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false)); + this.$overlay.on('click', e => this.toggleSidebarNav(e, false)); } toggleSidebarNav(show) { - this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show); + this.$sidebar.toggleClass('nav-sidebar-expanded', show); + this.$overlay.toggleClass('mobile-nav-open', show); } } diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index eaf7daaa5cf..0ab5322a7a4 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -115,7 +115,7 @@ $new-sidebar-width: 220px; position: fixed; z-index: 400; width: $new-sidebar-width; - transition: width $sidebar-transition-duration; + transition: left $sidebar-transition-duration; top: 50px; bottom: 0; left: 0; @@ -124,7 +124,7 @@ $new-sidebar-width: 220px; box-shadow: inset -2px 0 0 $border-color; &.nav-sidebar-expanded { - width: $new-sidebar-width; + left: 0; } a { @@ -156,7 +156,7 @@ $new-sidebar-width: 220px; } @media (max-width: $screen-xs-max) { - width: 0; + left: (-$new-sidebar-width); } } @@ -242,6 +242,19 @@ $new-sidebar-width: 220px; } } +.mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: absolute; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: 300; + } +} + // Make issue boards full-height now that sub-nav is gone diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index cc9219cb6fe..7734c1d8be3 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -10,6 +10,8 @@ - if content_for?(:sub_nav) = yield :sub_nav .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" } + - if show_new_nav? + .mobile-overlay .alert-wrapper = render "layouts/broadcast" - if show_new_nav? diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 475d89f1156..cef6e022d2b 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -3,8 +3,9 @@ %nav.breadcrumbs{ role: "navigation" } .breadcrumbs-container{ class: [container_class, @content_class] } - %button.toggle-mobile-nav - = icon ('bars') + - if defined?(@new_sidebar) + %button.toggle-mobile-nav + = icon ('bars') .breadcrumbs-links.js-title-container - unless hide_top_links .title diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml index d7a9e530983..2b5523f6fad 100644 --- a/app/views/layouts/nav/_new_admin_sidebar.html.haml +++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml @@ -1,8 +1,11 @@ .nav-sidebar - = link_to admin_root_path, title: 'Admin Overview', class: 'context-header' do - .avatar-container.s40.settings-avatar - = icon('wrench') - .project-title Admin Area + .context-header + = link_to admin_root_path, title: 'Admin Overview' do + .avatar-container.s40.settings-avatar + = icon('wrench') + .project-title Admin Area + %button.close-nav-button + = icon('times') %ul.sidebar-top-level-items = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do diff --git a/app/views/layouts/nav/_new_group_sidebar.html.haml b/app/views/layouts/nav/_new_group_sidebar.html.haml index c80308ed0de..fdb66d827ec 100644 --- a/app/views/layouts/nav/_new_group_sidebar.html.haml +++ b/app/views/layouts/nav/_new_group_sidebar.html.haml @@ -1,9 +1,12 @@ .nav-sidebar - = link_to group_path(@group), title: @group.name, class: 'context-header' do - .avatar-container.s40.group-avatar - = image_tag group_icon(@group), class: "avatar s40 avatar-tile" - .group-title - = @group.name + .context-header + = link_to group_path(@group), title: @group.name do + .avatar-container.s40.group-avatar + = image_tag group_icon(@group), class: "avatar s40 avatar-tile" + .group-title + = @group.name + %button.close-nav-button + = icon('times') %ul.sidebar-top-level-items = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do = link_to group_path(@group), title: 'Home' do diff --git a/app/views/layouts/nav/_new_profile_sidebar.html.haml b/app/views/layouts/nav/_new_profile_sidebar.html.haml index 033ea149cfb..ce4eecc6c79 100644 --- a/app/views/layouts/nav/_new_profile_sidebar.html.haml +++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml @@ -1,8 +1,11 @@ .nav-sidebar - = link_to profile_path, title: 'Profile Settings', class: 'context-header' do - .avatar-container.s40.settings-avatar - = icon('user') - .project-title User Settings + .context-header + = link_to profile_path, title: 'Profile Settings' do + .avatar-container.s40.settings-avatar + = icon('user') + .project-title User Settings + %button.close-nav-button + = icon('times') %ul.sidebar-top-level-items = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = link_to profile_path, title: 'Profile Settings' do |