From f8584e28d7bb0201227d9c89b7c7229194ffc274 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Wed, 24 May 2017 15:52:18 -0400
Subject: [PATCH] UX: improved layout of flag handling UI on mobile

---
 .../admin/templates/flags-list.hbs            | 60 +++++++++++--------
 .../stylesheets/common/admin/admin_base.scss  | 27 ++++++++-
 .../stylesheets/common/base/discourse.scss    |  5 ++
 3 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/flags-list.hbs b/app/assets/javascripts/admin/templates/flags-list.hbs
index e315ce0b9e0..7edc1b30f2d 100644
--- a/app/assets/javascripts/admin/templates/flags-list.hbs
+++ b/app/assets/javascripts/admin/templates/flags-list.hbs
@@ -3,7 +3,6 @@
     <table class="admin-flags">
       <thead>
         <tr>
-          <th class='user'></th>
           <th class='excerpt'></th>
           <th class='flaggers'>{{i18n 'admin.flags.flagged_by'}}</th>
           <th class='flaggers'>{{#if adminOldFlagsView}}{{i18n 'admin.flags.resolved_by'}}{{/if}}</th>
@@ -13,30 +12,42 @@
         {{#each content as |flaggedPost|}}
           <tr class={{flaggedPost.extraClasses}}>
 
-            <td class='user'>
-              {{#if flaggedPost.postAuthorFlagged}}
-                {{#if flaggedPost.user}}
-                  {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
-                  {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
-                {{/if}}
-              {{/if}}
-              {{#if adminActiveFlagsView}}
-                {{#if flaggedPost.previous_flags_count}}
-                  <span title="{{i18n 'admin.flags.previous_flags_count' count=flaggedPost.previous_flags_count}}" class="badge-notification flagged-posts">{{flaggedPost.previous_flags_count}}</span>
-                {{/if}}
-              {{/if}}
-            </td>
-
             <td class='excerpt'>
-              <h3>
-                {{#if flaggedPost.topic.isPrivateMessage}}
-                  <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
+
+              <div class="flex-center-align">
+                <div class="flagged-post-avatar">
+                  {{#if flaggedPost.postAuthorFlagged}}
+                    {{#if flaggedPost.user}}
+                      {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
+                      {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
+                    {{/if}}
+                  {{/if}}
+                  {{#if adminActiveFlagsView}}
+                    {{#if flaggedPost.previous_flags_count}}
+                      <span title="{{i18n 'admin.flags.previous_flags_count' count=flaggedPost.previous_flags_count}}" class="badge-notification flagged-posts">{{flaggedPost.previous_flags_count}}</span>
+                    {{/if}}
+                  {{/if}}
+                </div>
+                <div class="topic-excerpt">
+                  <h3>
+                    {{#if flaggedPost.topic.isPrivateMessage}}
+                      <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
+                    {{/if}}
+                    {{topic-status topic=flaggedPost.topic}}
+                    <a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a>
+                  </h3>
+                  {{#unless site.mobileView}}
+                    {{#if flaggedPost.postAuthorFlagged}}
+                      <p>{{{flaggedPost.excerpt}}}</p>
+                    {{/if}}
+                  {{/unless}}
+                </div>
+              </div>
+
+              {{#if site.mobileView}}
+                {{#if flaggedPost.postAuthorFlagged}}
+                  <p>{{{flaggedPost.excerpt}}}</p>
                 {{/if}}
-                {{topic-status topic=flaggedPost.topic}}
-                <a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a>
-              </h3>
-              {{#if flaggedPost.postAuthorFlagged}}
-                <p>{{{flaggedPost.excerpt}}}</p>
               {{/if}}
             </td>
 
@@ -104,7 +115,6 @@
 
           {{#each flaggedPost.conversations as |c|}}
             <tr class='message'>
-              <td></td>
               <td colspan="3">
                 <div>
                   {{#if c.response}}
@@ -130,7 +140,7 @@
 
           {{#unless adminOldFlagsView}}
             <tr>
-              <td colspan="4" class="action">
+              <td colspan="3" class="action">
                 {{#if adminActiveFlagsView}}
                   <button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree'}}&hellip;</button>
                   {{#if flaggedPost.postHidden}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 93878dadb69..5e9a29358a4 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -746,16 +746,25 @@ section.details {
   .message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); }
   .message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); }
 
+  .flagged-post-avatar {
+    margin-right: 10px;
+  }
+
   .excerpt {
     padding: 8px;
     word-wrap: break-word;
     .fa { display: inline-block; }
     h3 {
-      max-height: 1.2em;
-      overflow: hidden;
       margin-top: 0;
       margin-bottom: 5px;
     }
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  tr.message td {
+    padding-left: 60px;
   }
 
   .flagged-posts { background: $danger; }
@@ -1828,6 +1837,20 @@ table#user-badges {
   left: -100%;
 }
 
+.mobile-view .admin-flags {
+  .flaggers {
+    padding: 2px;
+    .avatar {
+      padding: 0;
+    }
+  }
+  tr.message td {
+    padding-left: 8px;
+  }
+}
+
+
+
 .cboxcontainer {
   display: inline-block;
   padding: 8px;
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index b9885750ae7..1aeaf7cfe3a 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -193,6 +193,11 @@ body {
   }
 }
 
+.flex-center-align {
+  display: flex;
+  align-items: center;
+}
+
 .unread-private-messages {
   color: $secondary;
   background: $success;