UX: Make full topic row clickable on mobile (#16440)

This commit is contained in:
Kris 2022-04-12 09:44:20 -04:00 committed by GitHub
parent 6f76a12e0a
commit 0e88cffaf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 12 deletions

View File

@ -258,6 +258,18 @@ 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;

View File

@ -38,12 +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>

View File

@ -123,10 +123,12 @@
z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
font-size: var(--font-up-1);
a.title {
display: block;
color: var(--primary);
padding: 0.5em 0 1.2em 0;
padding: 0;
}
.topic-statuses {
padding: 0 0 0.5em 0;
a {
line-height: 0.8;
color: var(--primary-medium);
@ -134,6 +136,10 @@
}
}
.topic-featured-link {
padding: 0;
}
.badge-notification,
.category-topic-link td.num .badge-notification {
position: relative;
@ -161,9 +167,13 @@
}
.topic-item-stats {
// disabling clicks because these targets are too small on mobile
pointer-events: none;
position: relative;
margin-top: 0.5em;
display: flex;
align-items: baseline;
z-index: z("base");
margin-top: 0.5em;
.category,
.num,
.last-poster {
@ -177,14 +187,22 @@
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 {
// 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-600);
font-size: var(--font-down-1);
}
}
}
@ -441,7 +459,7 @@ td .main-link {
}
}
.num.activity a {
padding: 0;
padding: 0.5em 0;
}
// so the topic excerpt is full width
// as the containing div is 80%