From f2468f1093fc8a865730523a5af8bb869077ea9c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 13 Apr 2022 18:35:47 -0400
Subject: [PATCH] Revert: UX: Make full topic row clickable on mobile (#16440)
 (#16472)

---
 .../app/components/topic-list-item.js         | 12 --------
 .../templates/mobile/list/topic-list-item.hbr | 10 ++++---
 app/assets/stylesheets/mobile/topic-list.scss | 29 ++++---------------
 3 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-list-item.js b/app/assets/javascripts/discourse/app/components/topic-list-item.js
index b5ab57e7023..4bdbd7de4bd 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list-item.js
+++ b/app/assets/javascripts/discourse/app/components/topic-list-item.js
@@ -258,18 +258,6 @@ export default Component.extend({
       return this.navigateToTopic(topic, e.target.getAttribute("href"));
     }
 
-    // make full row click target on mobile, due to size constraints
-    if (
-      this.site.mobileView &&
-      (e.target.classList.contains("right") ||
-        e.target.classList.contains("topic-item-stats"))
-    ) {
-      if (wantsNewWindow(e)) {
-        return true;
-      }
-      return this.navigateToTopic(topic, topic.lastUnreadUrl);
-    }
-
     if (e.target.closest("a.topic-status")) {
       this.topic.togglePinnedForUser();
       return false;
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
index bb7b847b047..785bb81223b 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
@@ -38,10 +38,12 @@
         </div>
       {{/unless}}
       {{discourse-tags topic mode="list"}}
-      <div class='num activity last'>
-        <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
-            href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
-        </span>
+      <div class="pull-right">
+        <div class='num activity last'>
+          <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
+              href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
+          </span>
+        </div>
       </div>
       <div class="clearfix"></div>
     </div>
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 66e57a7b15d..12f2d8fa833 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -117,10 +117,6 @@
     max-width: 300px;
   }
 
-  .avatar {
-    margin-top: 0.15em;
-  }
-
   .main-link {
     line-height: $line-height-medium;
     position: relative;
@@ -128,10 +124,9 @@
     font-size: var(--font-up-1);
     a.title {
       color: var(--primary);
-      padding: 0;
+      padding: 0.5em 0 1.2em 0;
     }
     .topic-statuses {
-      padding: 0;
       a {
         line-height: 0.8;
         color: var(--primary-medium);
@@ -166,13 +161,9 @@
   }
 
   .topic-item-stats {
-    // disabling clicks because these targets are too small on mobile
-    pointer-events: none;
     position: relative;
-    display: flex;
-    align-items: baseline;
-    z-index: z("base");
     margin-top: 0.5em;
+    z-index: z("base");
     .category,
     .num,
     .last-poster {
@@ -186,22 +177,14 @@
     a:visited {
       color: var(--primary-med-or-secondary-med);
     }
-    .activity {
-      margin-left: auto;
-    }
-    .discourse-tags {
-      display: flex;
-      flex-wrap: nowrap;
-      flex: 0 1 auto;
-      overflow: hidden;
-    }
   }
 
   .age {
     white-space: nowrap;
     a {
-      color: var(--primary-600);
-      font-size: var(--font-down-1);
+      // let's make all ages dim on mobile so we're not
+      // overwhelming people with info about each topic
+      color: var(--primary-low-mid-or-secondary-high) !important;
     }
   }
 }
@@ -458,7 +441,7 @@ td .main-link {
     }
   }
   .num.activity a {
-    padding: 0.5em 0;
+    padding: 0;
   }
   // so the topic excerpt is full width
   // as the containing div is 80%