Update issue board cards design

4 files changed, 84 insertions, 42 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index a4629b092bf..e48d3344a2b 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -20,6 +20,7 @@ import eventHub from '../eventhub';
       list: {
         type: Object,
         required: false,
+        default: () => ({}),
       },
       rootPath: {
         type: String,
@@ -31,6 +32,26 @@ import eventHub from '../eventhub';
         default: false,
       },
     },
+    computed: {
+      cardUrl() {
+        return `${this.issueLinkBase}/${this.issue.id}`;
+      },
+      assigneeUrl() {
+        return `${this.rootPath}${this.issue.assignee.username}`;
+      },
+      assigneeUrlTitle() {
+        return `Assigned to ${this.issue.assignee.name}`;
+      },
+      avatarUrlTitle() {
+        return `Avatar for ${this.issue.assignee.name}`;
+      },
+      issueId() {
+        return `#${this.issue.id}`;
+      },
+      showLabelFooter() {
+        return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
+      },
+    },
     methods: {
       showLabel(label) {
         if (!this.list) return true;
@@ -67,35 +88,41 @@ import eventHub from '../eventhub';
     },
     template: `
       <div>
-        <h4 class="card-title">
-          <i
-            class="fa fa-eye-slash confidential-icon"
-            v-if="issue.confidential"></i>
-          <a
-            :href="issueLinkBase + '/' + issue.id"
-            :title="issue.title">
-            {{ issue.title }}
-          </a>
-        </h4>
-        <div class="card-footer">
-          <span
-            class="card-number"
-            v-if="issue.id">
-            #{{ issue.id }}
-          </span>
+        <div class="card-header">
+          <h4 class="card-title">
+            <i
+              class="fa fa-eye-slash confidential-icon"
+              v-if="issue.confidential"
+              aria-hidden="true"
+            />
+            <a
+              class="js-no-trigger"
+              :href="cardUrl"
+              :title="issue.title">{{ issue.title }}</a>
+            <span
+              class="card-number"
+              v-if="issue.id"
+            >
+              {{ issueId }}
+            </span>
+          </h4>
           <a
             class="card-assignee has-tooltip js-no-trigger"
-            :href="rootPath + issue.assignee.username"
-            :title="'Assigned to ' + issue.assignee.name"
+            :href="assigneeUrl"
+            :title="assigneeUrlTitle"
             v-if="issue.assignee"
-            data-container="body">
+            data-container="body"
+          >
             <img
               class="avatar avatar-inline s20 js-no-trigger"
               :src="issue.assignee.avatar"
               width="20"
               height="20"
-              :alt="'Avatar for ' + issue.assignee.name" />
+              :alt="avatarUrlTitle"
+            />
           </a>
+        </div>
+        <div class="card-footer" v-if="showLabelFooter">
           <button
             class="label color-label has-tooltip js-no-trigger"
             v-for="label in issue.labels"
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 7c0fc1008d0..0be1c215959 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -197,7 +197,7 @@
 
 .card {
   position: relative;
-  padding: 10px $gl-padding;
+  padding: 11px 10px 11px $gl-padding;
   background: $white-light;
   border-radius: $border-radius-default;
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
@@ -217,6 +217,8 @@
   }
 
   .confidential-icon {
+    position: relative;
+    top: 1px;
     margin-right: 5px;
   }
 }
@@ -224,34 +226,43 @@
 .card-title {
   margin: 0;
   font-size: 1em;
+  line-height: inherit;
 
   a {
-    color: inherit;
+    color: $gl-text-color;
     word-wrap: break-word;
+    margin-right: 2px;
   }
 }
 
-.card-footer {
-  margin-top: 5px;
-  line-height: 25px;
-
-  .label {
-    margin-right: 5px;
-    font-size: (14px / $issue-boards-font-size) * 1em;
-  }
+.card-header {
+  display: flex;
+  min-height: 20px;
 
   .card-assignee {
+    margin-left: auto;
     margin-right: 5px;
+    padding-left: 10px;
+    height: 20px;
   }
 
   .avatar {
-    margin-left: 0;
-    margin-right: 0;
+    margin: 0;
+  }
+}
+
+.card-footer {
+  margin: 0 0 5px;
+
+  .label {
+    margin-top: 5px;
+    margin-right: 6px;
   }
 }
 
 .card-number {
-  margin-right: 5px;
+  font-size: 12px;
+  color: $gl-text-color-secondary;
 }
 
 .issue-boards-search {
diff --git a/changelogs/unreleased/update-issue-board-cards-design.yml b/changelogs/unreleased/update-issue-board-cards-design.yml
new file mode 100644
index 00000000000..5ef94a74e8a
--- /dev/null
+++ b/changelogs/unreleased/update-issue-board-cards-design.yml
@@ -0,0 +1,4 @@
+---
+title: Update issue board cards design
+merge_request: 10353
+author:
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index 1c0f97d8a1c..248c31115ad 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -145,7 +145,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
     context 'selecing issues' do
       it 'selects single issue' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           page.within('.nav-links') do
             expect(page).to have_content('Selected issues 1')
@@ -155,7 +155,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'changes button text' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
         end
@@ -163,7 +163,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'changes button text with plural' do
         page.within('.add-issues-modal') do
-          all('.card').each do |el|
+          all('.card .card-number').each do |el|
             el.click
           end
 
@@ -173,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'shows only selected issues on selected tab' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           click_link 'Selected issues'
 
@@ -203,7 +203,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'selects all that arent already selected' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           expect(page).to have_selector('.is-active', count: 1)
 
@@ -215,11 +215,11 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'unselects from selected tab' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           click_link 'Selected issues'
 
-          first('.card').click
+          first('.card .card-number').click
 
           expect(page).not_to have_selector('.is-active')
         end
@@ -229,7 +229,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
     context 'adding issues' do
       it 'adds to board' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           click_button 'Add 1 issue'
         end
@@ -241,7 +241,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       it 'adds to second list' do
         page.within('.add-issues-modal') do
-          first('.card').click
+          first('.card .card-number').click
 
           click_button planning.title