show Revert and Cherry-pick buttons inline with Merged by.. title34253-revert-inline

5 files changed, 42 insertions, 44 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index fc2e42c6821..ac9f108becd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -16,7 +16,7 @@ export default {
         :dateTitle="mr.updatedAt"
         :dateReadable="mr.closedAt"
       />
-      <section>
+      <section class="mr-info-list">
         <p>
           The changes were not merged into
           <a
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
index 0bd31731a0b..e71ff89a090 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -5,11 +5,13 @@ export default {
   },
   template: `
     <div class="mr-widget-body mr-state-locked">
-      <span class="state-label">Locked</span>
-      This merge request is in the process of being merged, during which time it is locked and cannot be closed.
-      <i
-        class="fa fa-spinner fa-spin"
-        aria-hidden="true" />
+      <h4>
+        <span class="state-label">Locked</span>
+        This merge request is in the process of being merged, during which time it is locked and cannot be closed.
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
+      </h4>
       <section class="mr-info-list mr-links">
         <div class="legend"></div>
         <p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index 419d174f3ff..9ff9851ecd5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -92,9 +92,7 @@ export default {
         <p v-if="mr.shouldRemoveSourceBranch">
           The source branch will be removed.
         </p>
-        <p
-          v-else
-          class="with-button">
+        <p v-else>
           The source branch will not be removed.
           <a
             v-if="canRemoveSourceBranch"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index c7d32d18141..f5c36b648a2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -61,32 +61,6 @@ export default {
         :author="mr.mergedBy"
         :dateTitle="mr.updatedAt"
         :dateReadable="mr.mergedAt" />
-      <section class="mr-info-list">
-        <div class="legend"></div>
-        <p>
-          The changes were merged into
-          <span class="label-branch">
-            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-          </span>
-        </p>
-        <p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p>
-        <p v-if="shouldShowRemoveSourceBranch">
-          You can remove source branch now.
-          <button
-            @click="removeSourceBranch"
-            :class="{ disabled: isMakingRequest }"
-            type="button"
-            class="btn btn-xs btn-default js-remove-branch-button">
-            Remove Source Branch
-          </button>
-        </p>
-        <p v-if="shouldShowSourceBranchRemoving">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-          The source branch is being removed.
-        </p>
-      </section>
       <div
         v-if="shouldShowMergedButtons"
         class="merged-buttons clearfix">
@@ -125,6 +99,32 @@ export default {
           Cherry-pick
         </a>
       </div>
+      <section class="mr-info-list">
+        <div class="legend"></div>
+        <p>
+          The changes were merged into
+          <span class="label-branch">
+            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+          </span>
+        </p>
+        <p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p>
+        <p v-if="shouldShowRemoveSourceBranch">
+          You can remove source branch now.
+          <button
+            @click="removeSourceBranch"
+            :class="{ disabled: isMakingRequest }"
+            type="button"
+            class="btn btn-xs btn-default js-remove-branch-button">
+            Remove Source Branch
+          </button>
+        </p>
+        <p v-if="shouldShowSourceBranchRemoving">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          The source branch is being removed.
+        </p>
+      </section>
     </div>
   `,
 };
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 59e0624d94e..c254053dd41 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -117,6 +117,7 @@
 
   .mr-widget-body,
   .mr-widget-footer {
+    @include clearfix;
     margin: 16px;
   }
 
@@ -202,6 +203,7 @@
 
     &.mr-links {
       margin-left: 28px;
+      margin-top: -10px;
     }
 
     &.mr-memory-usage {
@@ -231,6 +233,7 @@
 
   .mr-widget-body {
     h4 {
+      float: left;
       font-weight: bold;
       font-size: 15px;
       margin: 5px 0;
@@ -278,12 +281,6 @@
       margin: $gl-padding 0;
     }
 
-    .with-button {
-      position: relative;
-      top: 6px;
-      margin-bottom: 24px;
-    }
-
     .spacing,
     .bold {
       vertical-align: middle;
@@ -368,7 +365,6 @@
     }
 
     &.mr-state-locked .mr-info-list {
-      margin-top: 10px;
       margin-left: 12px;
     }
 
@@ -507,8 +503,9 @@
 }
 
 .mr-info-list {
+  clear: left;
   position: relative;
-  margin: 10px 0 $gl-padding 12px;
+  margin-left: 12px;
 
   p {
     margin: 6px 0;
@@ -679,7 +676,8 @@
 }
 
 .merged-buttons {
-  margin-top: 20px;
+  float: left;
+  margin-left: 10px;
 
   .btn {
     float: left;