Temas no leídos (versión móvil)

[PaulinaMX (ForosMX)]

Hace un par de días apareció este problema en mi foro, aunque ya he entrado en los temas, me parecen no leídos, tuve el mismo problema en la versión de escritorio pero pude solucionarlo en la plantilla, pero sinceramente no he podido solucionarlo en la versión móvil, espero que alguien pueda ayudarme, esta es la plantilla que uso:

<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>{{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>{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
            </div>
          </div>
              <div class="clearfix"></div>
        </div>
      </div>
    </td>
</script>

[Don]

Hay algunos cambios en la plantilla principal, así que deberías compararla.

Si lo veo correctamente, cambiaste la sección del avatar del perfil con esto <a>/users/{{topic.creator.username}}</a>{{avatar topic.creator imageSize="50"}}</a>. ¿Es la ruta /users/ correcta? Esto va al perfil del usuario en lugar de abrir la tarjeta del usuario. Con la ruta de usuario predeterminada, debería ser /u/.

El otro cambio en tu plantilla es que si la categoría está oculta, muestra el nombre de usuario. Lo cual es claramente visible en tu captura de pantalla. Cambié esa sección de esta manera.

Elimina esto de tu plantilla:

{{#if hideCategory}}
   <div>
          <span class="author-name"><a>{{topic.creator.username}}</a></span>
   </div>
{{else}}

{{/if}}

---

Y agrega esto al predeterminado {{#unless hideCategory}} con {{else}}.

{{#unless hideCategory}}
{{~raw-plugin-outlet name="topic-list-before-category"}}
<div>
  {{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}}

---

Así que sugiero importar toda la plantilla y modificarla según tus necesidades de esta manera.

<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>

---

Esto me parece bien en el creador de temas. Disculpa si me perdí algo.

Una pequeña corrección CSS para hacer que el relleno del título sea más delgado para que el nombre de usuario sea clickeable.

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

[PaulinaMX (ForosMX)]

Muchas gracias, ya está solucionado, se ve genial.

Una cosa más, ¿hay algún CSS para hacer que la fuente del nombre del autor sea más grande y darle color?

[Don]

Me alegra que se haya resuelto. Claro que puedes cambiarlo. Así
Cambia el tamaño y el color como quieras.

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

[PaulinaMX (ForosMX)]

Muchas gracias de nuevo, se ve justo como lo quería.