Use Ember.ListView for staff action logs page

app/assets/javascripts/admin/templates/logs/staff_action_logs.js.handlebars

@@ -2,48 +2,19 @@
   <div class='admin-loading'>{{i18n loading}}</div>
 {{else}}
   {{#if model.length}}
-    <table class='table staff-actions'>
+    <div class='table staff-actions'>
-      <thead>
+      <div class="heading-container">
-        <th class="action">{{i18n admin.logs.action}}</th>
+        <div class="col heading action">{{i18n admin.logs.action}}</div>
-        <th class="staff_user">{{i18n admin.logs.staff_actions.staff_user}}</th>
+        <div class="col heading staff_user">{{i18n admin.logs.staff_actions.staff_user}}</div>
-        <th class="target_user">{{i18n admin.logs.staff_actions.target_user}}</th>
+        <div class="col heading target_user">{{i18n admin.logs.staff_actions.target_user}}</div>
-        <th class="created_at">{{i18n admin.logs.staff_actions.when}}</th>
+        <div class="col heading created_at">{{i18n admin.logs.staff_actions.when}}</div>
-        <th class="context">{{i18n admin.logs.staff_actions.context}}</th>
+        <div class="col heading context">{{i18n admin.logs.staff_actions.context}}</div>
-        <th class="details">{{i18n admin.logs.staff_actions.details}}</th>
+        <div class="col heading details">{{i18n admin.logs.staff_actions.details}}</div>
-      </thead>
+        <div class="clearfix"></div>
+      </div>
 
-      <tbody>
+      {{view Discourse.StaffActionLogsListView contentBinding="controller"}}
-        {{#each model}}
+    </div>
-          <tr>
-            <td class="action">{{actionName}}</td>
-            <td class="staff_user">
-              {{#linkTo 'adminUser' staff_user}}{{avatar staff_user imageSize="tiny"}}{{/linkTo}}
-              {{#linkTo 'adminUser' staff_user}}{{staff_user.username}}{{/linkTo}}
-            </td>
-            <td class="target_user">
-              {{#if target_user}}
-                {{#linkTo 'adminUser' target_user}}{{avatar target_user imageSize="tiny"}}{{/linkTo}}
-                {{#linkTo 'adminUser' target_user}}{{target_user.username}}{{/linkTo}}
-              {{else}}
-                &mdash;
-              {{/if}}
-            </td>
-            <td class="created_at">{{unboundAgeWithTooltip created_at}}</td>
-            <td class="context">{{context}}</td>
-            <td class="details">
-              {{{formattedDetails}}}
-              {{#if showFullDetails}}
-                {{details}}
-                <br/>
-                <a {{action toggleFullDetails this}}>{{i18n less}}</a>
-              {{else}}
-                <a {{action toggleFullDetails this}}>{{i18n more}}</a>
-              {{/if}}
-            </td>
-          </tr>
-        {{/each}}
-      </tbody>
-    </table>
   {{else}}
     {{i18n search.no_results}}
   {{/if}}

app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars

@@ -0,0 +1,25 @@
+<div class="col value action">{{actionName}}</div>
+<div class="col value staff_user">
+  {{#linkTo 'adminUser' staff_user}}{{avatar staff_user imageSize="tiny"}}{{/linkTo}}
+  {{#linkTo 'adminUser' staff_user}}{{staff_user.username}}{{/linkTo}}
+</div>
+<div class="col value target_user">
+  {{#if target_user}}
+    {{#linkTo 'adminUser' target_user}}{{avatar target_user imageSize="tiny"}}{{/linkTo}}
+    {{#linkTo 'adminUser' target_user}}{{target_user.username}}{{/linkTo}}
+  {{else}}
+    &mdash;
+  {{/if}}
+</div>
+<div class="col value created_at">{{unboundAgeWithTooltip created_at}}</div>
+<div class="col value context">{{context}}</div>
+<div class="col value details">
+  {{{formattedDetails}}}
+  {{#if showFullDetails}}
+    <a {{action toggleFullDetails this}}>{{i18n less}}</a><br/>
+    {{details}}
+  {{else}}
+    <a {{action toggleFullDetails this}}>{{i18n more}}</a>
+  {{/if}}
+</div>
+<div class="clearfix"></div>

app/assets/javascripts/admin/views/logs/blocked_emails_list_view.js

@@ -1,5 +1,5 @@
 Discourse.BlockedEmailsListView = Ember.ListView.extend({
-  height: 500,
+  height: 700,
   rowHeight: 32,
   itemViewClass: Ember.ListItemView.extend({templateName: "admin/templates/logs/blocked_emails_list_item"})
 });

app/assets/javascripts/admin/views/logs/staff_action_logs_list_view.js

@@ -0,0 +1,5 @@
+Discourse.StaffActionLogsListView = Ember.ListView.extend({
+  height: 700,
+  rowHeight: 75,
+  itemViewClass: Ember.ListItemView.extend({templateName: "admin/templates/logs/staff_action_logs_list_item"})
+});

app/assets/stylesheets/admin/admin_base.scss

@@ -698,19 +698,6 @@ table {
 
 .blocked-emails {
   width: 900px;
-  margin-left: 5px;
-  border-bottom: dotted 1px #ddd;
-  .heading-container {
-    width: 100%;
-    background-color: #e4e4e4;
-  }
-  .heading {
-    font-weight: bold;
-  }
-  .col {
-    display: inline-block;
-    padding-top: 6px;
-  }
   .email {
     width: 400px;
     margin-left: 5px;
@@ -719,18 +706,22 @@ table {
     width: 110px;
     text-align: center;
   }
-  .ember-list-item-view {
-    width: 100%;
-    border-top: solid 1px #ddd;
-  }
 }
 
 .staff-actions {
+  width: 100%;
   .action {
     width: 120px;
+    margin-left: 5px;
   }
-  .staff_user, .target_user, .created_at {
+  .staff_user, .target_user {
-    white-space: nowrap;
+    width: 100px;
+  }
+  .created_at {
+    width: 50px;
+  }
+  .context {
+    width: 200px;
   }
   .created_at {
     text-align: center;
@@ -740,6 +731,9 @@ table {
     a {
       text-decoration: underline;
     }
+    &.value {
+      height: 70px;
+    }
   }
 }
 
@@ -753,3 +747,29 @@ table {
 .ember-list-item-view {
   position: absolute;
 }
+
+.blocked-emails, .staff-actions {
+  margin-left: 5px;
+  border-bottom: dotted 1px #ddd;
+
+  .heading-container {
+    width: 100%;
+    background-color: #e4e4e4;
+  }
+  .col.heading {
+    font-weight: bold;
+    padding: 4px 0;
+  }
+  .col {
+    display: inline-block;
+    padding-top: 6px;
+    vertical-align: top;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .ember-list-item-view {
+    width: 100%;
+    border-top: solid 1px #ddd;
+  }
+}

app/controllers/admin/staff_action_logs_controller.rb

@@ -1,8 +1,8 @@
 class Admin::StaffActionLogsController < Admin::AdminController
 
   def index
-    staff_actions = StaffActionLog.limit(50).order('created_at desc').to_a
+    staff_action_logs = StaffActionLog.limit(200).order('id DESC').includes(:staff_user, :target_user).to_a
-    render_serialized(staff_actions, StaffActionLogSerializer)
+    render_serialized(staff_action_logs, StaffActionLogSerializer)
   end
 
 end