Merge branch '34036-sidebar-mobile' into 'master'
Resolve "Navigation - Add contextual navigation on mobile" Closes #34036 See merge request !12944
This commit is contained in:
commit
652b2d0d29
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 16px 10px 10px;
|
||||
color: $gl-text-color;
|
||||
|
||||
@media (max-width: $screen-xs-max) {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-background;
|
||||
color: $hover-color;
|
||||
border-color: $hover-background;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-background;
|
||||
color: $hover-color;
|
||||
border-color: $hover-background;
|
||||
|
||||
.avatar-container {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.settings-avatar {
|
||||
background-color: $indigo-500;
|
||||
|
||||
i {
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue