diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-10-03 10:23:22 +0000 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-10-03 10:23:22 +0000 |
commit | d9f9ad9d7d672574a227dd6143cd3d08f2381be5 (patch) | |
tree | 763c50ad6ce7c03a94411edb001a66e522169456 | |
parent | 061dd18b762c25cff8e95ab6012f346fdccac09a (diff) | |
parent | 729cb3b319227dca2cdf5bd211519615a92e328f (diff) | |
download | gitlab-ce-d9f9ad9d7d672574a227dd6143cd3d08f2381be5.tar.gz |
Merge branch 'fix-sidebar' into 'master'
Fix broken left sidebar navigation
Sidebar navigation is broken and it's introduced in !6627. Sidebar pin and hamburger icons were `a` tag before with `#` link on them. That was the main reason why page jumps to top. !6627 was trying to prevent default action but it interferes with the navigation links. I don't want to tweak event listeners for sidebar, instead I just replaced `a` elements with `div` because I think there is no point to have them as `a`.
/cc @dzaporozhets @jschatz1
PS: This MR basically reverts !6627. I don't want to add another revert commit instead I reverted it in my editor and committed.
See merge request !6648
-rw-r--r-- | app/assets/javascripts/sidebar.js.es6 | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 1 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 5 |
3 files changed, 9 insertions, 9 deletions
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6 index ead3219bc31..755fac8107b 100644 --- a/app/assets/javascripts/sidebar.js.es6 +++ b/app/assets/javascripts/sidebar.js.es6 @@ -34,8 +34,8 @@ $(pageSelector).hasClass(expandedPageClass) ); $(document) - .on('click', sidebarToggleSelector, (e) => this.toggleSidebar(e)) - .on('click', pinnedToggleSelector, (e) => this.togglePinnedState(e)) + .on('click', sidebarToggleSelector, () => this.toggleSidebar()) + .on('click', pinnedToggleSelector, () => this.togglePinnedState()) .on('click', 'html, body', (e) => this.handleClickEvent(e)) .on('page:change', () => this.renderState()); this.renderState(); @@ -47,19 +47,17 @@ const targetIsToggle = $target.closest(sidebarToggleSelector).length > 0; const targetIsSidebar = $target.closest(sidebarWrapperSelector).length > 0; if (!targetIsToggle && (!targetIsSidebar || $target.closest('a'))) { - this.toggleSidebar(e); + this.toggleSidebar(); } } } - toggleSidebar(e) { - e.preventDefault(); + toggleSidebar() { this.isExpanded = !this.isExpanded; this.renderState(); } - togglePinnedState(e) { - e.preventDefault(); + togglePinnedState() { this.isPinned = !this.isPinned; if (!this.isPinned) { this.isExpanded = false; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 3b7de4b57bb..557ef7291cf 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -142,6 +142,7 @@ transition-duration: .3s; position: absolute; top: 0; + cursor: pointer; &:hover, &:focus { diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 3950b4f53e7..8aefdcb3d9b 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,10 +1,11 @@ .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" } .sidebar-wrapper.nicescroll .sidebar-action-buttons - = link_to '#', class: 'nav-header-btn toggle-nav-collapse', title: "Open/Close" do + .nav-header-btn.toggle-nav-collapse{ title: "Open/Close" } %span.sr-only Toggle navigation = icon('bars') - = link_to '#', class: "nav-header-btn pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: {placement: 'right', container: 'body'} do + + %div{ class: "nav-header-btn pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: { placement: 'right', container: 'body' } } %span.sr-only Toggle navigation pinning = icon('fw thumb-tack') |