UX: Topic list refactor (#299)

assets/javascripts/discourse/templates/mobile/components/assigned-topic-list-item.hbs

@@ -20,7 +20,7 @@
       </div>
     {{/if}}
   </div>
-  <div class="pull-right">
+  <div class="pull-right topic-list-num">
     {{#if topic.assigned_to_user}}
       {{assign-actions-dropdown
         topic=topic
@@ -46,7 +46,7 @@
   <div class="clearfix"></div>
   <div class="topic-item-stats clearfix">
     {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
-    <div class="pull-right">
+    <div class="pull-right topic-list-num">
       {{raw "list/activity-column" topic=topic tagName="div" class="num activity last"}}
       <a href={{topic.lastPostUrl}} title="{{i18n "last_post"}}: {{html-safe raw-date topic.bumped_at}}">{{topic.last_poster_username}}</a>
     </div>

assets/javascripts/discourse/templates/mobile/components/basic-assigned-topic-list.hbs

@@ -9,7 +9,7 @@
 
   {{#if topics}}
     <table class="topic-list">
-      <tbody>
+      <tbody class="topic-list-body">
         {{#each topics as |t|}}
           {{assigned-topic-list-item
             topic=t

assets/stylesheets/assigns.scss

@@ -187,3 +187,15 @@
 .assigned-to.discourse-tag.simple {
   color: var(--primary-medium);
 }
+
+.topic-list-header .topic-list-data.num:last-of-type {
+  margin-right: 50px; // account for button in topic-list-items in topic-list-refactor
+}
+
+.assigned-topic-list-item {
+  .topic-list-data {
+    .topic-item-stats .category a {
+      max-width: 145px;
+    }
+  }
+}

assets/stylesheets/mobile/assigns.scss

@@ -6,9 +6,32 @@
 }
 
 .assigned-topic-list-item {
+  .topic-list-data {
+    max-width: unset;
+  }
   .pull-right .num.activity {
     margin-right: 0.5em;
   }
+  .topic-item-stats {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "left-top right-top"
+      "left-bottom right-bottom";
+    .discourse-tags {
+      grid-area: left-top;
+      max-width: unset;
+    }
+    .topic-list-num {
+      grid-area: right-bottom;
+      display: flex;
+      justify-content: end;
+    }
+    .category {
+      grid-area: left-bottom;
+    }
+  }
 }
 
 .select-kit-row[data-value="unassign-mobile-header"] {