Cards in Epic Tree have two lines of content

- Epic tree cards on two lines
- Styles changes for related issues and MRs

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -54,22 +54,23 @@ export default {
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
     }"
-    class="item-body d-flex align-items-center p-2 p-lg-3 py-xl-2 px-xl-3"
+    class="item-body d-flex align-items-center py-2 px-3"
   >
     <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
       <!-- Title area: Status icon (XL) and title -->
-      <div class="item-title d-flex align-items-center mb-xl-0">
-        <span ref="iconElementXL">
+      <div class="item-title d-flex align-items-xl-center mb-xl-0">
+        <div ref="iconElementXL">
           <icon
             v-if="hasState"
             ref="iconElementXL"
+            class="mr-2"
             :class="iconClass"
             :name="iconName"
             :size="16"
             :title="stateTitle"
             :aria-label="state"
           />
-        </span>
+        </div>
         <gl-tooltip :target="() => $refs.iconElementXL">
           <span v-html="stateTitle"></span>
         </gl-tooltip>
@@ -97,17 +98,6 @@ export default {
           <div
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
-            <span ref="iconElement">
-              <icon
-                v-if="hasState"
-                :class="iconClass"
-                :name="iconName"
-                :title="stateTitle"
-                :aria-label="state"
-                data-html="true"
-                class="d-xl-none"
-              />
-            </span>
             <gl-tooltip :target="() => this.$refs.iconElement">
               <span v-html="stateTitle"></span>
             </gl-tooltip>
@@ -159,7 +149,7 @@ export default {
       v-gl-tooltip
       :disabled="removeDisabled"
       type="button"
-      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button mr-xl-0 align-self-xl-center"
+      class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button"
       data-qa-selector="remove_related_issue_button"
       :title="__('Remove')"
       :aria-label="__('Remove')"

app/assets/stylesheets/components/related_items_list.scss

 $item-path-max-width: 160px;
 $item-milestone-max-width: 120px;
 $item-weight-max-width: 48px;
+$item-remove-button-space: 42px;
 
 .related-items-list {
   padding: $gl-padding-4;
+  padding-right: $gl-padding-6;
 
   &,
   .list-item:last-child {
@@ -11,16 +13,16 @@ $item-weight-max-width: 48px;
   }
 }
 
-.sortable-link {
-  max-width: 85%;
-}
-
 .related-items-tree {
   .card-header {
     .gl-label {
       line-height: $gl-line-height;
     }
   }
+
+  .sortable-link {
+    white-space: normal;
+  }
 }
 
 .item-body {
@@ -48,17 +50,12 @@ $item-weight-max-width: 48px;
     cursor: help;
   }
 
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    margin-right: $gl-padding-4;
-  }
-
   .confidential-icon {
     color: $orange-600;
   }
 
   .item-title-wrapper {
-    max-width: 100%;
+    max-width: calc(100% - #{$item-remove-button-space});
   }
 
   .item-title {
@@ -88,13 +85,6 @@ $item-weight-max-width: 48px;
   .health-label-short {
     display: none;
   }
-
-  @include media-breakpoint-down(lg) {
-    .issue-count-badge {
-      padding: 0;
-      padding-right: 8px;
-    }
-  }
 }
 
 .item-body,
@@ -232,25 +222,28 @@ $item-weight-max-width: 48px;
     font-weight: $gl-font-weight-bold;
     max-width: $item-path-max-width;
   }
-
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    display: block;
-  }
 }
 
 .btn-item-remove {
   position: absolute;
-  right: 0;
   top: $gl-padding-4 / 2;
+  right: 0;
   padding: $gl-padding-4;
   margin-right: $gl-padding-4 / 2;
   line-height: 0;
   border-color: transparent;
   color: $gl-text-color-secondary;
 
+  .related-items-tree & {
+    position: relative;
+    top: initial;
+    padding: $btn-sm-side-margin;
+    margin-right: initial;
+  }
+
   &:hover {
     color: $gl-text-color;
+    border-color: $border-color;
   }
 }
 
@@ -283,6 +276,15 @@ $item-weight-max-width: 48px;
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .item-body .item-contents {
+    max-width: 95%;
+  }
+
+  .related-items-tree .item-contents,
+  .item-body .item-title {
+    max-width: 100%;
+  }
+
   .sortable-link {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -294,24 +296,6 @@ $item-weight-max-width: 48px;
     .item-contents {
       min-width: 0;
     }
-
-    .item-title {
-      flex-basis: unset;
-      // 95% because we compensate
-      // for remove button which is
-      // positioned absolutely
-      width: 95%;
-    }
-
-    .btn-item-remove {
-      order: 1;
-    }
-  }
-
-  .item-meta {
-    .item-meta-child {
-      flex-basis: unset;
-    }
   }
 
   .card-header {
@@ -348,25 +332,10 @@ $item-weight-max-width: 48px;
 @include media-breakpoint-up(xl) {
   .item-body {
     .item-title {
-      min-width: 0;
       width: auto;
       flex-basis: auto;
       flex-shrink: 1;
       font-weight: $gl-font-weight-normal;
-
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
-        margin-right: $gl-padding-8;
-      }
-    }
-
-    .item-title-wrapper {
-      max-width: calc(100% - 500px);
-    }
-
-    .item-info-area {
-      flex-basis: auto;
     }
   }
 
@@ -378,16 +347,7 @@ $item-weight-max-width: 48px;
     overflow: hidden;
   }
 
-  .item-meta {
-    flex: 1;
-  }
-
   .item-assignees {
-    .avatar {
-      height: $gl-padding-24;
-      width: $gl-padding-24;
-    }
-
     .avatar-counter {
       height: $gl-padding-24;
       min-width: $gl-padding-24;
@@ -399,12 +359,8 @@ $item-weight-max-width: 48px;
   .btn-item-remove {
     position: relative;
     top: initial;
-    right: 0;
     padding: $btn-sm-side-margin;
-
-    &:hover {
-      border-color: $border-color;
-    }
+    margin-right: $gl-padding-4 / 2;
   }
 
   .sortable-link {
@@ -422,10 +378,4 @@ $item-weight-max-width: 48px;
       display: initial;
     }
   }
-
-  .item-body {
-    .item-title-wrapper {
-      max-width: calc(100% - 640px);
-    }
-  }
 }

app/assets/stylesheets/framework/variables.scss

@@ -398,6 +398,7 @@ $tooltip-font-size: 12px;
  * Padding
  */
 $gl-padding-4: 4px;
+$gl-padding-6: 6px;
 $gl-padding-8: 8px;
 $gl-padding-12: 12px;
 $gl-padding: 16px;
@@ -447,6 +448,7 @@ $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;
 $home-panel-avatar-mobile-size: 24px;
 $gl-line-height: 16px;
+$gl-line-height-18: 18px;
 $gl-line-height-20: 20px;
 $gl-line-height-24: 24px;
 $gl-line-height-14: 14px;

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -90,16 +90,14 @@ export default {
           </span>
         </p>
       </gl-tooltip>
-      <div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-2">
+      <div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-3">
         <span v-if="allowSubEpics" class="d-inline-flex align-items-center">
           <gl-icon name="epic" class="mr-1" />
           {{ totalEpicsCount }}
-          <span class="ml-2 bullet-separator">&bull;</span>
         </span>
-        <span class="d-inline-flex align-items-center" :class="{ 'ml-2': allowSubEpics }">
+        <span class="d-inline-flex align-items-center" :class="{ 'ml-3': allowSubEpics }">
           <gl-icon name="issues" class="mr-1" />
           {{ totalIssuesCount }}
-          <span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span>
         </span>
       </div>
       <epic-health-status v-if="showHealthStatus" :health-status="healthStatus" />

ee/app/assets/javascripts/related_items_tree/components/tree_item.vue

@@ -89,11 +89,11 @@ export default {
     <div class="list-item-body d-flex align-items-center">
       <gl-deprecated-button
         v-if="!childrenFetchInProgress && hasChildren"
-        v-gl-tooltip.hover
+        v-gl-tooltip.viewport.hover
         :title="chevronTooltip"
         :class="chevronType"
         variant="link"
-        class="btn-svg btn-tree-item-chevron"
+        class="btn-svg btn-tree-item-chevron align-self-start"
         @click="handleChevronClick"
       >
         <icon :name="chevronType" />

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -143,18 +143,18 @@ export default {
 <template>
   <div class="card card-slim sortable-row flex-grow-1">
     <div
-      class="item-body card-body d-flex align-items-center p-2 pl-xl-3"
+      class="item-body card-body d-flex align-items-center pr-1 pl-2 py-1"
       :class="{
-        'p-xl-1': userSignedIn,
-        'item-logged-out pt-xl-2 pb-xl-2': !userSignedIn,
+        'item-logged-out': !userSignedIn,
         'item-closed': isClosed,
       }"
     >
       <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
-        <div class="d-flex flex-column flex-grow-1 item-title-wrapper">
-          <div class="item-title d-flex align-items-center mb-2 mb-xl-0">
+        <div class="item-title-wrapper flex-grow-1 mr-2">
+          <div class="item-title d-flex mb-0 pt-1 pb-2">
             <gl-icon
               ref="stateIconMd"
+              class="d-block mr-2"
               :class="stateIconClass"
               :name="stateIconName"
               :aria-label="stateText"
@@ -180,15 +180,15 @@ export default {
               :aria-label="item.title"
               :title="item.title"
               :href="computedPath"
-              class="sortable-link"
+              class="sortable-link ws-normal"
               >{{ item.title }}</gl-link
             >
           </div>
-        </div>
 
           <div
-          class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap align-items-center"
+            class="item-meta d-flex flex-wrap mt-xl-0 flex-xl-nowrap align-items-center border-top pb-1 pt-2 ml-4"
           >
+            <span class="mr-3">{{ itemHierarchy }}</span>
             <gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">
               <p v-if="allowSubEpics" class="font-weight-bold m-0">
                 {{ __('Epics') }} &#8226;
@@ -214,84 +214,64 @@ export default {
               </p>
             </gl-tooltip>
 
-          <div v-if="isEpic" ref="countBadge" class="issue-count-badge text-secondary">
-            <span v-if="allowSubEpics" class="d-inline-flex align-items-center">
+            <div
+              v-if="isEpic"
+              ref="countBadge"
+              class="issue-count-badge text-secondary py-0 p-lg-0"
+            >
+              <span v-if="allowSubEpics" class="d-inline-flex align-items-center mr-2">
                 <gl-icon name="epic" class="mr-1" />
                 {{ totalEpicsCount }}
               </span>
-            <span class="ml-2 bullet-separator">&bull;</span>
-            <span class="d-inline-flex align-items-center" :class="{ 'ml-2': allowSubEpics }">
+              <span
+                class="d-inline-flex align-items-center mr-2"
+                :class="{ 'ml-2': allowSubEpics }"
+              >
                 <gl-icon name="issues" class="mr-1" />
                 {{ totalIssuesCount }}
               </span>
-            <span v-if="showHealthStatus" class="ml-2 bullet-separator">&bull;</span>
             </div>
 
-          <div v-if="showHealthStatus" class="item-health-status mr-2">
-            <epic-health-status v-if="isEpic" :health-status="item.healthStatus" />
-            <issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
-          </div>
-
-          <div class="item-meta-child d-flex align-items-center order-0 flex-wrap flex-xl-nowrap">
-            <!-- This bullet is for Milestone -->
-            <span v-if="showHealthStatus && hasMilestone" class="bullet-separator mr-2"
-              >&bull;</span
-            >
-
             <item-milestone
               v-if="hasMilestone"
               :milestone="item.milestone"
-              class="d-flex align-items-center item-milestone mr-2"
+              class="d-flex align-items-center item-milestone mr-3"
             />
 
-            <!-- This bullet is for Due Date -->
-            <span
-              v-if="(hasMilestone || showHealthStatus) && item.dueDate"
-              class="mr-2 bullet-separator"
-              >&bull;</span
-            >
-
             <item-due-date
               v-if="item.dueDate"
               :date="item.dueDate"
               tooltip-placement="top"
-              css-class="item-due-date d-flex align-items-center mr-2"
+              css-class="item-due-date d-flex align-items-center mr-3"
             />
 
-            <!-- This bullet is for Weight -->
-            <span
-              v-if="(item.dueDate || hasMilestone || showHealthStatus) && item.weight"
-              class="mr-2 bullet-separator"
-              >&bull;</span
-            >
-
             <item-weight
               v-if="item.weight"
               :weight="item.weight"
-              class="item-weight d-flex align-items-center mr-2"
+              class="item-weight d-flex align-items-center mr-3"
               tag-name="span"
             />
-          </div>
 
-          <!-- This bullet is for Assignees -->
-          <span
-            v-if="(item.dueDate || hasMilestone || showHealthStatus || item.weight) && hasAssignees"
-            class="mr-2 bullet-separator"
-            >&bull;</span
-          >
             <item-assignees
               v-if="hasAssignees"
               :assignees="item.assignees"
-            class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0"
+              class="item-assignees d-inline-flex align-items-center mr-3 mb-md-0 flex-xl-grow-0"
             />
+
+            <div v-if="showHealthStatus" class="item-health-status">
+              <epic-health-status v-if="isEpic" :health-status="item.healthStatus" />
+              <issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
             </div>
+          </div>
+        </div>
+
         <gl-deprecated-button
           v-if="parentItem.userPermissions.adminEpic"
           v-gl-tooltip.hover
           v-gl-modal-directive="$options.itemRemoveModalId"
           :title="__('Remove')"
           :disabled="itemActionInProgress"
-          class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button"
+          class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button align-self-start"
           @click="handleRemoveClick"
         >
           <gl-icon name="close" class="btn-item-remove-icon" />

ee/app/assets/stylesheets/components/related_items_tree.scss

@@ -34,6 +34,10 @@
       }
     }
 
+    .item-meta {
+      line-height: $gl-line-height-18;
+    }
+
     .btn-tree-item-chevron {
       margin-bottom: $gl-padding-4;
       margin-right: $gl-padding-4;

ee/changelogs/unreleased/215042-issue-cards-in-epic-tree-have-two-lines-of-content.yml

+---
+title: Cards in Epic Tree have two lines of content
+merge_request: 31300
+author:
+type: changed