cleans up issuable list, making them more responsiveissueable-list-cleanup

3 files changed, 74 insertions, 59 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a776f3d19c7..0e727db141d 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -585,7 +585,22 @@
     .issue-info-container {
       -webkit-flex: 1;
       flex: 1;
+      display: flex;
       padding-right: $gl-padding;
+
+      .issue-main-info {
+        flex: 1 auto;
+      }
+
+      .issuable-meta {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        .controls {
+          margin-bottom: 2px;
+        }
+      }
     }
 
     .issue-check {
@@ -598,25 +613,27 @@
       }
     }
 
-    .issue-title,
-    .issue-info {
-      margin-right: 150px;
-    }
-
-    .issue-milestone a,
+    .issue-milestone,
     .issue-info,
-    .task-status {
+    .task-status,
+    .issue-updated-at {
       font-weight: normal;
-      font-size: 13px;
       color: $gl-text-color-secondary;
+
+      a {
+        color: $gl-text-color;
+
+        .fa {
+          color: $gl-text-color-secondary;
+        }
+      }
     }
 
-    .issuable-meta {
-      font-size: 13px;
-      position: absolute;
-      right: 15px;
-      top: 15px;
-      width: 150px;
+    @media(max-width: $screen-md-max) {
+      .task-status,
+      .issue-due-date {
+        display: none;
+      }
     }
 
     @media(max-width: $screen-xs-max) {
@@ -627,11 +644,6 @@
       .issue-updated-at {
         display: none;
       }
-
-      .issue-title,
-      .issue-info {
-        margin-right: 100px;
-      }
     }
   }
 }
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 78f8c572a31..96a6f8d6ccc 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -4,49 +4,48 @@
       .issue-check
         = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
     .issue-info-container
-      .issue-title.title
-        %span.issue-title-text
-          = confidential_icon(issue)
-          = link_to issue.title, issue_path(issue)
-        - if issue.tasks?
-          %span.task-status
-             
-            = issue.task_status
-        
-        
+      .issue-main-info
+        .issue-title.title
+          %span.issue-title-text
+            = confidential_icon(issue)
+            = link_to issue.title, issue_path(issue)
+          - if issue.tasks?
+            %span.task-status
+               
+              = issue.task_status
 
-      .issue-info
-        %span.issue-reference
-          #{issuable_reference(issue)}
-        %span.issue-authored
-          ·
-          opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
-          by #{link_to_member(@project, issue.author, avatar: false)}
+        .issue-info
+          %span.issue-reference
+            #{issuable_reference(issue)}
+          %span.issue-authored
+            ·
+            opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
+            by #{link_to_member(@project, issue.author, avatar: false)}
            
-        - if issue.milestone
-          %span.issue-milestone
-            = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
-              = icon('clock-o')
-              = issue.milestone.title
+          - if issue.milestone
+            %span.issue-milestone
+              = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
+                = icon('clock-o')
+                = issue.milestone.title
              
-        - if issue.due_date
-          %span.issue-due-date{ class: "#{'cred' if issue.overdue?}" }
-            = icon('calendar')
-            = issue.due_date.to_s(:medium)
+          - if issue.due_date
+            %span.issue-due-date{ class: "#{'cred' if issue.overdue?}" }
+              = icon('calendar')
+              = issue.due_date.to_s(:medium)
              
-        - if issue.labels.any?
-          - issue.labels.each do |label|
-            = link_to_label(label, subject: issue.project, css_class: 'label-link')        
-        .issuable-meta
-          %ul.controls
-            - if issue.closed?
-              %li
-                CLOSED
+          - if issue.labels.any?
+            - issue.labels.each do |label|
+              = link_to_label(label, subject: issue.project, css_class: 'label-link')
+      .issuable-meta
+        %ul.controls
+          - if issue.closed?
+            %li
+              CLOSED
 
-            - if issue.assignees.any?
-              %li
-                = render 'shared/issuable/assignees', project: @project, issue: issue
+          - if issue.assignees.any?
+            %li
+              = render 'shared/issuable/assignees', project: @project, issue: issue
 
-            = render 'shared/issuable_meta_data', issuable: issue
-          .pull-right.issue-updated-at
-            %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
+          = render 'shared/issuable_meta_data', issuable: issue
+        .pull-right.issue-updated-at
+          %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/changelogs/unreleased/issueable-list-cleanup.yml b/changelogs/unreleased/issueable-list-cleanup.yml
new file mode 100644
index 00000000000..d3d67d04574
--- /dev/null
+++ b/changelogs/unreleased/issueable-list-cleanup.yml
@@ -0,0 +1,4 @@
+---
+title: Clean up UI of issuable lists and make more responsive
+merge_request:
+author: