Unread topics (Mobile version)

[PaulinaMX (ForosMX)]

A couple of days ago this problem appeared in my forum, although I have already entered the topics, they seem unread to me, I had the same problem in the desktop version but I was able to solve it in the template, but honestly not in the mobile version I have been able to solve it, I hope someone can help me, this is the template I use:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
    <td>
      {{~#unless expandPinned}}
      <div class='pull-left'>
        <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>
              </div>
              
      <div class='right'>
      {{else}}
      <div>
            {{/unless~}}
            

<div class='main-link'>
          {{raw "topic-status" topic=topic}}
          {{topic-link topic}}
          {{#if topic.featured_link}}
            {{topic-featured-link topic}}
          {{/if}}
          
          
{{#if hideCategory}}
   <div class='category'>
          <span class="author-name"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
        </div>
{{else}}
        
{{/if}}
                    {{#if topic.unseen}}
                      <span class="badge-notification new-topic"></span>
                      
             {{/if}}
          {{~#if expandPinned}}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if~}}
        </div>
                <div class='pull-right'>
          {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
        </div>
    
        <div class="topic-item-stats clearfix">
          {{#unless hideCategory}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/unless}}
    
          {{discourse-tags topic mode="list"}}
    
          <div class="pull-right">
            <div class='num activity last'>
            <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
            </div>
          </div>
              <div class="clearfix"></div>
        </div>
      </div>
    </td>
</script>

[Don]

There are some changes in core template so you should compare with that.

If I see it correctly you change the profile avatar section with this <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a> is the /users/ path correct? This is going to the user profile instead of open user card. With the default user path it should be /u/.

The other change in your template is if category hidden show the username. Which is clearly visible on your screenshot. I changed that section like this.

Remove this from your template:

{{#if hideCategory}}
   <div class='category'>
          <span class="author-name"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
   </div>
{{else}}
        
{{/if}}

---

And add this to the default {{#unless hideCategory}} with {{else}}.

{{#unless hideCategory}}
{{~raw-plugin-outlet name="topic-list-before-category"}}
<div class='category'>
  {{category-link topic.category}}
</div>
{{else}}
<span class="author-name">
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
</span>
{{/unless}}

---

So I suggest to import the whole template and modify it what your needs like this.

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
<td class="topic-list-data">
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='pull-left'>
    <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>
  </div>
  <div class='right'>
    {{~raw-plugin-outlet name="topic-list-before-link"}}
    <div class='main-link'>
      {{~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"}}
      {{~#if topic.unseen~}}
        <span class="topic-post-badges">&nbsp;<span class="badge-notification new-topic"></span></span>
      {{~/if~}}
      {{~#if expandPinned~}}
      {{~raw "list/topic-excerpt" topic=topic~}}
      {{~/if~}}
    </div>
    <div class='pull-right'>
      {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
    </div>
    <div class="topic-item-stats clearfix">
      {{#unless hideCategory}}
        {{~raw-plugin-outlet name="topic-list-before-category"}}
        <div class='category'>
          {{category-link topic.category}}
        </div>
        {{else}}
        <span class="author-name">
          <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
        </span>
      {{/unless}}
      {{discourse-tags topic mode="list"}}
      <div class="pull-right">
        <div class='num activity last'>
          <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
              href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
          </span>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</td>
</script>

---

This is looking good to me in theme creator. Sorry if I missed something.

Little CSS fix to make the title padding thinner so username can clickable.

.topic-list .main-link a.title {
  padding: 0.5em 0;
}

[PaulinaMX (ForosMX)]

Thank you very much, it’s solved now, it looks great.

One more thing, is there any CSS to make the text font in the author’s name bigger and give it color?

[Don]

I’m glad it solved. Sure you can change it. Like this
Change size and color whatever you want.

.topic-list .topic-item-stats .author-name a {
  font-size: var(--font-up-1);
  color: red;
}

[PaulinaMX (ForosMX)]

Thank you very much again, it looks just as I wanted.