Added new but unaccepted design pattern, it is only pushed for future...

Added new but unaccepted design pattern, it is only pushed for future reference on the slim chance that a similar pattern is used

app/assets/javascripts/abuse_reports.js.coffee

-class @AbuseReports
-  MAX_MESSAGE_LENGTH = 300
-  MESSAGE_CELL_SELECTOR = '.abuse-reports td:nth-child(3)'
-
-  constructor: ->
-    $(MESSAGE_CELL_SELECTOR).each @truncateLongMessage
-    $(document)
-      .off 'click', MESSAGE_CELL_SELECTOR
-      .on 'click', MESSAGE_CELL_SELECTOR, @toggleMessageTruncation
-
-  truncateLongMessage: ->
-    $messageCellElement = $(this)
-    reportMessage = $messageCellElement.text()
-    if reportMessage.length > MAX_MESSAGE_LENGTH
-      $messageCellElement.data 'original-message', reportMessage
-      $messageCellElement.data 'message-truncated', 'true'
-      $messageCellElement.text "#{reportMessage.substr 0, MAX_MESSAGE_LENGTH}..."
-
-  toggleMessageTruncation: ->
-    $messageCellElement = $(this)
-    originalMessage = $messageCellElement.data 'original-message'
-    return if not originalMessage
-    if $messageCellElement.data('message-truncated') is 'true'
-      $messageCellElement.data 'message-truncated', 'false'
-      $messageCellElement.text originalMessage
-    else
-      $messageCellElement.data 'message-truncated', 'true'
-      $messageCellElement.text "#{originalMessage.substr 0, MAX_MESSAGE_LENGTH}..."

app/assets/stylesheets/pages/admin.scss

@@ -103,9 +103,25 @@
     margin-top: 4px;
   }
   .panel-body {
-    overflow-y: scroll;
     max-height: 300px;
+    overflow-y: scroll;
   }
+  .panel-heading {
+    position: relative;
+  }
+  .clickable-entity {
+    display: inline;
+    position: relative;
+    z-index: 2;
+  }
+  .clickable-title {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
   .no-reports {
     .emoji-icon {
       margin-left: $btn-side-margin;

app/views/admin/abuse_reports/_abuse_report.html.haml

@@ -4,39 +4,29 @@
 .panel.panel-default
   .panel-heading{ id: "heading#{ abuse_report_counter }", role: 'tab' }
     .panel-title
+      %a.clickable-title{ role: 'button', href: "#collapse#{ abuse_report_counter }", data: { toggle: 'collapse', parent: '#accordion' }, aria: { expanded: 'true', controls: "collapse#{ abuse_report_counter }" } }
       - if user
-        = link_to user.name, user
+        = link_to user.name, user, { class: 'clickable-entity', data: { toggle: 'tooltip', placement: 'bottom', title: "Joined #{user.created_at}" } }
       - else
         (removed)
-      -# %a{ role: 'button', href: "#collapse#{ abuse_report_counter }", data: { toggle: 'collapse', parent: '#accordion' }, aria: { expanded: 'true', controls: "collapse#{ abuse_report_counter }" } }
       reported by
       - if reporter
-        = link_to reporter.name, reporter
+        = link_to reporter.name, reporter, { class: 'clickable-entity' }
       - else
         (removed)
+      .light.small.clickable-entity
+        = time_ago_with_tooltip(abuse_report.created_at)
       .btn-group.pull-right
         - if user
           = link_to 'Remove user & report', admin_abuse_report_path(abuse_report, remove_user: true),
-            data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, remote: true, method: :delete, class: "btn btn-sm btn-remove js-remove-tr"
+            data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, remote: true, method: :delete, class: 'btn btn-sm btn-remove js-remove-tr'
         - if user && !user.blocked?
-          = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-sm"
+          = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: 'btn btn-sm'
         - else
           .btn.btn-sm.disabled
             Already Blocked
-        = link_to 'Remove report', [:admin, abuse_report], remote: true, method: :delete, class: "btn btn-sm btn-close js-remove-tr"
+        = link_to 'Remove report', [:admin, abuse_report], remote: true, method: :delete, class: 'btn btn-sm btn-close js-remove-tr'
       .clearfix
   .panel-collapse.collapse{ id: "collapse#{ abuse_report_counter }", class: (abuse_report_counter == 0 ? 'in' : ''), role: 'tabpanel', aria: { labelledby: "heading#{ abuse_report_counter }" } }
     .panel-body
       = markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
-
--# %tr
--#   %td
-
--#   %td
--#     .light.small
--#       = time_ago_with_tooltip(abuse_report.created_at)
--#   %td
--#     = markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
--#   %td
--#
--#   %td