Commit b711e100 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Fix JS; make buttons sr accessibile; fix overlay

parent 49ee81ca
/* 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 */ /* 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 _ from 'underscore';
import Cookies from 'js-cookie';
import NewNavSidebar from './new_sidebar'; import NewNavSidebar from './new_sidebar';
(function() { (function() {
...@@ -54,8 +55,11 @@ import NewNavSidebar from './new_sidebar'; ...@@ -54,8 +55,11 @@ import NewNavSidebar from './new_sidebar';
} }
$(() => { $(() => {
var newNavSidebar = new NewNavSidebar(); if (Cookies.get('new_nav') === 'true') {
newNavSidebar.bindEvents(); const newNavSidebar = new NewNavSidebar();
newNavSidebar.bindEvents();
}
$(window).on('scroll', _.throttle(applyScrollNavClass, 100)); $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
}); });
}).call(window); }).call(window);
...@@ -11,9 +11,9 @@ export default class NewNavSidebar { ...@@ -11,9 +11,9 @@ export default class NewNavSidebar {
} }
bindEvents() { bindEvents() {
this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true)); this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false)); this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
this.$overlay.on('click', e => this.toggleSidebarNav(e, false)); this.$overlay.on('click', () => this.toggleSidebarNav(false));
} }
toggleSidebarNav(show) { toggleSidebarNav(show) {
......
...@@ -247,7 +247,7 @@ $new-sidebar-width: 220px; ...@@ -247,7 +247,7 @@ $new-sidebar-width: 220px;
&.mobile-nav-open { &.mobile-nav-open {
display: block; display: block;
position: absolute; position: fixed;
background-color: $black-transparent; background-color: $black-transparent;
height: 100%; height: 100%;
width: 100%; width: 100%;
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
%nav.breadcrumbs{ role: "navigation" } %nav.breadcrumbs{ role: "navigation" }
.breadcrumbs-container{ class: [container_class, @content_class] } .breadcrumbs-container{ class: [container_class, @content_class] }
- if defined?(@new_sidebar) - if defined?(@new_sidebar)
%button.toggle-mobile-nav = button_tag class: 'toggle-mobile-nav', type: 'button' do
%span.sr-only Open sidebar
= icon ('bars') = icon ('bars')
.breadcrumbs-links.js-title-container .breadcrumbs-links.js-title-container
- unless hide_top_links - unless hide_top_links
......
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
.avatar-container.s40.settings-avatar .avatar-container.s40.settings-avatar
= icon('wrench') = icon('wrench')
.project-title Admin Area .project-title Admin Area
%button.close-nav-button = button_tag class: 'close-nav-button', type: 'button' do
= icon('times') %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,8 +5,9 @@ ...@@ -5,8 +5,9 @@
= 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.close-nav-button = button_tag class: 'close-nav-button', type: 'button' do
= icon('times') %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: 'Home' do = link_to group_path(@group), title: 'Home' do
......
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
.avatar-container.s40.settings-avatar .avatar-container.s40.settings-avatar
= icon('user') = icon('user')
.project-title User Settings .project-title User Settings
%button.close-nav-button = button_tag class: 'close-nav-button', type: 'button' do
= icon('times') %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,8 +6,9 @@ ...@@ -6,8 +6,9 @@
= 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.close-nav-button = button_tag class: 'close-nav-button', type: 'button' do
= icon('times') %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', class: 'shortcuts-project' do = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
......
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