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;
$new-sidebar-collapsed-width: 50px;
.page-with-new-sidebar {
@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;
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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
---
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