fix dot point connectors on MR widget

handles multi-line and variable heights a bit better
remove .legend elements - items handle their own lines
use ::before for vertical lines, ::after for horizontal lines
full height unless except for last item, which is only half. This uses last-of-type

6 files changed, 21 insertions, 31 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
index 76cb71b6c12..96cad2e7038 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
@@ -113,7 +113,6 @@ export default {
   },
   template: `
     <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
-      <div class="legend"></div>
       <p
         v-if="shouldShowLoading"
         class="usage-info js-usage-info usage-info-loading">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
index 686cb38cbb1..f5c7d1ec8d8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
@@ -45,7 +45,6 @@ export default {
   },
   template: `
     <div v-if="hasLinks">
-      <div class="legend"></div>
       <p v-if="relatedLinks.closing">
         {{closingText}}
         <span v-html="relatedLinks.closing"></span>.
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..02245d82a5d 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
@@ -11,7 +11,6 @@ export default {
         class="fa fa-spinner fa-spin"
         aria-hidden="true" />
       <section class="mr-info-list mr-links">
-        <div class="legend"></div>
         <p>
           The changes will be merged into
           <span class="label-branch">
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..46c76f21a8a 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
@@ -81,7 +81,6 @@ export default {
         </a>
       </h4>
       <section class="mr-info-list">
-        <div class="legend"></div>
         <p>The changes will be merged into
           <a
             :href="mr.targetBranchPath"
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 9b8eed9016d..980cce57300 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
@@ -68,7 +68,6 @@ export default {
         :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">
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c0bd045f1fc..1f9be4f4901 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -515,51 +515,46 @@
   margin: 10px 0 $gl-padding 12px;
 
   p {
-    margin: 6px 0;
+    margin: 0;
     position: relative;
-    padding-left: 15px;
+    padding: 6px 0 6px 15px;
+
+    $border-width: 2px;
 
     &::before {
       content: '';
       position: absolute;
+      background-color: $border-color;
+      height: 100%;
+      top: 0;
+      width: $border-width;
+      left: 0;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
       border-top: 2px solid $border-color;
-      height: 1px;
-      top: 9px;
+      height: $border-width;
+      top: calc(50% - #{$border-width} / 2);
       width: 8px;
       left: 0;
     }
 
-    &:last-child {
+    &:last-of-type {
       margin-bottom: 0;
-    }
-  }
 
-  .legend {
-    height: 100%;
-    width: 2px;
-    background: $border-color;
-    position: absolute;
-    top: -9px;
+      &::before {
+        height: 50%;
+      }
+    }
   }
 }
 
 .mr-info-list.mr-memory-usage {
-  .legend {
-    height: 65%;
-    top: 0;
-
-    @media (max-width: $screen-xs-max) {
-      height: 20px;
-    }
-  }
-
   p {
     float: left;
     padding-left: 21px;
-
-    &::before {
-      top: 13px;
-    }
   }
 
   .memory-graph-container {