Why is there a <table> as the topic list UI?


(Matt Terry) #1

We’re building an Ember app at the moment and the discussions will all take place in Discourse. Really enjoy working with both.

I need to theme the Discourse side of things and I’m confused why the site uses a massive html table as the main list of posts. Am I missing something? Can I enable a mobile friendly version somehow which uses a nicely collapsing layout instead?

Or can I just override the templates in the customisations? Do I have to do that in discourse or can I somehow link out to external templates, so that they are under version control.

Or is there some great reason to use a table instead of some flexbox or grid system?

Really like how Discourse works.


(Matt Terry) #2

Hmm… well on a mobile devices it does load differently, there are separate desktop and mobile themes… That’s awesome, in Chrome inspector you just need to refresh after you switch to mobile view for the mobile spoofing to work


(Mittineague) #3

AFAIK using a table is to facilitate the sorting via the table head.

You would prefer to not have sorting for mobile in exchange for resolving layout problems?


(Matt Terry) #4

I didn’t even notice that Category/ Replies / Views and Activity were sort clickable on desktop. Odd that Topic isn’t, but looks identical.

I wonder if the sorting is why it uses a table? Odd then that it still uses a table on mobile but doesn’t have the sort columns.

Still confused, but really like the mobile theme


(Mittineague) #5

Hmmm, I don’t use mobile so I didn’t know it didn’t have sort.

Interesting problem, and one I don’t think a simple CSS display: inline would fix


(Kane York) #6

Check out this handlebars template, it’s a row item:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/list/topic_list_item.raw.hbs

It can be overridden in a customization to change the column layout. It needs to be a raw handlebars template for performance - if each of the tds were separate Views, the topic list perf wouldn’t be so hot.


Also, @sphism, it is rather ‘responsive’, as ‘responsive’ means “reacts to varying browser width”, which is done in CSS - try the web developer shake (dragging the right side of your browser back and forth).


(Sam Saffron) #7

moving it out of a table will not matter much its all going to be rendered on screen in one runloop anyway.


(Matt Terry) #8

The only things I see as being responsive within the table is that on wide desktop there are many users, and on a narrower breakpoint it switches to 1 user.

Whereas the mobile theme puts some of the column data under the topic, that’s more the sort of thing I would expect on a narrow breakpoint.

Just using a table is not Responsive, if it were then every website in the 90’s would have been responsive :smile:

Thanks for the details of what to override, I had a look at how Sam’s Minimal UI worked and that overrides the same template.


(Matt Terry) #9

It would be interesting to see how it worked without using a table. Implementing something like Zen Grids http://zengrids.com/ would be great for designers, since Zen Grids doesn’t need any html change, it’s all done in the SCSS files, unlike things like Bootstrap grids where you have to put certain classes into the html.