Lists of topics not in table


(Rinat Gabidullin) #1

Hello! How i can made list of topics in list of divs with description (example 250 chars) ? ( see screenshot )


(Jeff Atwood) #2

For what purpose? Just to have a different topic list display?


(Mittineague) #3

IIRC “excerpts” in the Topic list was discussed to some extent in the past.

One argument was that showing them would muck up the design.
When having them show as a mouse-over tool-tip was suggested, it was felt that because of endless scroll it would be too much resource use to implement.

AFAIK, that’s how it ended, as a “won’t do”


(Kane York) #4

I did create a crazytown layout for the topic list where every topic was in a flexbox (they read left-to-right, top-to-bottom), but there isn’t a way to get latest.json with excerpts for every topic.


(Jonathas Spalding) #5

Any tips on how to get rid of the table on topic lists?

I have the following custom head but the table and tr tags are still inserted on the topic lists.

<script type='text/x-handlebars' data-template-name='components/topic-list'>
  <div class="Flex-container">
    {{each topic in topics itemView="topic-list-item"}}
  </div>
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    <div class="Flex-cell">
       {{topic-link topic}}
    </div>
</script>

Result:

<table id="ember1654" class="ember-view topic-list">
  <div class="Flex-container">
    <tr id="ember1661" class="ember-view topic-list-item category-test" data-topic-id="8">
    <div class="Flex-cell">

(Jonathas Spalding) #6

Got it! Just did the .reopen thing. :smile: :fireworks:

Discourse.TopicListItemView.reopen({
  tagName: 'div'
});

(Rinat Gabidullin) #7

Where it must be included?


(Jonathas Spalding) #8
Admin > Customize > CSS/HTML > </head>

Take a look at this and this topics or search for “TopicListItemView.reopen”. :wink:


#9

Any idea how you could do this only for certain categories?


(Jonathas Spalding) #10

You can superset the init function of TopicListItemView and set a function that returns what you want for the tagName parameter. In your new function you can check in what category you are (by looking at the URL or any other way).

I think this should work for the init:

Discourse.TopicListItemView.reopen({
  init: function() {
    this._super()
    this.set('tagName', yourFunction())
  }
})