From 1c962d5886d61ae1d29f80a82f12f62d3f235ac3 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 12 Apr 2019 15:01:00 -0500
Subject: Fix stylelint warnings in related_items_list.scss

This commit rearranges the styles in related_items_list
to adhere to stylelint's warnings. It also adds some
utility classes where applicable
---
 .../components/issue/issue_milestone.vue           |   2 +-
 .../components/issue/related_issuable_item.vue     |   5 +-
 .../stylesheets/components/related_items_list.scss | 439 ++++++++++-----------
 3 files changed, 211 insertions(+), 235 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
index d5d967e25bf..1f9670cf2fc 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue
@@ -72,7 +72,7 @@ export default {
 <template>
   <div ref="milestoneDetails" class="issue-milestone-details">
     <icon :size="16" class="inline icon" name="clock" />
-    <span class="milestone-title">{{ milestone.title }}</span>
+    <span class="milestone-title d-inline-block">{{ milestone.title }}</span>
     <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
       <span class="bold">{{ __('Milestone') }}</span> <br />
       <span>{{ milestone.title }}</span> <br />
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index d4d18614f93..bf96ce0bafb 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -81,8 +81,11 @@ export default {
             :title="stateTitle"
             :aria-label="state"
             data-html="true"
+            class="d-xl-none"
           />
-          <span v-tooltip :title="itemPath" class="path-id-text">{{ itemPath }}</span>
+          <span v-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
+            itemPath
+          }}</span>
           {{ pathIdSeparator }}{{ itemId }}
         </div>
         <div class="item-meta-child d-flex align-items-center">
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 628dffc39f1..0fdb11d311a 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -11,6 +11,10 @@ $item-weight-max-width: 48px;
   }
 }
 
+.sortable-link {
+  max-width: 85%;
+}
+
 .item-body {
   display: flex;
   position: relative;
@@ -18,13 +22,6 @@ $item-weight-max-width: 48px;
   padding: $gl-padding-8;
   line-height: $gl-line-height;
 
-  .item-contents {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-grow: 1;
-  }
-
   .issue-token-state-icon-open {
     color: $green-500;
   }
@@ -66,143 +63,136 @@ $item-weight-max-width: 48px;
       font-weight: $gl-font-weight-bold;
     }
 
-    .sortable-link {
-      max-width: 85%;
-    }
-
     .issue-token-state-icon-open,
     .issue-token-state-icon-closed {
       display: none;
     }
   }
 
-  .item-meta {
-    display: flex;
-    flex-wrap: wrap;
-    flex-basis: 100%;
-    font-size: $gl-font-size-small;
+  .item-path-id .path-id-text,
+  .item-milestone .milestone-title,
+  .item-due-date,
+  .item-weight .board-card-info-text {
     color: $gl-text-color-secondary;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
 
-    .item-meta-child {
-      order: 0;
-      display: flex;
-      flex-wrap: wrap;
-      flex-basis: 100%;
+.item-contents {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
 
-      .item-due-date,
-      .item-weight {
-        margin-left: $gl-padding-8;
-      }
+.item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  font-size: $gl-font-size-small;
+  color: $gl-text-color-secondary;
 
-      .item-milestone,
-      .item-weight {
-        cursor: help;
-      }
+  .item-meta-child {
+    order: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+  }
 
-      .item-milestone {
-        text-decoration: none;
-        max-width: $item-milestone-max-width;
-      }
+  .item-milestone,
+  .item-weight {
+    cursor: help;
+  }
 
-      .item-due-date {
-        margin-right: 0;
-      }
+  .item-milestone {
+    text-decoration: none;
+    max-width: $item-milestone-max-width;
 
-      .item-weight {
-        margin-right: 0;
-        max-width: $item-weight-max-width;
-      }
+    .ic-clock {
+      color: $gl-text-color-tertiary;
+      margin-right: $gl-padding-4;
     }
+  }
 
-    .item-path-id .path-id-text,
-    .item-milestone .milestone-title,
-    .item-due-date,
-    .item-weight .board-card-info-text {
-      color: $gl-text-color-secondary;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+  .item-weight {
+    margin-right: 0;
+    max-width: $item-weight-max-width;
+  }
 
-    .item-path-id {
-      margin-top: $gl-padding-4;
-      font-size: $gl-font-size-xs;
-      white-space: nowrap;
+  .item-assignees {
+    order: 2;
+    align-self: flex-end;
+    align-items: center;
+    margin-left: auto;
 
-      .path-id-text {
-        font-weight: $gl-font-weight-bold;
-        max-width: $item-path-max-width;
+    .user-avatar-link {
+      margin-right: -$gl-padding-4;
+
+      &:nth-of-type(1) {
+        z-index: 2;
       }
 
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
+      &:nth-of-type(2) {
+        z-index: 1;
       }
 
-      &:not(.mr-item-path) {
-        order: 1;
+      &:last-child {
+        margin-right: 0;
       }
     }
 
-    .item-milestone .ic-clock {
-      color: $gl-text-color-tertiary;
-      margin-right: $gl-padding-4;
+    .avatar {
+      height: $gl-padding;
+      width: $gl-padding;
+      margin-right: 0;
+      vertical-align: bottom;
     }
 
-    .item-assignees {
-      order: 2;
-      align-self: flex-end;
-      align-items: center;
-      margin-left: auto;
-
-      .user-avatar-link {
-        margin-right: -$gl-padding-4;
-
-        &:nth-of-type(1) {
-          z-index: 2;
-        }
+    .avatar-counter {
+      height: $gl-padding;
+      border: 1px solid transparent;
+      background-color: $gl-text-color-tertiary;
+      font-weight: $gl-font-weight-bold;
+      padding: 0 $gl-padding-4;
+      line-height: $gl-padding;
+    }
+  }
+}
 
-        &:nth-of-type(2) {
-          z-index: 1;
-        }
+.item-path-id {
+  margin-top: $gl-padding-4;
+  font-size: $gl-font-size-xs;
+  white-space: nowrap;
 
-        &:last-child {
-          margin-right: 0;
-        }
-      }
+  .path-id-text {
+    font-weight: $gl-font-weight-bold;
+    max-width: $item-path-max-width;
+  }
 
-      .avatar {
-        height: $gl-padding;
-        width: $gl-padding;
-        margin-right: 0;
-        vertical-align: bottom;
-      }
+  .issue-token-state-icon-open,
+  .issue-token-state-icon-closed {
+    display: block;
+  }
 
-      .avatar-counter {
-        height: $gl-padding;
-        border: 1px solid transparent;
-        background-color: $gl-text-color-tertiary;
-        font-weight: $gl-font-weight-bold;
-        padding: 0 $gl-padding-4;
-        line-height: $gl-padding;
-      }
-    }
+  &:not(.mr-item-path) {
+    order: 1;
   }
+}
 
-  .btn-item-remove {
-    position: absolute;
-    right: 0;
-    top: $gl-padding-4 / 2;
-    padding: $gl-padding-4;
-    margin-right: $gl-padding-4 / 2;
-    line-height: 0;
-    border-color: transparent;
-    color: $gl-text-color-secondary;
+.btn-item-remove {
+  position: absolute;
+  right: 0;
+  top: $gl-padding-4 / 2;
+  padding: $gl-padding-4;
+  margin-right: $gl-padding-4 / 2;
+  line-height: 0;
+  border-color: transparent;
+  color: $gl-text-color-secondary;
 
-    &:hover {
-      color: $gl-text-color;
-    }
+  &:hover {
+    color: $gl-text-color;
   }
 }
 
@@ -212,18 +202,20 @@ $item-weight-max-width: 48px;
 }
 
 @include media-breakpoint-up(sm) {
-  .item-body {
-    .item-contents .item-title {
-      .mr-title-link,
-      .sortable-link {
-        max-width: 90%;
-      }
-    }
+  .sortable-link {
+    max-width: 90%;
   }
 }
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .sortable-link {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
   .item-body {
     .item-contents {
       min-width: 0;
@@ -235,37 +227,6 @@ $item-weight-max-width: 48px;
         // positioned absolutely
         width: 95%;
         margin-bottom: $gl-padding-4;
-
-        .mr-title-link,
-        .sortable-link {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 100%;
-        }
-      }
-
-      .item-meta {
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-        }
-
-        .item-meta-child {
-          flex-basis: unset;
-          margin-left: auto;
-          margin-right: $gl-padding-4;
-
-          ~ .item-assignees {
-            margin-left: $gl-padding-4;
-          }
-        }
-
-        .item-assignees {
-          margin-bottom: 0;
-          margin-left: 0;
-          order: 2;
-        }
       }
     }
 
@@ -273,6 +234,29 @@ $item-weight-max-width: 48px;
       order: 1;
     }
   }
+
+  .item-meta {
+    .item-path-id {
+      order: 0;
+      margin-top: 0;
+    }
+
+    .item-meta-child {
+      flex-basis: unset;
+      margin-left: auto;
+      margin-right: $gl-padding-4;
+
+      ~ .item-assignees {
+        margin-left: $gl-padding-4;
+      }
+    }
+
+    .item-assignees {
+      margin-bottom: 0;
+      margin-left: 0;
+      order: 2;
+    }
+  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -287,11 +271,6 @@ $item-weight-max-width: 48px;
     .item-meta .item-path-id {
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
-
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      margin-right: $gl-padding-4;
-    }
   }
 }
 
@@ -301,93 +280,87 @@ $item-weight-max-width: 48px;
     padding: $gl-padding-8;
     padding-left: $gl-padding;
 
-    .item-contents {
-      flex-wrap: nowrap;
-      overflow: hidden;
+    .item-title {
+      display: flex;
+      margin-bottom: 0;
+      min-width: 0;
+      width: auto;
+      flex-basis: unset;
+      font-weight: $gl-font-weight-normal;
 
-      .item-title {
-        display: flex;
-        margin-bottom: 0;
-        min-width: 0;
-        width: auto;
-        flex-basis: unset;
-        font-weight: $gl-font-weight-normal;
-
-        .mr-title-link,
-        .sortable-link {
-          display: block;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          line-height: 1.3;
-        }
-
-        .issue-token-state-icon-open,
-        .issue-token-state-icon-closed {
-          display: block;
-          margin-right: $gl-padding-8;
-        }
-
-        .confidential-icon {
-          align-self: auto;
-          margin-top: 0;
-        }
+      .issue-token-state-icon-open,
+      .issue-token-state-icon-closed {
+        display: block;
+        margin-right: $gl-padding-8;
       }
 
-      .item-meta {
+      .confidential-icon {
+        align-self: auto;
         margin-top: 0;
-        justify-content: flex-end;
-        flex: 1;
-        flex-wrap: nowrap;
-
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-          margin-left: $gl-padding-8;
-          margin-right: auto;
-
-          .issue-token-state-icon-open,
-          .issue-token-state-icon-closed {
-            display: none;
-          }
-        }
-
-        .item-meta-child {
-          margin-left: $gl-padding-8;
-          flex-wrap: nowrap;
-        }
-
-        .item-assignees {
-          flex-grow: 0;
-          margin-top: 0;
-          margin-right: $gl-padding-4;
-
-          .avatar {
-            height: $gl-padding-24;
-            width: $gl-padding-24;
-          }
-
-          .avatar-counter {
-            height: $gl-padding-24;
-            min-width: $gl-padding-24;
-            line-height: $gl-padding-24;
-            border-radius: $gl-padding-24;
-          }
-        }
       }
     }
+  }
 
-    .btn-item-remove {
-      position: relative;
-      align-self: center;
-      top: initial;
-      right: 0;
-      margin-right: 0;
-      padding: $btn-sm-side-margin;
+  .item-contents {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
 
-      &:hover {
-        border-color: $border-color;
-      }
+  .item-meta {
+    margin-top: 0;
+    justify-content: flex-end;
+    flex: 1;
+    flex-wrap: nowrap;
+
+    .item-meta-child {
+      margin-left: $gl-padding-8;
+      flex-wrap: nowrap;
     }
   }
+
+  .item-path-id {
+    order: 0;
+    margin-top: 0;
+    margin-left: $gl-padding-8;
+    margin-right: auto;
+  }
+
+  .item-assignees {
+    flex-grow: 0;
+    margin-top: 0;
+    margin-right: $gl-padding-4;
+
+    .avatar {
+      height: $gl-padding-24;
+      width: $gl-padding-24;
+    }
+
+    .avatar-counter {
+      height: $gl-padding-24;
+      min-width: $gl-padding-24;
+      line-height: $gl-padding-24;
+      border-radius: $gl-padding-24;
+    }
+  }
+
+  .btn-item-remove {
+    position: relative;
+    align-self: center;
+    top: initial;
+    right: 0;
+    margin-right: 0;
+    padding: $btn-sm-side-margin;
+
+    &:hover {
+      border-color: $border-color;
+    }
+  }
+
+  .sortable-link {
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 1.3;
+  }
 }
-- 
cgit v1.2.1