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.