summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2017-05-11 14:30:32 +0000
committerAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2017-05-11 14:30:32 +0000
commit92bf7dfcb040e3e035fc87b0a70461f891284c98 (patch)
tree5f6f30b4e3bc62045fc8364a5a0911dbb9d915f2
parente3fa5275193df70159cba0173dbf99776788c34c (diff)
parent5d74fc8a5496423b31eb4dc0daf02b39d0fb51de (diff)
downloadgitlab-ce-92bf7dfcb040e3e035fc87b0a70461f891284c98.tar.gz
Merge branch 'mr-tabs-sticky-poc' into 'master' 32156-link-to-member-avatar
POC: Use position sticky on merge request tabs See merge request !11289
-rw-r--r--app/assets/javascripts/merge_request_tabs.js7
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss9
2 files changed, 14 insertions, 2 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 93c30c54a8e..a3dff25c93b 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
// So we dont affix the tabs on these
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');
$tabs.off('affix.bs.affix affix-top.bs.affix')
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 75c57e369e7..87592926930 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -693,12 +693,17 @@
}
.merge-request-tabs-holder {
+ top: 0;
+ z-index: 10;
background-color: $white-light;
+ @media(min-width: $screen-sm-min) {
+ position: sticky;
+ position: -webkit-sticky;
+ }
+
&.affix {
- top: 0;
left: 0;
- z-index: 10;
transition: right .15s;
@media (max-width: $screen-xs-max) {