Clean up issuable list and make responsive

1 files changed, 33 insertions, 27 deletions

diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index c184e0e0022..78f8c572a31 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -8,39 +8,45 @@
         %span.issue-title-text
           = confidential_icon(issue)
           = link_to issue.title, issue_path(issue)
-        %ul.controls
-          - if issue.closed?
-            %li
-              CLOSED
-
-          - if issue.assignees.any?
-            %li
-              = render 'shared/issuable/assignees', project: @project, issue: issue
-
-          = render 'shared/issuable_meta_data', issuable: issue
+        - if issue.tasks?
+          %span.task-status
+             
+            = issue.task_status
+        
+        
 
       .issue-info
-        #{issuable_reference(issue)} ·
-        opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
-        by #{link_to_member(@project, issue.author, avatar: false)}
-        - if issue.milestone
+        %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)}
            
-          = 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{ class: "#{'cred' if issue.overdue?}" }
+        - 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.labels.any?
-           
           - issue.labels.each do |label|
-            = link_to_label(label, subject: issue.project, css_class: 'label-link')
-        - if issue.tasks?
-           
-          %span.task-status
-            = issue.task_status
+            = 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
 
-        .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')}