From d7c0955b88f8947e2da41bbce76544dbda76cc0e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 27 Jan 2017 15:41:19 +0000
Subject: [PATCH] Fixed merge request tabs extra margin
Fixed extra margin when the merge request tabs are affixed
This was caused by some weird padding that was on the container & then
not correctly removed.
The fix involved removing the container from inside the tabs holder div
& then adding the widths through CSS depending on if fixed & whether the
parent is limited width or not.
In reality out container classes need to be fixed as it is getting pretty un-managable at the moment this should of been an easy fix, but in reality turned into something much harder.
Closes #26853
---
app/assets/stylesheets/pages/issuable.scss | 4 ---
.../stylesheets/pages/merge_requests.scss | 26 ++++++++++++++-----
.../projects/merge_requests/_show.html.haml | 3 +--
.../unreleased/mr-tabs-container-offset.yml | 4 +++
4 files changed, 24 insertions(+), 13 deletions(-)
create mode 100644 changelogs/unreleased/mr-tabs-container-offset.yml
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 93cc5a8cf0a..4ef95d27f4f 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -26,10 +26,6 @@
border: 0;
}
}
-
- .container-fluid {
- @extend .fixed-width-container;
- }
}
}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 45ff9f7ff5f..ab68b360f93 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -420,10 +420,6 @@
.merge-request-tabs-holder {
background-color: $white-light;
- .container-limited {
- max-width: $limited-layout-width;
- }
-
&.affix {
top: 100px;
left: 0;
@@ -433,10 +429,26 @@
@media (max-width: $screen-xs-max) {
right: 0;
}
+
+ .merge-request-tabs-container {
+ padding-left: $gl-padding;
+ padding-right: $gl-padding;
+ }
}
+}
- &:not(.affix) .container-fluid {
- padding-left: 0;
- padding-right: 0;
+.limit-container-width {
+ .merge-request-tabs-container {
+ max-width: $limited-layout-width;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+.limit-container-width:not(.container-limited) {
+ .merge-request-tabs-holder:not(.affix) {
+ .merge-request-tabs-container {
+ max-width: $limited-layout-width - ($gl-padding * 2);
+ }
}
}
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index eade0c2a668..9585a9a3ad4 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -52,7 +52,7 @@
= render 'award_emoji/awards_block', awardable: @merge_request, inline: true
.merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
- %div{ class: container_class }
+ .merge-request-tabs-container
%ul.merge-request-tabs.nav-links.no-top.no-bottom
%li.notes-tab
= link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
@@ -115,4 +115,3 @@
});
var mrRefreshWidgetUrl = "#{mr_widget_refresh_url(@merge_request)}";
-
diff --git a/changelogs/unreleased/mr-tabs-container-offset.yml b/changelogs/unreleased/mr-tabs-container-offset.yml
new file mode 100644
index 00000000000..c5df8abfcf2
--- /dev/null
+++ b/changelogs/unreleased/mr-tabs-container-offset.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed merge requests tab extra margin when fixed to window
+merge_request:
+author:
--
GitLab