Fix stylelint rules in boards.scss

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/59895

app/assets/javascripts/boards/components/board_blank_state.vue

@@ -60,11 +60,15 @@ export default {
 </script>
 
 <template>
-  <div class="board-blank-state">
+  <div class="board-blank-state p-3">
     <p>Add the following default lists to your Issue Board with one click:</p>
-    <ul class="board-blank-state-list">
+    <ul class="list-unstyled board-blank-state-list">
       <li v-for="(label, index) in predefinedLabels" :key="index">
-        <span :style="{ backgroundColor: label.color }" class="label-color"> </span>
+        <span
+          :style="{ backgroundColor: label.color }"
+          class="label-color position-relative d-inline-block rounded"
+        >
+        </span>
         {{ label.title }}
       </li>
     </ul>

app/assets/javascripts/boards/components/board_card.vue

@@ -83,7 +83,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    class="board-card"
+    class="board-card position-relative p-3 rounded"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
     @mouseup="showIssue($event)"

app/assets/javascripts/boards/components/board_list.vue

@@ -221,7 +221,10 @@ export default {
 </script>
 
 <template>
-  <div class="board-list-component">
+  <div
+    :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
+    class="board-list-component position-relative h-100"
+  >
     <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
       <gl-loading-icon />
     </div>
@@ -236,7 +239,7 @@ export default {
       :data-board="list.id"
       :data-board-type="list.type"
       :class="{ 'is-smaller': showIssueForm }"
-      class="board-list js-board-list"
+      class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
     >
       <board-card
         v-for="(issue, index) in issues"

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -95,7 +95,7 @@ export default {
 
 <template>
   <div class="board-new-issue-form">
-    <div class="board-card">
+    <div class="board-card position-relative p-3 rounded">
       <form @submit="submit($event)">
         <div v-if="error" class="flash-container">
           <div class="flash-alert">An error occurred. Please try again.</div>

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -173,7 +173,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="board-card-header">
+    <div class="d-flex board-card-header">
       <h4 class="board-card-title append-bottom-0 prepend-top-0">
         <icon
           v-if="issue.confidential"
@@ -214,11 +214,11 @@ export default {
     </div>
     <div class="board-card-footer d-flex justify-content-between align-items-end">
       <div
-        class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
+        class="d-flex align-items-start flex-wrap-reverse board-card-number-container overflow-hidden js-board-card-number-container"
       >
         <span
           v-if="issue.referencePath"
-          class="board-card-number d-flex append-right-8 prepend-top-8"
+          class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8"
         >
           <tooltip-on-truncate
             v-if="issueReferencePath"
@@ -235,7 +235,7 @@ export default {
           />
         </span>
       </div>
-      <div class="board-card-assignee">
+      <div class="board-card-assignee d-flex">
         <user-avatar-link
           v-for="(assignee, index) in issue.assignees"
           v-if="shouldRenderAssignee(index)"

app/assets/javascripts/boards/components/issue_due_date.vue

@@ -82,7 +82,11 @@ export default {
 <template>
   <span>
     <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
-      <icon :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" name="calendar" />
+      <icon
+        :class="{ 'text-danger': isPastDue }"
+        class="board-card-info-icon align-top"
+        name="calendar"
+      />
       <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
         body
       }}</time>

app/assets/javascripts/boards/components/issue_time_estimate.vue

@@ -28,7 +28,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon" /><time
+      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >

app/assets/javascripts/boards/components/modal/empty_state.vue

@@ -42,8 +42,8 @@ export default {
 </script>
 
 <template>
-  <section class="empty-state">
-    <div class="row">
+  <section class="empty-state d-flex mt-0 h-100">
+    <div class="row w-100 my-auto mx-0">
       <div class="col-12 col-md-6 order-md-last">
         <aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside>
       </div>

app/assets/javascripts/boards/components/modal/header.vue

@@ -50,8 +50,8 @@ export default {
 </script>
 <template>
   <div>
-    <header class="add-issues-header form-actions">
-      <h2>
+    <header class="add-issues-header border-top-0 form-actions">
+      <h2 class="m-0">
         Add issues
         <button
           type="button"
@@ -65,7 +65,7 @@ export default {
       </h2>
     </header>
     <modal-tabs v-if="!loading && issuesCount > 0" />
-    <div v-if="showSearch" class="add-issues-search append-bottom-10">
+    <div v-if="showSearch" class="d-flex append-bottom-10">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"

app/assets/javascripts/boards/components/modal/index.vue

@@ -143,8 +143,11 @@ export default {
 };
 </script>
 <template>
-  <div v-if="showAddIssuesModal" class="add-issues-modal">
-    <div class="add-issues-container">
+  <div
+    v-if="showAddIssuesModal"
+    class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
+  >
+    <div class="add-issues-container d-flex flex-column m-auto rounded">
       <modal-header
         :project-id="projectId"
         :milestone-path="milestonePath"
@@ -161,8 +164,10 @@ export default {
         :new-issue-path="newIssuePath"
         :empty-state-svg="emptyStateSvg"
       />
-      <section v-if="loading || filterLoading" class="add-issues-list text-center">
-        <div class="add-issues-list-loading"><gl-loading-icon /></div>
+      <section v-if="loading || filterLoading" class="add-issues-list d-flex h-100 text-center">
+        <div class="add-issues-list-loading w-100 align-self-center">
+          <gl-loading-icon size="md" />
+        </div>
       </section>
       <modal-footer />
     </div>

app/assets/javascripts/boards/components/modal/list.vue

@@ -117,7 +117,7 @@ export default {
 };
 </script>
 <template>
-  <section ref="list" class="add-issues-list add-issues-list-columns">
+  <section ref="list" class="add-issues-list add-issues-list-columns d-flex h-100">
     <div
       v-if="issuesCount > 0 && issues.length === 0"
       class="empty-state add-issues-empty-state-filter text-center"
@@ -129,7 +129,7 @@ export default {
       <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
         <div
           :class="{ 'is-active': issue.selected }"
-          class="board-card"
+          class="board-card position-relative p-3 rounded"
           @click="toggleIssue($event, issue)"
         >
           <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />

app/assets/stylesheets/pages/boards.scss

-[v-cloak] {
-  display: none;
-}
-
 .user-can-drag {
   cursor: grab;
 }
@@ -40,35 +36,15 @@
   margin: 0 8px 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid $dropdown-divider-bg;
-
-  > p {
-    margin: 0;
-    font-size: 14px;
-  }
 }
 
 .issue-boards-page {
   .content-wrapper {
     padding-bottom: 0;
   }
-
-  .issues-details-filters {
-    display: flex;
-  }
-
-  .filter-form {
-    width: 100%;
-  }
-}
-
-.board-extra-actions {
-  font-size: 0;
-  white-space: nowrap;
 }
 
 .boards-app {
-  position: relative;
-
   @include media-breakpoint-up(sm) {
     transition: width $sidebar-transition-duration;
     width: 100%;
@@ -79,17 +55,9 @@
   }
 }
 
-.boards-app-loading {
-  width: 100%;
-  font-size: 34px;
-}
-
 .boards-list {
   height: calc(100vh - #{$issue-board-list-difference-xs});
-  width: 100%;
-  padding: $gl-padding ($gl-padding / 2);
   overflow-x: scroll;
-  white-space: nowrap;
   min-height: 200px;
 
   @include media-breakpoint-only(sm) {
@@ -114,13 +82,7 @@
 }
 
 .board {
-  display: inline-block;
   width: calc(85vw - 15px);
-  height: 100%;
-  padding-right: ($gl-padding / 2);
-  padding-left: ($gl-padding / 2);
-  white-space: normal;
-  vertical-align: top;
 
   @include media-breakpoint-up(sm) {
     width: 400px;
@@ -135,23 +97,7 @@
   &.is-collapsed {
     width: 50px;
 
-    .board-header {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-
-      button {
-        display: none;
-      }
-    }
-
     .board-title {
-      padding: 0;
-      border-bottom: 0;
-      justify-content: center;
-
       > span {
         width: 100%;
         margin-top: -12px;
@@ -167,34 +113,16 @@
       left: 50%;
       margin-left: -10px;
     }
-
-    .board-list-component,
-    .issue-count-badge {
-      display: none;
-    }
-  }
-
-  &:not(.is-collapsed) {
-    .board-list-component {
-      display: flex;
-      flex-direction: column;
-    }
   }
 }
 
 .board-inner {
-  position: relative;
-  height: 100%;
   font-size: $issue-boards-font-size;
   background: $gray-light;
   border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  flex: 1;
 }
 
 .board-header {
-  position: relative;
-
   &.has-border::before {
     border-top: 3px solid;
     border-color: inherit;
@@ -219,18 +147,9 @@
   }
 }
 
-.board-inner-container {
-  border-bottom: 1px solid $border-color;
-  padding: $gl-padding;
-}
-
 .board-title {
-  margin: 0;
-  padding: $gl-padding-8 $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
-  display: flex;
-  align-items: center;
 }
 
 .board-title-text {
@@ -239,10 +158,8 @@
 
 .board-delete {
   margin-right: 10px;
-  padding: 0;
   color: $gray-darkest;
   background-color: transparent;
-  border: 0;
   outline: 0;
 
   &:hover {
@@ -252,7 +169,6 @@
 
 .board-blank-state,
 .board-promotion-state {
-  padding: $gl-padding;
   background-color: $white-light;
   flex: 1;
   overflow-y: auto;
@@ -260,35 +176,23 @@
 }
 
 .board-blank-state-list {
-  list-style: none;
-
   > li:not(:last-child) {
     margin-bottom: 8px;
   }
 
   .label-color {
-    position: relative;
     top: 2px;
-    display: inline-block;
     width: 16px;
     height: 16px;
     margin-right: 3px;
-    border-radius: $border-radius-default;
   }
 }
 
 .board-list-component {
-  position: relative;
-  flex: 1;
   min-height: 0; // firefox fix
 }
 
 .board-list {
-  height: 100%;
-  width: 100%;
-  margin-bottom: 0;
-  padding: $gl-padding-4;
-  list-style: none;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -299,13 +203,9 @@
 }
 
 .board-card {
-  position: relative;
-  padding: $gl-padding;
   background: $white-light;
-  border-radius: $border-radius-default;
   border: 1px solid $gray-200;
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
-  list-style: none;
   line-height: $gl-padding;
 
   &:not(:last-child) {
@@ -333,10 +233,6 @@
     }
   }
 
-  svg {
-    vertical-align: top;
-  }
-
   .confidential-icon {
     color: $orange-600;
     cursor: help;
@@ -360,12 +256,7 @@
   }
 }
 
-.board-card-header {
-  display: flex;
-}
-
 .board-card-assignee {
-  display: flex;
   margin-top: -$gl-padding-4;
   margin-bottom: -$gl-padding-4;
 
@@ -425,34 +316,16 @@
 .board-card-number {
   font-size: $gl-font-size-xs;
   color: $gl-text-color-secondary;
-  overflow: hidden;
 
   @include media-breakpoint-up(md) {
     font-size: $label-font-size;
   }
 }
 
-.board-card-number-container {
-  overflow: hidden;
-}
-
-.issue-boards-search {
-  width: 395px;
-
-  .form-control {
-    display: inline-block;
-    width: 210px;
-  }
-}
-
 .board-list-count {
   padding: 10px 0;
   color: $gl-text-color-secondary;
   font-size: 13px;
-
-  > .fa {
-    margin-right: 5px;
-  }
 }
 
 .board-new-issue-form {
@@ -460,16 +333,9 @@
   margin: 5px;
 }
 
-.page-with-contextual-sidebar.layout-page .issue-boards-sidebar {
-  .issuable-sidebar-header {
-    position: relative;
-  }
-
+.issue-boards-sidebar {
   .gutter-toggle {
-    position: absolute;
-    top: 0;
     bottom: 15px;
-    right: 0;
     width: 22px;
     color: $gray-darkest;
 
@@ -489,10 +355,6 @@
   .issuable-header-text {
     @include overflow-break-word();
     padding-right: 35px;
-
-    > strong {
-      font-weight: $gl-font-weight-bold;
-    }
   }
 }
 
@@ -511,44 +373,25 @@
 }
 
 .add-issues-modal {
-  display: flex;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background-color: rgba($black, 0.3);
   z-index: 9999;
 }
 
 .add-issues-container {
-  display: flex;
-  flex-direction: column;
   width: 90vw;
   height: 85vh;
   max-width: 1100px;
   min-height: 500px;
-  margin: auto;
   padding: 25px 15px 0;
   background-color: $white-light;
-  border-radius: $border-radius-default;
   box-shadow: 0 2px 12px rgba($black, 0.5);
 
   .empty-state {
-    display: flex;
-    flex: 1;
-    margin-top: 0;
-
     &.add-issues-empty-state-filter {
       flex-direction: column;
       justify-content: center;
     }
 
-    > .row {
-      width: 100%;
-      margin: auto 0;
-    }
-
     .svg-content {
       margin-top: -40px;
     }
@@ -557,25 +400,15 @@
 
 .add-issues-header {
   margin: -25px -15px -5px;
-  border-top: 0;
   border-bottom: 1px solid $border-color;
   border-top-right-radius: $border-radius-default;
   border-top-left-radius: $border-radius-default;
 
   > h2 {
-    margin: 0;
     font-size: 18px;
   }
 }
 
-.add-issues-search {
-  display: flex;
-
-  .issues-filters {
-    flex: 1;
-  }
-}
-
 .add-issues-list-column {
   width: 100%;
 
@@ -589,8 +422,6 @@
 }
 
 .add-issues-list {
-  display: flex;
-  flex: 1;
   padding-top: 3px;
   margin-left: -$gl-vert-padding;
   margin-right: -$gl-vert-padding;
@@ -607,14 +438,6 @@
   }
 }
 
-.add-issues-list-loading {
-  align-self: center;
-  width: 100%;
-  padding-left: $gl-vert-padding;
-  padding-right: $gl-vert-padding;
-  font-size: 35px;
-}
-
 .add-issues-footer {
   margin: auto -15px 0;
   padding-left: 15px;
@@ -642,27 +465,6 @@
   border-radius: 50%;
 }
 
-.modal-filters {
-  display: flex;
-
-  > .dropdown {
-    display: none;
-    margin-right: 10px;
-
-    @include media-breakpoint-up(sm) {
-      display: block;
-    }
-  }
-
-  .dropdown-menu-toggle {
-    width: 100px;
-
-    @include media-breakpoint-up(md) {
-      width: 140px;
-    }
-  }
-}
-
 .board-card-info {
   color: $gl-text-color-secondary;
   white-space: nowrap;

app/views/shared/boards/_show.html.haml

@@ -13,14 +13,14 @@
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal, show_sorting_dropdown: false
   %script#js-board-promotion{ type: "text/x-template" }= render_if_exists "shared/promotions/promote_issue_board"
 
-#board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
+#board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
   .d-none.d-sm-none.d-md-block
     = render 'shared/issuable/search_bar', type: :boards, board: board
 
-  .boards-list
-    .boards-app-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-    %board{ "v-cloak" => true,
+  .boards-list.w-100.py-3.px-2.text-nowrap
+    .boards-app-loading.w-100.text-center{ "v-if" => "loading" }
+      = icon("spinner spin 2x")
+    %board{ "v-cloak" => "true",
       "v-for" => "list in state.lists",
       "ref" => "board",
       ":list" => "list",

app/views/shared/boards/components/_board.html.haml

-.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
+.board.d-inline-block.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
   ":data-id" => "list.id" }
-  .board-inner.d-flex.flex-column
-    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
-      %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
+  .board-inner.d-flex.flex-column.position-relative.h-100.rounded
+    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
+      %h3.board-title.m-0.d-flex.align-items-center.py-2.px-3.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset), "p-0 border-bottom-0 justify-content-center": !list.isExpanded }' }
         %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable",
           ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }",
           "aria-hidden": "true" }
@@ -31,9 +31,9 @@
           %board-delete{ "inline-template" => true,
             ":list" => "list",
             "v-if" => "!list.preset && list.id" }
-            %button.board-delete.has-tooltip.float-right{ type: "button", title: _("Delete list"), "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+            %button.board-delete.p-0.border-0.has-tooltip.float-right{ type: "button", title: _("Delete list"), ":class": "{ 'd-none': !list.isExpanded }", "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
               = icon("trash")
-        .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", "v-tooltip": true, data: { placement: "top" } }
+        .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", ":class": "{ 'd-none': !list.isExpanded }", "v-tooltip": true, data: { placement: "top" } }
           %span.issue-count-badge-count
             %icon.mr-1{ name: "issues" }
             {{ list.issuesSize }}
@@ -42,6 +42,7 @@
         %button.issue-count-badge-add-button.btn.btn-sm.btn-default.ml-1.has-tooltip.js-no-trigger-collapse{ type: "button",
           "@click" => "showNewIssueForm",
           "v-if" => "isNewIssueShown",
+          ":class": "{ 'd-none': !list.isExpanded }",
           "aria-label" => _("New issue"),
           "title" => _("New issue"),
           data: { placement: "top", container: "body" } }

app/views/shared/boards/components/_sidebar.html.haml

@@ -2,16 +2,16 @@
   %transition{ name: "boards-sidebar-slide" }
     %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
       .issuable-sidebar
-        .block.issuable-sidebar-header
+        .block.issuable-sidebar-header.position-relative
           %span.issuable-header-text.hide-collapsed.float-left
-            %strong
+            %strong.bold
               {{ issue.title }}
             %br/
             %span
               = render_if_exists "shared/boards/components/sidebar/issue_project_path"
               = precede "#" do
                 {{ issue.iid }}
-          %a.gutter-toggle.float-right{ role: "button",
+          %a.gutter-toggle.position-absolute.position-top-0.position-right-0{ role: "button",
             href: "#",
             "@click.prevent" => "closeSidebar",
             "aria-label" => "Toggle sidebar" }

app/views/shared/issuable/_label_page_default.html.haml

@@ -11,7 +11,7 @@
     = dropdown_title(title)
   - if show_boards_content
     .issue-board-dropdown-content
-      %p
+      %p.m-0
         = content_title
   = dropdown_filter(filter_placeholder)
   = dropdown_content

app/views/shared/issuable/_search_bar.html.haml

@@ -3,11 +3,11 @@
 - block_css_class = type != :boards_modal ? 'row-content-block second-block' : ''
 - user_can_admin_list = board && can?(current_user, :admin_list, board.parent)
 
-.issues-filters
-  .issues-details-filters.filtered-search-block{ class: block_css_class, "v-pre" => type == :boards_modal }
+.issues-filters{ class: ("w-100" if type == :boards_modal) }
+  .issues-details-filters.filtered-search-block.d-flex{ class: block_css_class, "v-pre" => type == :boards_modal }
     - if type == :boards
       = render_if_exists "shared/boards/switcher", board: board
-    = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form' do
+    = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
       - if params[:search].present?
         = hidden_field_tag :search, params[:search]
       - if @can_bulk_update