diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-10-14 23:57:21 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-10-14 23:57:21 +0300 |
commit | 05762f449e7620015923eedcbacde8cec1eabf52 (patch) | |
tree | e6f974821883cb34a0b3595e22d6e664331d7833 /app/assets/javascripts | |
parent | ecb1aea14694ed15010af694a58e8e37be808509 (diff) | |
parent | 517895da4c1ca6201f952e443a579e4f2845e6e0 (diff) |
Merge branch 'mr-tabs-affix' into 'master'
Merge request tabs stick when scrolling page
## What does this MR do?
When scrolling merge requests this sticks the tabs to below the navigation for easy access.
## Screenshots (if relevant)
![sticky](/uploads/372a9889c50e9f85fef475cbee110ec1/sticky.gif)
## What are the relevant issue numbers?
Closes #20548
See merge request !6382
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/merge_request_tabs.js | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 8045d24a1bb..fd21aa1fefa 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -71,6 +71,7 @@ this._location = location; this.bindEvents(); this.activateTab(this.opts.action); + this.initAffix(); } MergeRequestTabs.prototype.bindEvents = function() { @@ -380,6 +381,46 @@ // Only when sidebar is collapsed }; + MergeRequestTabs.prototype.initAffix = function () { + var $tabs = $('.js-tabs-affix'); + + // Screen space on small screens is usually very sparse + // So we dont affix the tabs on these + if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return; + + var tabsWidth = $tabs.outerWidth(), + $diffTabs = $('#diff-notes-app'), + offsetTop = $tabs.offset().top - ($('.navbar-fixed-top').height() + $('.layout-nav').height()); + + $tabs.off('affix.bs.affix affix-top.bs.affix') + .affix({ + offset: { + top: offsetTop + } + }).on('affix.bs.affix', function () { + $tabs.css({ + left: $tabs.offset().left, + width: tabsWidth + }); + $diffTabs.css({ + marginTop: $tabs.height() + }); + }).on('affix-top.bs.affix', function () { + $tabs.css({ + left: '', + width: '' + }); + $diffTabs.css({ + marginTop: '' + }); + }); + + // Fix bug when reloading the page already scrolling + if ($tabs.hasClass('affix')) { + $tabs.trigger('affix.bs.affix'); + } + }; + return MergeRequestTabs; })(); |