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 4bdbd7de4bdaee..1548d035ebadde 100644 --- 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 index 785bb81223be64..3755b65584ae9c 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,14 +38,10 @@ {{/unless}} {{discourse-tags topic mode="list"}} -
-
- {{format-date topic.bumpedAt format="tiny" noTitle="true"}} - -
+
+ {{format-date topic.bumpedAt format="tiny" noTitle="true"}} +
-
-
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 12f2d8fa8337e5..7469ca14e37aec 100644 --- 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); } } }