diff options
author | Phil Hughes <me@iamphill.com> | 2017-07-20 09:49:30 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-07-20 09:49:30 +0000 |
commit | 652b2d0d293ab054925cbd7e23b298ca06db1810 (patch) | |
tree | e91f0a20cf5e1878909989283222dd396f138013 /app | |
parent | 445cd22c72ca6fbfdcf18d67fa859c4b5b9e2a6c (diff) | |
parent | b711e10093f303c2d35aa3ebe9aff1c30c74ae7c (diff) | |
download | gitlab-ce-652b2d0d293ab054925cbd7e23b298ca06db1810.tar.gz |
Merge branch '34036-sidebar-mobile' into 'master'
Resolve "Navigation - Add contextual navigation on mobile"
Closes #34036
See merge request !12944
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/layout_nav.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/new_sidebar.js | 23 | ||||
-rw-r--r-- | app/assets/stylesheets/new_nav.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 116 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/nav/_breadcrumbs.html.haml | 4 | ||||
-rw-r--r-- | app/views/layouts/nav/_new_admin_sidebar.html.haml | 12 | ||||
-rw-r--r-- | app/views/layouts/nav/_new_group_sidebar.html.haml | 14 | ||||
-rw-r--r-- | app/views/layouts/nav/_new_profile_sidebar.html.haml | 12 | ||||
-rw-r--r-- | app/views/layouts/nav/_new_project_sidebar.html.haml | 14 |
10 files changed, 164 insertions, 43 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index 71064ccc539..6186ffe20b3 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -1,5 +1,7 @@ /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */ import _ from 'underscore'; +import Cookies from 'js-cookie'; +import NewNavSidebar from './new_sidebar'; (function() { var hideEndFade; @@ -53,6 +55,11 @@ import _ from 'underscore'; } $(() => { + if (Cookies.get('new_nav') === 'true') { + const newNavSidebar = new NewNavSidebar(); + newNavSidebar.bindEvents(); + } + $(window).on('scroll', _.throttle(applyScrollNavClass, 100)); }); }).call(window); diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js new file mode 100644 index 00000000000..5f98aff8ced --- /dev/null +++ b/app/assets/javascripts/new_sidebar.js @@ -0,0 +1,23 @@ +export default class NewNavSidebar { + constructor() { + this.initDomElements(); + } + + initDomElements() { + this.$sidebar = $('.nav-sidebar'); + this.$overlay = $('.mobile-overlay'); + this.$openSidebar = $('.toggle-mobile-nav'); + this.$closeSidebar = $('.close-nav-button'); + } + + bindEvents() { + this.$openSidebar.on('click', () => this.toggleSidebarNav(true)); + this.$closeSidebar.on('click', () => this.toggleSidebarNav(false)); + this.$overlay.on('click', () => this.toggleSidebarNav(false)); + } + + toggleSidebarNav(show) { + this.$sidebar.toggleClass('nav-sidebar-expanded', show); + this.$overlay.toggleClass('mobile-nav-open', show); + } +} diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 2ee831e5e32..e1873506bec 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -275,8 +275,6 @@ header.navbar-gitlab-new { .breadcrumbs { display: flex; min-height: 60px; - padding-top: $gl-padding-top; - padding-bottom: $gl-padding-top; color: $gl-text-color; border-bottom: 1px solid $border-color; @@ -300,6 +298,7 @@ header.navbar-gitlab-new { display: flex; width: 100%; position: relative; + align-items: center; .dropdown-menu-projects { margin-top: -$gl-padding; diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index bd9a5d7392d..ce8f4c41cb5 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -26,41 +26,75 @@ $new-sidebar-width: 220px; } .context-header { - border-bottom: 1px solid $border-color; - font-weight: 600; - display: flex; - align-items: center; - padding: 10px 16px 10px 10px; - color: $gl-text-color; + position: relative; - .avatar-container { - flex: 0 0 40px; - background-color: $white-light; - } - - &:hover { - background-color: $hover-background; - color: $hover-color; - border-color: $hover-background; + a { + border-bottom: 1px solid $border-color; + font-weight: 600; + display: flex; + align-items: center; + padding: 10px 16px 10px 10px; + color: $gl-text-color; - .avatar-container { - border-color: transparent; + @media (max-width: $screen-xs-max) { + padding-right: 30px; } - .settings-avatar { - background-color: $indigo-500; + &:hover { + background-color: $hover-background; + color: $hover-color; + border-color: $hover-background; - i { - color: $hover-color; + .avatar-container { + border-color: transparent; + } + + .settings-avatar { + background-color: $indigo-500; + + i { + color: $hover-color; + } } } } + .avatar-container { + flex: 0 0 40px; + background-color: $white-light; + } + .project-title, .group-title { overflow: hidden; text-overflow: ellipsis; } + + + &:hover { + .close-nav-button { + color: $white-light; + } + } + + .close-nav-button { + display: none; + position: absolute; + top: 0; + right: 0; + height: 100%; + background-color: transparent; + border: 0; + padding: 0 10px; + + @media (max-width: $screen-xs-max) { + display: block; + } + + &:hover { + color: $gl-text-color; + } + } } .settings-avatar { @@ -79,7 +113,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; @@ -87,6 +121,10 @@ $new-sidebar-width: 220px; background-color: $gray-normal; box-shadow: inset -2px 0 0 $border-color; + &.nav-sidebar-expanded { + left: 0; + } + a { transition: none; text-decoration: none; @@ -117,7 +155,7 @@ $new-sidebar-width: 220px; } @media (max-width: $screen-xs-max) { - width: 0; + left: (-$new-sidebar-width); } } @@ -183,6 +221,38 @@ $new-sidebar-width: 220px; } } +.toggle-mobile-nav { + display: none; + background-color: transparent; + border: 0; + padding: 6px 16px; + margin: 0 16px 0 -15px; + height: 46px; + border-right: 1px solid $gl-text-color-quaternary; + + i { + font-size: 20px; + color: $gl-text-color-secondary; + } + + @media (max-width: $screen-xs-max) { + display: inline-block; + } +} + +.mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + 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 e90197320f2..873220cc73d 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 9aed0efae1c..4db84771f4e 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -3,6 +3,10 @@ %nav.breadcrumbs{ role: "navigation" } .breadcrumbs-container{ class: [container_class, @content_class] } + - if defined?(@new_sidebar) + = button_tag class: 'toggle-mobile-nav', type: 'button' do + %span.sr-only Open sidebar + = 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 5cc636e89ef..95443de40c2 100644 --- a/app/views/layouts/nav/_new_admin_sidebar.html.haml +++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml @@ -1,8 +1,12 @@ .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_tag class: 'close-nav-button', type: 'button' do + %span.sr-only Close sidebar + = 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 6e0c45739f1..a7897c09e79 100644 --- a/app/views/layouts/nav/_new_group_sidebar.html.haml +++ b/app/views/layouts/nav/_new_group_sidebar.html.haml @@ -1,9 +1,13 @@ .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_tag class: 'close-nav-button', type: 'button' do + %span.sr-only Close sidebar + = 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: 'About group' 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..239e6b949e2 100644 --- a/app/views/layouts/nav/_new_profile_sidebar.html.haml +++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml @@ -1,8 +1,12 @@ .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_tag class: 'close-nav-button', type: 'button' do + %span.sr-only Close sidebar + = 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 diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml index 882123c0b0a..21f175291fa 100644 --- a/app/views/layouts/nav/_new_project_sidebar.html.haml +++ b/app/views/layouts/nav/_new_project_sidebar.html.haml @@ -1,10 +1,14 @@ .nav-sidebar - can_edit = can?(current_user, :admin_project, @project) - = link_to project_path(@project), title: @project.name, class: 'context-header' do - .avatar-container.s40.project-avatar - = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile') - .project-title - = @project.name + .context-header + = link_to project_path(@project), title: @project.name do + .avatar-container.s40.project-avatar + = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile') + .project-title + = @project.name + = button_tag class: 'close-nav-button', type: 'button' do + %span.sr-only Close sidebar + = icon ('times') %ul.sidebar-top-level-items = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do = link_to project_path(@project), title: 'About project', class: 'shortcuts-project' do |