Merge branch 'boards/css-clean-up' into 'master'

Boards - CSS clean up

See merge request gitlab-org/gitlab!45965

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

@@ -127,7 +127,7 @@ export default {
       'board-type-assignee': list.type === 'assignee',
     }"
     :data-id="list.id"
-    class="board gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
+    class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
     data-qa-selector="board_list"
   >
     <div

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

@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div class="append-bottom-20">
-    <label class="form-section-title label-bold" for="board-new-name">
+    <label class="label-bold gl-font-lg" for="board-new-name">
       {{ __('List options') }}
     </label>
     <p class="text-secondary gl-mb-3">

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

@@ -196,9 +196,7 @@ export default {
       <p v-if="isDeleteForm">{{ __('Are you sure you want to delete this board?') }}</p>
       <form v-else class="js-board-config-modal" @submit.prevent>
         <div v-if="!readonly" class="append-bottom-20">
-          <label class="form-section-title label-bold" for="board-new-name">{{
-            __('Title')
-          }}</label>
+          <label class="label-bold gl-font-lg" for="board-new-name">{{ __('Title') }}</label>
           <input
             id="board-new-name"
             ref="name"

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

@@ -188,8 +188,9 @@ export default {
         'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
         'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
         'gl-py-2': !list.isExpanded && isSwimlanesHeader,
+        'gl-flex-direction-column': !list.isExpanded,
       }"
-      class="board-title gl-m-0 gl-display-flex js-board-handle"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle"
     >
       <gl-button
         v-if="list.isExpandable"
@@ -202,7 +203,15 @@ export default {
         @click="toggleExpanded"
       />
       <!-- The following is only true in EE and if it is a milestone -->
-      <span v-if="showMilestoneListDetails" aria-hidden="true" class="gl-mr-2 milestone-icon">
+      <span
+        v-if="showMilestoneListDetails"
+        aria-hidden="true"
+        class="milestone-icon"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+          'gl-mr-2': list.isExpanded,
+        }"
+      >
         <gl-icon name="timer" />
       </span>
 
@@ -210,6 +219,9 @@ export default {
         v-if="showAssigneeListDetails"
         :href="list.assignee.path"
         class="user-avatar-link js-no-trigger"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+        }"
       >
         <img
           v-gl-tooltip.hover.bottom
@@ -223,20 +235,28 @@ export default {
       </a>
       <div
         class="board-title-text"
-        :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }"
+        :class="{
+          'gl-display-none': !list.isExpanded && isSwimlanesHeader,
+          'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded,
+          'gl-flex-grow-1': list.isExpanded,
+        }"
       >
         <span
           v-if="list.type !== 'label'"
           v-gl-tooltip.hover
           :class="{
-            'gl-display-inline-block': list.type === 'milestone',
+            'gl-display-block': !list.isExpanded || list.type === 'milestone',
           }"
           :title="listTitle"
-          class="board-title-main-text block-truncated"
+          class="board-title-main-text gl-text-truncate"
         >
           {{ list.title }}
         </span>
-        <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2">
+        <span
+          v-if="list.type === 'assignee'"
+          class="board-title-sub-text gl-ml-2 gl-font-weight-normal"
+          :class="{ 'gl-display-none': !list.isExpanded }"
+        >
           @{{ listAssignee }}
         </span>
         <gl-label
@@ -279,7 +299,10 @@ export default {
       <div
         v-if="showBoardListAndBoardInfo"
         class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
-        :class="{ 'gl-display-none!': !list.isExpanded && isSwimlanesHeader }"
+        :class="{
+          'gl-display-none!': !list.isExpanded && isSwimlanesHeader,
+          'gl-p-0': !list.isExpanded,
+        }"
       >
         <span class="gl-display-inline-flex">
           <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />

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

@@ -133,7 +133,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="d-flex board-card-header" dir="auto">
+    <div class="gl-display-flex" dir="auto">
       <h4 class="board-card-title gl-mb-0 gl-mt-0">
         <gl-icon
           v-if="issue.blocked"
@@ -156,7 +156,7 @@ export default {
         }}</a>
       </h4>
     </div>
-    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 d-flex flex-wrap">
+    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
@@ -169,24 +169,26 @@ export default {
         />
       </template>
     </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 overflow-hidden js-board-card-number-container"
+      class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end"
+    >
+      <div
+        class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
       >
         <span
           v-if="issue.referencePath"
-          class="board-card-number overflow-hidden d-flex gl-mr-3 gl-mt-3"
+          class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
         >
           <tooltip-on-truncate
             v-if="issueReferencePath"
             :title="issueReferencePath"
             placement="bottom"
-            class="board-issue-path block-truncated bold"
+            class="board-issue-path gl-text-truncate gl-font-weight-bold"
             >{{ issueReferencePath }}</tooltip-on-truncate
           >
           #{{ issue.iid }}
         </span>
-        <span class="board-info-items gl-mt-3 d-inline-block">
+        <span class="board-info-items gl-mt-3 gl-display-inline-block">
           <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight
@@ -196,7 +198,7 @@ export default {
           />
         </span>
       </div>
-      <div class="board-card-assignee d-flex">
+      <div class="board-card-assignee gl-display-flex">
         <user-avatar-link
           v-for="(assignee, index) in issue.assignees"
           v-if="shouldRenderAssignee(index)"
@@ -209,7 +211,7 @@ export default {
           tooltip-placement="bottom"
         >
           <span class="js-assignee-tooltip">
-            <span class="bold d-block">{{ __('Assignee') }}</span>
+            <span class="gl-font-weight-bold gl-display-block">{{ __('Assignee') }}</span>
             {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>

app/assets/stylesheets/page_bundles/boards.scss

@@ -83,9 +83,6 @@
 }
 
 .board {
-  // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS
-  // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828
-  display: inline-block;
   width: calc(85vw - 15px);
 
   @include media-breakpoint-up(sm) {
@@ -116,39 +113,10 @@
   &.is-collapsed {
     width: 50px;
 
-    .board-title {
-      flex-direction: column;
-    }
-
     .board-title-caret {
       margin-top: 1px;
     }
 
-    .user-avatar-link,
-    .milestone-icon {
-      margin-top: $gl-padding-8;
-      transform: rotate(90deg);
-    }
-
-    .board-title-text {
-      flex-grow: 0;
-      margin: $gl-padding-8 0;
-
-      .board-title-main-text {
-        display: block;
-      }
-
-      .board-title-sub-text {
-        display: none;
-      }
-    }
-
-    .issue-count-badge {
-      border: 0;
-      white-space: nowrap;
-      padding: 0;
-    }
-
     .board-title-text > span,
     .issue-count-badge > span {
       height: 16px;
@@ -197,10 +165,7 @@
 }
 
 .board-title {
-  align-items: center;
-  font-size: 1em;
   border-bottom: 1px solid var(--gray-100, $gray-100);
-  padding: 0 $gl-spacing-scale-3;
   height: 3rem;
 
   .js-max-issue-size::before {
@@ -208,21 +173,6 @@
   }
 }
 
-.board-title-text {
-  flex-grow: 1;
-}
-
-.board-delete.gl-button {
-  background-color: transparent;
-  outline: 0;
-
-  &:hover {
-    color: var(--blue-600, $blue-600);
-    box-shadow: none;
-  }
-}
-
-.board-blank-state,
 .board-promotion-state {
   background-color: var(--white, $white);
   flex: 1;
@@ -230,19 +180,6 @@
   overflow-x: hidden;
 }
 
-.board-blank-state-list {
-  > li:not(:last-child) {
-    margin-bottom: 8px;
-  }
-
-  .label-color {
-    top: 2px;
-    width: 16px;
-    height: 16px;
-    margin-right: 3px;
-  }
-}
-
 .board-list-component {
   min-height: 0; // firefox fix
 }
@@ -311,10 +248,6 @@
   }
 }
 
-.board-card-header {
-  text-align: initial;
-}
-
 .board-card-assignee {
   margin-top: -$gl-padding-4;
   margin-bottom: -$gl-padding-4;
@@ -586,28 +519,6 @@
   }
 }
 
-.board-swimlanes {
-  overflow-x: auto;
-}
-
 .board-header-collapsed-info-icon:hover {
   color: var(--gray-900, $gray-900);
 }
-
-$epic-icons-spacing: 40px;
-
-.board-epic-lane {
-  max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
-
-  .page-with-icon-sidebar & {
-    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
-  }
-
-  .page-with-icon-sidebar .is-compact & {
-    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
-  }
-
-  .is-compact & {
-    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
-  }
-}

changelogs/unreleased/boards-css-clean-up.yml

+---
+title: Boards - Fix Milestone icon alignment in header
+merge_request: 45965
+author:
+type: fixed

ee/app/assets/javascripts/boards/components/board_scope.vue

@@ -95,7 +95,7 @@ export default {
 <template>
   <div data-qa-selector="board_scope_modal">
     <div v-if="canAdminBoard" class="media">
-      <label class="form-section-title label-bold media-body">{{ __('Scope') }}</label>
+      <label class="label-bold gl-font-lg media-body">{{ __('Scope') }}</label>
       <button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
         {{ expandButtonText }}
       </button>

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -118,7 +118,7 @@ export default {
           'is-collapsed': !list.isExpanded,
           'is-draggable': !list.preset,
         }"
-        class="board gl-px-3 gl-vertical-align-top gl-white-space-normal"
+        class="board gl-display-inline-block gl-px-3 gl-vertical-align-top gl-white-space-normal"
         :data-list-id="list.id"
         data-testid="board-header-container"
       >

ee/app/assets/stylesheets/page_bundles/boards.scss

@@ -72,7 +72,6 @@
 .board-type-assignee {
   .board-title-sub-text {
     color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-    font-weight: normal;
   }
 }
 
@@ -86,11 +85,6 @@
   }
 }
 
-
-.form-section-title {
-  font-size: 16px;
-}
-
 .board-config-modal {
   width: 440px;
 
@@ -103,3 +97,25 @@
     }
   }
 }
+
+.board-swimlanes {
+  overflow-x: auto;
+}
+
+$epic-icons-spacing: 40px;
+
+.board-epic-lane {
+  max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
+
+  .page-with-icon-sidebar & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
+  }
+
+  .page-with-icon-sidebar .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+
+  .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+}