Ease topic entry by making whole row a link


(Pascal dHermilly) #1

I have a discourse forum for a patient-association - a very non tech-savy bunch.
Anyway, they/we think that clicking the row with a topic should be enough to enter a topic - as opposed to having to click the text in the row. Two of them was actually wondering for a while why they did not enter the topic. It is especially relevant in the mobile ui where you are so used to traverse lists - but it also applies for the desktop interface.

The suggestion is not to remove any other links in the just - just that when you hit the row background: enter the topic.


(Jeff Atwood) #2

Hmm. There are a few things to click here:

  • star (toggles star)
  • topic title (goes to next unread post in topic)
  • category (goes to list of topics in that category)
  • 1 to 5 users (brings up user card for that user)
  • post count (brings up direct first and last post entry)
  • views (does nothing)
  • last post date (goes to end of topic)

On mobile this is simplified, only showing

  • topic title
  • category
  • post count
  • last poster name (goes to user page)

Only the last part is different, we don’t show user cards on mobile.

So what exactly are you proposing? I could see us making the tap / click target for the topic title larger but if we made the “whole row” do the same thing, quite a bit of functionality would be lost. Even on mobile!


(Mittineague) #3

I would want the whole row to not be a link, but perhaps making the table cell respond to a click/tap event would help?

<td class="main-link clearfix" colspan="1" data-bindattr-28="28">
  <div id="ember1491" class="ember-view topic-statuses"></div>
  <a href="/t/showing-a-preview-of-a-topic-for-unregistered-users/20974/2" class="title">Showing a preview of a topic for unregistered users</a>
    <span id="ember1492" class="ember-view topic-post-badges">
<a href="/t/showing-a-preview-of-a-topic-for-unregistered-users/20974/2" class="badge new-posts badge-notification" title="there is 1 new post in this topic since you last read it">1</a>
</span>
</td>

(Jeff Atwood) #4

For now I’m going to add some top, right, and bottom padding to that link:

td.main-link a.title {
    padding: 15px 0;
}

I can’t see any downside to this, it just makes the title easier to click / tap.


(Mittineague) #5

Giving an outline to show the link area with padding, I don’t think you can get any better.


(Jerry) #6

I’ve tweaked the CSS of our Discourse install to do just that, but given how the links are done it broke a few things here and there. Nothing unfixable though.

(In red the tap targets of the links)


(Mittineague) #7

Did you check for any that were “new” or “unread”? Those icons got to fit in there somewhere. Jeff’s solution accommodates them.


(Jerry) #8

There’s space on the right for that, yes. But it doesn’t look as nice as if they were inline with the text, I agree. It’s a shitty solution but a working one :stuck_out_tongue:


(Pascal dHermilly) #9

That’s some good solutions.
To answer Jeff’s question, I meant that by making the TR element(or div/any parent element representing the row) a link to the topic you could click anywhere to enter the topic - except if you click one of the other links. Because e.g. the category is a child element it takes precedence - perhaps if it just fires first you would have to tell the dom not to send the event further up in the hierachy.
What I’m essentially saying is, this row is essentially about the topic it represents - but it also shows some secondary options.
So if you click the background of the row - you go to the row topic, if you click any of the special widgets they are shown instead.


(Joe Seyfried) #10

@jvzr, that looks great - could you post the CSS and other tweaks you had to do here?

In my old forum, I collected mouse click events over some time - you’d be surprised what your user base is doing - so a large clickable area is always a good thing! Especially using the space between the topic title and the buttons on the right is something I like.


(Jerry) #11

Here it is:

(Disclaimer: this will break things. We have severely reduced the amount of data shown on our forum so I haven’t tested the compatibility with every feature of Discourse. Moreover, some things are uglier than we’d like and we haven’t taken the time to make it work correctly. However, given the little amount of time spent making it work and the overall satisfaction we’ve had with this solution, I’d say it’s a win.)

.topic-list td {
    padding: 0 0 0 5px;
    height: auto;
}

.topic-list a.title {
    display: inline-block;
    width: 95%;
    height: 100%;
    padding: 12px 0 12px;
}

.featured-topic a.title {
    display: inline;
    width: auto;
    height: auto;
    padding: inherit;
}

.topic-list tbody tr.has-excerpt .star {
    margin-top: 12px;
}

.topic-list tbody tr.has-excerpt a.title {
    padding: 10px 0 2px;
}

.topic-list tbody tr.has-excerpt .topic-statuses {
    margin-top: 10px;
}

.topic-list tbody tr.has-excerpt .topic-excerpt {
    padding-bottom: 12px;
}

(Kane York) #12

That’s an HTML change, and can probably be done by just editing the .handlebars files - why don’t you try doing that and making a PR?

Look in jsapp/templates.


(Jeff Atwood) #15

On mobile the entire topic row is indeed a click / tap target now for smaller screens and big fingers.

On desktop the click target is fairly large

image


(Uhl) #16

Be great if the hit target extended to the right, up to the next column.

I recently started using Discourse and when browsing topics, I’ll put my mouse pointer somewhere in the middle of the title column and vertically scroll using the scroll wheel. Then when I come across a topic I’m interested and it has a short title, I’ll click only to find it doesn’t do anything. :man_facepalming:


(Jeff Atwood) #19

I’m not sure, is it possible to extend the click area a tad to the right @awesomerobot?

I don’t feel “full row” makes sense, but I am generally in favor of larger click targets when possible.


(Stephen) #20

Making whitespace a click target is typically a bad idea, particularly on any interface which can be used for touch.


(Kris) #21

The way our markup is structured we couldn’t easily do it at the moment, because it would change the position of the dot that indicates a topic is new

It might be possible to make this entire main-link area tappable instead? I’d have to move some padding around so we’re still covering the same amount of space vertically too.

18%20AM


Yes and no, it’s not too unusual to expect an entire table row to be a tappable link. I think in that case the entire row would typically be one singular click target though.

30%20AM

We could make this entire blue area a singular click target for example, but we’d lose the functionality of clicking on the post count.