Changing views to creating date?

Jagster · January 31, 2023, 7:44am

/latest (and everything else) looks something like that:

Replies tells how active a topic is and Activity when there happened something last time. Those are useful piece of data. But Views… it can be interesting value for admins and OP, but it gives zero value to regular user — they don’t look at it and think ”well, it can’t be interesting topic because so few have opened it” (or vice versa).

But if we could have there creation/starting day it would tell right away if a topic is ancient or totally fresh.

I took that screenshot because I answered to that topic. I could leave it alone if I would know it was decently old topic — so, for discussion showing that date can be two edged sword, I know.

It can be chanded with a theme component, I would guess. But how hard job is it?

And with hard I mean… Is there someone who wants to do it pro bono I can’t code. I’m PhD of copy&paste, nothing else. And defenetly I don’t have budget.

But I would like to know too if I’m the only one who thinks showing amounts of views is mostly done for admin’s curiosity (we can get logs and views better via SQL, for example) and filling empty space, and that’s why we could use same space a bit more… in a more productive way

Arkshine · March 25, 2023, 12:57am

Hi Jakke,

Not sure if you still need this, but there we go!
You can replace the views column by overwriting the related templates (topic-list-header and topic-list-item).

Unfortunately, it has the caveat that you must copy-paste a lot of the original code, which may not work correctly depending on your theme/plugins/components. Also, you may have to update it if Discourse updates those parts.

Here is the code you can copy-paste into a component:

Head

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
    {{~raw-plugin-outlet name="topic-list-header-before"~}}
    {{#if bulkSelectEnabled}}
      <th class="bulk-select topic-list-data">
        {{#if canBulkSelect}}
          {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
        {{/if}}
      </th>
    {{/if}}
    {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions}}
    {{raw-plugin-outlet name="topic-list-header-after-main-link"}}
    {{#if showPosters}}
      {{raw "topic-list-header-column" order='posters' ariaLabel=(i18n "category.sort_options.posters")}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies' ariaLabel=(i18n "sr_replies")}}
    {{#if showLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes' ariaLabel=(i18n "sr_likes")}}
    {{/if}}
    {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes' ariaLabel=(i18n "sr_op_likes")}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='created' name='created' ariaLabel=(i18n "sr_created")}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity' ariaLabel=(i18n "sr_activity")}}
    {{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{~raw-plugin-outlet name="topic-list-before-columns"}}
    
    {{#if bulkSelectEnabled}}
      <td class="bulk-select topic-list-data">
        <label for="bulk-select-{{topic.id}}">
          <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
        </label>
      </td>
    {{/if}}
    
    {{!--
      The `~` syntax strip spaces between the elements, making it produce
      `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
      with no space between them.
      This causes the topic-post-badge to be considered the same word as "text"
      at the end of the link, preventing it from line wrapping onto its own line.
    --}}
    <td class='main-link clearfix topic-list-data' colspan="1">
      {{~raw-plugin-outlet name="topic-list-before-link"}}
      <span class='link-top-line'>
        {{~raw-plugin-outlet name="topic-list-before-status"}}
        {{~raw "topic-status" topic=topic}}
        {{~topic-link topic class="raw-link raw-topic-link"}}
        {{~#if topic.featured_link}}
          {{~topic-featured-link topic}}
        {{~/if}}
        {{~raw-plugin-outlet name="topic-list-after-title"}}
        {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
                                       topicId=topic.id
                                       unreadClass=unreadClass~}}
        {{~#if showTopicPostBadges}}
          {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
        {{~/if}}
      </span>
      <div class="link-bottom-line">
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{~raw-plugin-outlet name="topic-list-before-category"}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      </div>
      {{#if expandPinned}}
        {{raw "list/topic-excerpt" topic=topic}}
      {{/if}}
    
      {{~raw-plugin-outlet name="topic-list-main-link-bottom"}}
    </td>
    
    {{~raw-plugin-outlet name="topic-list-after-main-link"}}
    
    {{#if showPosters}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
    {{#if showLikes}}
      <td class="num likes topic-list-data">
        {{#if hasLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if showOpLikes}}
      <td class="num likes">
        {{#if hasOpLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.op_like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}

    <td class="num topic-list-data {{cold-age-class topic.createdAt startDate=topic.bumpedAt class=""}} activity" title="{{html-safe topic.bumpedAtTitle}}">
      <a class="post-activity" href="{{topic.url}}">
        {{~raw-plugin-outlet name="topic-list-before-relative-date"~}}
        {{~format-date topic.createdAt format="tiny" noTitle="true"~}}
      </a>
    </td>

    {{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="td"}}
</script>

Note: It has the same title on hover as Activity, and clicking on the date redirects to the start of the topic.

Jagster · March 25, 2023, 6:50am

Thanks!

Works just fine.

Small caveat, though

It kind of turns off Topic List Preview plugin.

First — that code was really nice gesture and does what expected. That is really more than I hoped.
Second — depending of how a forum shows longer dates (I’m using dd.mm.yy) there isn’t too much free space if this and TLP are on at same time. Is anyway situation of this or that, but not both.
Third — Topic List Preview is really complex plugin, I reckon. Conflicts with it are really easy to create and get. Again: matter of choice.

Arkshine · March 25, 2023, 12:38pm

Thanks for testing!

If you use Topic List Previews Theme Component (plugin version is deprecated), you can copy-paste the following using topic-list-item code from the repo.

Head

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
    {{~raw-plugin-outlet name="topic-list-header-before"~}}
    {{#if bulkSelectEnabled}}
      <th class="bulk-select topic-list-data">
        {{#if canBulkSelect}}
          {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
        {{/if}}
      </th>
    {{/if}}
    {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions}}
    {{raw-plugin-outlet name="topic-list-header-after-main-link"}}
    {{#if showPosters}}
      {{raw "topic-list-header-column" order='posters' ariaLabel=(i18n "category.sort_options.posters")}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies' ariaLabel=(i18n "sr_replies")}}
    {{#if showLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes' ariaLabel=(i18n "sr_likes")}}
    {{/if}}
    {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes' ariaLabel=(i18n "sr_op_likes")}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='created' name='created' ariaLabel=(i18n "sr_created")}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity' ariaLabel=(i18n "sr_activity")}}
    {{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{#if bulkSelectEnabled}}
      <td class='star'>
        <input type="checkbox" class="bulk-select">
      </td>
    {{/if}}
    
    {{#if tilesStyle}}
      <div class="tiles-grid-item-content main-link">
        <div class="image">
          {{#if hasThumbnail}}
            {{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails currentUser=currentUser site=site category=category opts=thumbnailOpts}}
          {{/if}}
          <a href='{{topic.url}}'>
            <div class="image-mask" style="{{backgroundGradient}}"></div>
          </a>
        </div>
        <div class="topic-details">
          <div class="topic-header-grid">
            {{raw "list/topic-list-title" topic=topic tilesStyle=tilesStyle showTopicPostBadges=showTopicPostBadges}}
            <div class="topic-category">
              {{#if showCategoryBadge}}
                {{category-link topic.category}}
              {{/if}}
              {{#if topic.tags}}
                {{discourse-tags topic mode="list"}}
              {{/if}}
            </div>
          </div>
          {{#if showExcerpt}}
            <a href='{{topic.url}}'>
              {{raw "list/topic-excerpt" topic=topic}}
            </a>
          {{/if}}
          <div class="topic-footer">
            {{raw 'list/topic-meta' likesHeat=likesHeat title=view.title topic=topic}}
            {{raw "list/topic-users" tilesStyle=tilesStyle abbreviatePosters=abbreviatePosters posters=abbreviatedPosters posterNames=posterNames}}
            {{#if showActions}}
              {{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions topic=topic}}
            {{/if}}
          </div>
        </div>
      </div>
    {{else}}
      {{~raw-plugin-outlet name="topic-list-before-columns"}}
      {{!--
        The `~` syntax strip spaces between the elements, making it produce
        `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
        with no space between them.
        This causes the topic-post-badge to be considered the same word as "text"
        at the end of the link, preventing it from line wrapping onto its own line.
      --}}
      <td class='main-link clearfix topic-list-data' colspan="1">
        {{#if hasThumbnail}}
          {{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails category=category opts=thumbnailOpts}}
        {{/if}}
        {{~raw-plugin-outlet name="topic-list-before-link"}}
        <span class='link-top-line'>
          {{~raw-plugin-outlet name="topic-list-before-status"}}
          {{~raw "topic-status" topic=topic}}
          {{~topic-link topic class="raw-link raw-topic-link"}}
          {{~#if topic.featured_link}}
            {{~topic-featured-link topic}}
          {{~/if}}
          {{~raw-plugin-outlet name="topic-list-after-title"}}
          {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
                                        topicId=topic.id
                                        unreadClass=unreadClass~}}
          {{~#if showTopicPostBadges}}
            {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
          {{~/if}}
        </span>
        <div class="link-bottom-line">
          {{#unless hideCategory}}
            {{#unless topic.isPinnedUncategorized}}
              {{~raw-plugin-outlet name="topic-list-before-category"}}
              {{category-link topic.category}}
            {{/unless}}
          {{/unless}}
          {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
          {{#if expandPinned}}
            {{raw "list/topic-excerpt" topic=topic}}
          {{/if}}
          {{#if showActions}}
            {{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions}}
          {{/if}}
          {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
        </div>
      </td>
    
      {{#if showPosters}}
        {{raw "list/posters-column" posters=topic.featuredUsers}}
      {{/if}}
    
      {{raw "list/posts-count-column" topic=topic}}
    
      {{#if showLikes}}
        <td class="num likes topic-list-data">
          {{#if hasLikes}}
            <a href='{{topic.summaryUrl}}'>
              {{number topic.like_count}} {{d-icon "heart"}}
            </a>
          {{/if}}
        </td>
      {{/if}}
    
      {{#if showOpLikes}}
        <td class="num likes">
          {{#if hasOpLikes}}
            <a href='{{topic.summaryUrl}}'>
              {{number topic.op_like_count}} {{d-icon "heart"}}
            </a>
          {{/if}}
        </td>
      {{/if}}
    
        <td class="num topic-list-data {{cold-age-class topic.createdAt startDate=topic.bumpedAt class=""}} activity" title="{{html-safe topic.bumpedAtTitle}}">
          <a class="post-activity" href="{{topic.url}}">
            {{~raw-plugin-outlet name="topic-list-before-relative-date"~}}
            {{~format-date topic.createdAt format="tiny" noTitle="true"~}}
          </a>
        </td>
    
      {{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="td"}}
    {{/if}}
</script>

Let me know if this works for you.

Jagster · March 25, 2023, 2:46pm

Both. The sidecar plugin isn’t deprecated, is it?

But I’ll give a spin for that a bit later today night. It’s almost 5 pm o’clock here and that means I have to start heat up sauna So, the most important things first

(And for mods and admins: this is NOT off topic, but real world UX…)

Arkshine · March 25, 2023, 3:24pm

Yes, the Sidecar plugin complements the theme component, no problem here.

Topic		Replies	Views
A reddit-ish theme for Discourse Theme	74	9269	December 5, 2024
Discourse Version 3.0 Releases	2	12959	January 11, 2023
Feedback on our simplified topic map experiment UX feedback , topic-map , design-experiment	102	3897	August 29, 2024
Redesigning the default category page UX	118	15691	April 18, 2017
Topic List Sidebars Theme component official , topic-list-sidebars	21	13272	June 5, 2024

Changing views to creating date?

Related topics