UX: Larger clickable area for mobile topic list (#16473)

discourse · Apr 26, 2022 · 8dd3d6c · 8dd3d6c
1 parent 07f9758
commit 8dd3d6c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 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
@@ -258,6 +258,19 @@ 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") ||
+        e.target.classList.contains("main-link"))
+    ) {
+      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
@@ -38,14 +38,10 @@
         </div>
       {{/unless}}
       {{discourse-tags topic mode="list"}}
-      <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 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 class="clearfix"></div>
-    </div>
   </div>
 </td>
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
@@ -124,7 +124,7 @@
     font-size: var(--font-up-1);
     a.title {
       color: var(--primary);
-      padding: 0.5em 0 1.2em 0;
+      padding: 0;
     }
     .topic-statuses {
       a {
@@ -161,18 +161,21 @@
   }
 
   .topic-item-stats {
+    // disabling clicks because these targets are too small on mobile
+    pointer-events: none;
     position: relative;
+    display: flex;
+    align-items: baseline;
     margin-top: 0.5em;
     z-index: z("base");
-    .category,
-    .num,
-    .last-poster {
-      float: left;
+    .num.activity {
+      margin-left: auto;
+      font-size: var(--font-down-1);
     }
     .category a {
       max-width: 160px;
     }
-    .num .fa,
+    .num .d-icon,
     a,
     a:visited {
       color: var(--primary-med-or-secondary-med);
@@ -182,9 +185,7 @@
   .age {
     white-space: nowrap;
     a {
-      // 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;
+      color: var(--primary-medium);
     }
   }
 }