Commit a4e394ca authored by Phil Hughes's avatar Phil Hughes

Merge branch '35483-improve-mobile-sidebar' into 'master'

Improve mobile sidebar

Closes #35483

See merge request !13349
parents c2a8daf9 7fcd4ae9
...@@ -15,7 +15,9 @@ $new-sidebar-width: 220px; ...@@ -15,7 +15,9 @@ $new-sidebar-width: 220px;
$new-sidebar-collapsed-width: 50px; $new-sidebar-collapsed-width: 50px;
.page-with-new-sidebar { .page-with-new-sidebar {
@media (min-width: $screen-md-min) {
padding-left: $new-sidebar-collapsed-width; padding-left: $new-sidebar-collapsed-width;
}
@media (min-width: $screen-lg-min) { @media (min-width: $screen-lg-min) {
padding-left: $new-sidebar-width; padding-left: $new-sidebar-width;
...@@ -49,10 +51,6 @@ $new-sidebar-collapsed-width: 50px; ...@@ -49,10 +51,6 @@ $new-sidebar-collapsed-width: 50px;
align-items: center; align-items: center;
padding: 10px 16px 10px 10px; padding: 10px 16px 10px 10px;
color: $gl-text-color; color: $gl-text-color;
@media (max-width: $screen-xs-max) {
padding-right: 30px;
}
} }
&:hover, &:hover,
...@@ -77,26 +75,6 @@ $new-sidebar-collapsed-width: 50px; ...@@ -77,26 +75,6 @@ $new-sidebar-collapsed-width: 50px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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 { .settings-avatar {
...@@ -339,21 +317,19 @@ $new-sidebar-collapsed-width: 50px; ...@@ -339,21 +317,19 @@ $new-sidebar-collapsed-width: 50px;
// Collapsed nav // Collapsed nav
.toggle-sidebar-button { .toggle-sidebar-button,
.close-nav-button {
width: $new-sidebar-width - 2px; width: $new-sidebar-width - 2px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
padding: 16px; padding: 16px;
background-color: $gray-normal; background-color: $gray-normal;
border: 0;
border-top: 2px solid $border-color; border-top: 2px solid $border-color;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
display: flex; display: flex;
align-items: center; align-items: center;
@media (max-width: $screen-xs-max) {
display: none;
}
i { i {
font-size: 20px; font-size: 20px;
margin-right: 8px; margin-right: 8px;
...@@ -369,6 +345,13 @@ $new-sidebar-collapsed-width: 50px; ...@@ -369,6 +345,13 @@ $new-sidebar-collapsed-width: 50px;
} }
} }
.toggle-sidebar-button {
@media (max-width: $screen-xs-max) {
display: none;
}
}
.sidebar-icons-only { .sidebar-icons-only {
.context-header { .context-header {
height: 60px; height: 60px;
...@@ -415,6 +398,10 @@ $new-sidebar-collapsed-width: 50px; ...@@ -415,6 +398,10 @@ $new-sidebar-collapsed-width: 50px;
// Mobile nav // Mobile nav
.close-nav-button {
display: none;
}
.toggle-mobile-nav { .toggle-mobile-nav {
display: none; display: none;
background-color: transparent; background-color: transparent;
...@@ -434,6 +421,12 @@ $new-sidebar-collapsed-width: 50px; ...@@ -434,6 +421,12 @@ $new-sidebar-collapsed-width: 50px;
} }
} }
@media (max-width: $screen-xs-max) {
.close-nav-button {
display: flex;
}
}
.mobile-overlay { .mobile-overlay {
display: none; display: none;
......
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
.avatar-container.s40.settings-avatar .avatar-container.s40.settings-avatar
= icon('wrench') = icon('wrench')
.project-title Admin Area .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 %ul.sidebar-top-level-items
= nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do = 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 = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
......
...@@ -5,9 +5,6 @@ ...@@ -5,9 +5,6 @@
= image_tag group_icon(@group), class: "avatar s40 avatar-tile" = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
.group-title .group-title
= @group.name = @group.name
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items %ul.sidebar-top-level-items
= nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
= link_to group_path(@group), title: 'Group overview' do = link_to group_path(@group), title: 'Group overview' do
......
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
.avatar-container.s40.settings-avatar .avatar-container.s40.settings-avatar
= icon('user') = icon('user')
.project-title User Settings .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 %ul.sidebar-top-level-items
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do = link_to profile_path, title: 'Profile Settings' do
......
...@@ -6,9 +6,6 @@ ...@@ -6,9 +6,6 @@
= project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile') = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
.project-title .project-title
= @project.name = @project.name
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items %ul.sidebar-top-level-items
= nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do = 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 = link_to project_path(@project), title: 'Project overview', class: 'shortcuts-project' do
......
...@@ -2,3 +2,7 @@ ...@@ -2,3 +2,7 @@
= icon('angle-double-left') = icon('angle-double-left')
= icon('angle-double-right') = icon('angle-double-right')
%span.collapse-text Collapse sidebar %span.collapse-text Collapse sidebar
= button_tag class: 'close-nav-button', type: 'button' do
= icon ('times')
%span.collapse-text Close sidebar
---
title: Improve mobile sidebar
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment