移动端主题列表中标签不可点击

用户体验
1

Repro 步骤（Meta 上的任何带标签的主题）：

  • 桌面：
    • 在主题列表和主题标题中，类别和标签均可点击
  • 移动设备：
    • 在主题列表（我认为是最近的更改）和主题标题中，类别均可点按
    • 仅在主题标题中，标签才可点按

这之前已经讨论过（Opening the category in the topic-list on mobile - #2 by codinghorror, Extra padding makes it hard for users to click on tag and category under topic title - #8 by awesomerobot

就个人而言，我觉得移动设备上的这些元素并不算太小。事实上，我经常在主题列表中点按类别和标签，结果却发现自己进入了主题标题，不得不再次重复相同的操作，最终才进入类别/标签视图。

3 个赞
2

您好 @md-misko :wave:

我可以重现这个问题。

移动视图中确实存在标签上的链接，但点击它们不起作用。
有时将鼠标悬停在上面并点击它们会打开下面的主题：

4 个赞
3

我认为 @awesomerobot 的所有更改都可以通过 CSS 覆盖。也许可以在您的网站上尝试一个主题组件几周，然后反馈您推荐的 CSS 更改？

1 个赞
4

Sam，您是指这个吗：

我已经在使用上述 CSS 的主题组件中尝试过，但似乎不起作用。

我的生产服务器尚未更新到最新版本，类别和标签在那里都不可点按。

但我也在暂存环境中使用最新构建进行了尝试，最近一定有什么变化，因为类别现在可以点按了，但标签却不行。

为了保持一致性，您是否同意这两个元素具有相似的功能，并且应该开箱即用，工作方式相同？

当然，我很乐意使用 CSS 来修复这个问题，但对我来说似乎不起作用（在生产和暂存环境中都尝试过）。

5

嗯，似乎有些地方出现了回归……我目前在 iOS 上看到的是，类别可以点击进入类别页面，而标签则是一个无效区域（因此它们甚至无法点击进入主题）。我可以对此进行调查。该 CSS 也已过时……目前它将是（我将更新该帖子）：

.topic-list .topic-item-stats__category-tags { 
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all; 
  }
}

我当然理解对一致性的追求，但意外点击类别或标签而不是主题，或者点击错误的类别/标签很容易发生……而且在主题列表中，进入主题是主要操作，这尤其糟糕。

移动设备上可点击元素建议的最小尺寸通常约为 45px 方形，我们需要将类别和标签的高度增加近一倍才能达到这个尺寸。如果类别和标签限制为单行，这是可能的，但很多网站的内容足够多，会导致换行……而且这样的间距效果不会很好：

image
image420×144 11.3 KB

我可以设想重新设计类别和标签，使用某种更像按钮的样式来确保合适的点击尺寸，但这将是一个重大的改变，我们希望在整个 Discourse 中实施。

2 个赞
6

感谢更新的 CSS，它在最新的构建版本上运行正常。

奇怪的是，我在移动设备上完全没有这种体验。也许是因为我习惯用右手操作，但我一直觉得点击主题标题比点击其他任何元素都要困难得多。

我主要用右手拇指进行导航，几乎不可能意外地点击类别甚至标签，但有时点击标题本身却会（因为文本左对齐以及屏幕宽度窄导致的换行，大部分情况下右侧是负空间）。

幸运的是，Clickable Topic Theme Component 为我极大地改善了移动设备上的导航体验，我现在几乎只使用主题列表中的负空间来导航到主题本身，并使用类别和标签元素来快速过滤到类别或标签视图（只是不断地惊讶于它不起作用 :upside_down_face:）。

我不确定这是否与屏幕尺寸有关，但我的手机屏幕小于 6 英寸，我从未在定位这些元素时遇到任何问题。

而且在主题内部，主题标题与类别和标签元素之间的间距更小，但点击它们一直都是启用的。

2 个赞