Clean up issuable list and make responsive

2 files changed, 69 insertions, 27 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index c2346f2f1c3..a776f3d19c7 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -597,6 +597,42 @@
         vertical-align: text-top;
       }
     }
+
+    .issue-title,
+    .issue-info {
+      margin-right: 150px;
+    }
+
+    .issue-milestone a,
+    .issue-info,
+    .task-status {
+      font-weight: normal;
+      font-size: 13px;
+      color: $gl-text-color-secondary;
+    }
+
+    .issuable-meta {
+      font-size: 13px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      width: 150px;
+    }
+
+    @media(max-width: $screen-xs-max) {
+      .issue-authored,
+      .issue-milestone,
+      .issue-due-date,
+      .task-status,
+      .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 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')}