Commit 92bf7dfc authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'mr-tabs-sticky-poc' into 'master'

POC: Use position sticky on merge request tabs

See merge request !11289
parents e3fa5275 5d74fc8a
...@@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; ...@@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
// So we dont affix the tabs on these // So we dont affix the tabs on these
if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return; if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
/**
If the browser does not support position sticky, it returns the position as static.
If the browser does support sticky, then we allow the browser to handle it, if not
then we default back to Bootstraps affix
**/
if ($tabs.css('position') !== 'static') return;
const $diffTabs = $('#diff-notes-app'); const $diffTabs = $('#diff-notes-app');
$tabs.off('affix.bs.affix affix-top.bs.affix') $tabs.off('affix.bs.affix affix-top.bs.affix')
......
...@@ -693,12 +693,17 @@ ...@@ -693,12 +693,17 @@
} }
.merge-request-tabs-holder { .merge-request-tabs-holder {
top: 0;
z-index: 10;
background-color: $white-light; background-color: $white-light;
@media(min-width: $screen-sm-min) {
position: sticky;
position: -webkit-sticky;
}
&.affix { &.affix {
top: 0;
left: 0; left: 0;
z-index: 10;
transition: right .15s; transition: right .15s;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
......
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