Improve CSS for treeview with pipelines to make it responsible

2 files changed, 33 insertions, 40 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c817c67c0df..e357853abb1 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -178,10 +178,6 @@
       }
     }
 
-    p:last-child {
-      margin-bottom: 0;
-    }
-
     .btn-grouped {
       margin-left: 0;
       margin-right: 7px;
@@ -346,41 +342,45 @@
 
 .remove-message-pipes {
   ul {
-    margin-left: 6px;
-    margin-bottom: 20px;
-    padding-left: 0;
+    margin: 10px 0 0 12px;
+    padding: 0;
     list-style: none;
-    border-left: 3px solid $border-color;
-  }
-
-  ul li:last-child {
-    margin-bottom: 0;
+    border-left: 2px solid $border-color;
+    display: inline-block;
   }
 
   li {
-    height: 30px;
     position: relative;
-    margin: -3px;
-    padding-bottom: 3px;
+    margin: 0;
+    padding: 0;
+    display: block;
+
+    span {
+      margin-left: 15px;
+      max-height: 20px;
+    }
   }
 
-  li span {
-    width: 20px;
-    display: inline-block;
-    height: 3px;
-    background: $border-color;
-    margin-right: 5px;
-    top: 16px;
-    position: relative;
+  li:before {
+    content: '';
+    position: absolute;
+    border-top: 2px solid #e5e5e5;
+    height: 1px;
+    top: 8px;
+    width: 8px;
   }
 
-  li p {
-    display: inline-block;
-    margin: 0;
-    margin-bottom: -3px;
-    padding: 0;
-    position: relative;
-    top: 20px;
+  li:last-child {
+    &:before {
+      top: 18px;
+    }
+
+    span {
+      display: block;
+      position: relative;
+      top: 5px;
+      margin-top: 5px;
+    }
   }
 }
 
@@ -390,8 +390,7 @@
   border-style: solid;
   border-width: 1px;
   border-color: $border-color;
-  border-top-right-radius: 10px;
-  border-top-left-radius: 10px;
+  border-radius: 3px;
   padding: 10px;
   margin-bottom: -1px;
 }
@@ -489,6 +488,8 @@
 }
 
 .merged-buttons {
+  margin-top: 20px;
+
   .btn {
     float: left;
 
diff --git a/app/views/projects/merge_requests/widget/_merged.html.haml b/app/views/projects/merge_requests/widget/_merged.html.haml
index ad457cb2717..be62842fecd 100644
--- a/app/views/projects/merge_requests/widget/_merged.html.haml
+++ b/app/views/projects/merge_requests/widget/_merged.html.haml
@@ -11,12 +11,10 @@
         %ul
           %li
             %span
-            %p
               The changes were merged into
               #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
           %li
             %span
-            %p
               The source branch has been removed.
       = render 'projects/merge_requests/widget/merged_buttons'
     - elsif @merge_request.can_remove_source_branch?(current_user)
@@ -24,37 +22,31 @@
         %ul
           %li
             %span
-            %p
               The changes were merged into
               #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
           %li
             %span
-            %p
               You can remove the source branch now.
         = render 'projects/merge_requests/widget/merged_buttons', source_branch_exists: true
       .remove_source_branch_widget.failed.remove-message-pipes.hide
         %ul
           %li
             %span
-            %p
               Failed to remove source branch '#{@merge_request.source_branch}'.
       .remove_source_branch_in_progress.remove-message-pipes.hide
         %ul
           %li
             %span
-            %p
               = icon('spinner spin')
               Removing source branch '#{@merge_request.source_branch}'.
           %li
             %span
-            %p
               Please wait, this page will be automatically reloaded.
     - else
       .remove-message-pipes
         %ul
           %li
             %span
-            %p
               The changes were merged into
               #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
             = render 'projects/merge_requests/widget/merged_buttons'