From 7fcd4ae9dd465206eab131c7aeed8af1562117dc Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 7 Aug 2017 19:41:33 +0000 Subject: [PATCH] Improve mobile sidebar --- app/assets/stylesheets/new_sidebar.scss | 53 ++++++++----------- .../layouts/nav/_new_admin_sidebar.html.haml | 3 -- .../layouts/nav/_new_group_sidebar.html.haml | 3 -- .../nav/_new_profile_sidebar.html.haml | 3 -- .../nav/_new_project_sidebar.html.haml | 3 -- .../shared/_sidebar_toggle_button.html.haml | 4 ++ .../35483-improve-mobile-sidebar.yml | 4 ++ 7 files changed, 31 insertions(+), 42 deletions(-) create mode 100644 changelogs/unreleased/35483-improve-mobile-sidebar.yml diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index c82c8a00530..0b09fa8888c 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -15,7 +15,9 @@ $new-sidebar-width: 220px; $new-sidebar-collapsed-width: 50px; .page-with-new-sidebar { - padding-left: $new-sidebar-collapsed-width; + @media (min-width: $screen-md-min) { + padding-left: $new-sidebar-collapsed-width; + } @media (min-width: $screen-lg-min) { padding-left: $new-sidebar-width; @@ -49,10 +51,6 @@ $new-sidebar-collapsed-width: 50px; align-items: center; padding: 10px 16px 10px 10px; color: $gl-text-color; - - @media (max-width: $screen-xs-max) { - padding-right: 30px; - } } &:hover, @@ -77,26 +75,6 @@ $new-sidebar-collapsed-width: 50px; overflow: hidden; text-overflow: ellipsis; } - - .close-nav-button { - display: none; - position: absolute; - top: 0; - right: 0; - height: 100%; - background-color: transparent; - border: 0; - padding: 0 10px; - color: $gl-text-color-secondary; - - @media (max-width: $screen-xs-max) { - display: block; - } - - &:hover { - color: $gl-text-color; - } - } } .settings-avatar { @@ -339,21 +317,19 @@ $new-sidebar-collapsed-width: 50px; // Collapsed nav -.toggle-sidebar-button { +.toggle-sidebar-button, +.close-nav-button { width: $new-sidebar-width - 2px; position: fixed; bottom: 0; padding: 16px; background-color: $gray-normal; + border: 0; border-top: 2px solid $border-color; color: $gl-text-color-secondary; display: flex; align-items: center; - @media (max-width: $screen-xs-max) { - display: none; - } - i { font-size: 20px; margin-right: 8px; @@ -369,6 +345,13 @@ $new-sidebar-collapsed-width: 50px; } } +.toggle-sidebar-button { + @media (max-width: $screen-xs-max) { + display: none; + } +} + + .sidebar-icons-only { .context-header { height: 60px; @@ -415,6 +398,10 @@ $new-sidebar-collapsed-width: 50px; // Mobile nav +.close-nav-button { + display: none; +} + .toggle-mobile-nav { display: none; background-color: transparent; @@ -434,6 +421,12 @@ $new-sidebar-collapsed-width: 50px; } } +@media (max-width: $screen-xs-max) { + .close-nav-button { + display: flex; + } +} + .mobile-overlay { display: none; diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml index 06cfa509ebf..afa35b877ff 100644 --- a/app/views/layouts/nav/_new_admin_sidebar.html.haml +++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml @@ -4,9 +4,6 @@ .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 4a04b27b3d9..d0224cf8714 100644 --- a/app/views/layouts/nav/_new_group_sidebar.html.haml +++ b/app/views/layouts/nav/_new_group_sidebar.html.haml @@ -5,9 +5,6 @@ = 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: 'Group overview' do diff --git a/app/views/layouts/nav/_new_profile_sidebar.html.haml b/app/views/layouts/nav/_new_profile_sidebar.html.haml index df869fef604..c39db9a906b 100644 --- a/app/views/layouts/nav/_new_profile_sidebar.html.haml +++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml @@ -4,9 +4,6 @@ .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 4b7209fa69e..cdbc79e8adc 100644 --- a/app/views/layouts/nav/_new_project_sidebar.html.haml +++ b/app/views/layouts/nav/_new_project_sidebar.html.haml @@ -6,9 +6,6 @@ = 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: 'Project overview', class: 'shortcuts-project' do diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml index e70faad4894..eb5ddb0dde4 100644 --- a/app/views/shared/_sidebar_toggle_button.html.haml +++ b/app/views/shared/_sidebar_toggle_button.html.haml @@ -2,3 +2,7 @@ = icon('angle-double-left') = icon('angle-double-right') %span.collapse-text Collapse sidebar + += button_tag class: 'close-nav-button', type: 'button' do + = icon ('times') + %span.collapse-text Close sidebar diff --git a/changelogs/unreleased/35483-improve-mobile-sidebar.yml b/changelogs/unreleased/35483-improve-mobile-sidebar.yml new file mode 100644 index 00000000000..eb3dab1da9e --- /dev/null +++ b/changelogs/unreleased/35483-improve-mobile-sidebar.yml @@ -0,0 +1,4 @@ +--- +title: Improve mobile sidebar +merge_request: +author: